.content pre code double padding?

[shirohana]

Overview of the problem

Strange view from .content pre code

This is about the Bulma CSS framework

Description

I got double padding from .content pre code, is it expected view? Or I used in a wrong way?

Here's the sample:

https://codepen.io/shirohana/pen/ZJgyyG?editors=1000

[shirohana]

Thanks :)

[djdeo]

I have the same question, but it's not double padding, it has more indentation, please check if I write the correct way, bulma v: 0.6.1: https://github.com/djdeo/customized-css/blob/master/bulma-pre.html

[shirohana]

Maybe you need a preprocessor :)

I'm using pug (or jade) now, it works good in almost all cases to me. If you ever had a good time in zen-coding (or emmet), you'll love it ⸗‵ ᴗ ‵⸗

pug is a indent-based HTML preprocessor like python, and so many features you'll need.

For example:

doctype html
html
  head
    meta( charset="utf-8" )
    meta( name="viewport", content="width=device-width, initial-scale=1" )
    title Pre code tag Extra indentation
    link( rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" )
    link( rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css" )
  body
    section.section: .container
      .columns
        .column.is-offset-2.is-8
          h1.title.is-2
            | Pre code tag Extra indentation

          hr

          .content.is-medium
            p Here's the default effect

            pre: code.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

            p After manually adjusted

            pre: code.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

            p.
              I'm not sure if this is an issue, but this happens
              every time when I beautify html with HTMLPrettify.
              Have to manually delete the extra indentation

            p Please advise

just done the same thing you've wrote.

You can learn how to write and install from their offical website: https://pugjs.org/api/getting-started.html

[shirohana]

Back to the question,

it is the correct behavior of pre, and you have no solution except 0 indented your content in pure HTML.

[djdeo]

Thanks, Hano

I'll try that and check if there's same problem.

Cheers,

2017年11月11日星期六，Hana Shiro notifications@github.com 写道：

Back to the question,

it is the correct behavior of pre, and you have no solution except 0 indented your content in pure HTML.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/jgthms/bulma/issues/1167#issuecomment-343619723, or mute the thread https://github.com/notifications/unsubscribe-auth/AevNd9HwNCtgLcgZW61PUAu5ZPNLGhMJks5s1OW3gaJpZM4PSEwN .

[djdeo]

Hi again, Hano:+1: Thank you, I fixed this, in codepen i compiled the .pug file you wrote, and it works, although I still don't know the theory and what's the difference between them,

[shirohana]

Hello :)

I'm sorry for replying so late... I have no time to say too much, I was be recruited by my country about several weeks ago, it's really a hard time to me...

I'll give you complete explaining after I finished my job (´-ωก`)