Menu icon Foundation
Whitespace for <pre> tags with Foundation CLI + Panini

I have HTML like the following in my source (notice the whitespace):

    <figure class="code-example">
      <pre class="code-example-code">
&lt;title&gt;
{% if current_page.home? %}
  \{{ site.title }}
{% else %}
  \{{ page_title }} - \{{ site.title }}
{% endif %}
&lt;/title&gt;</pre>
    </figure>

The contents of the <pre> tag there are intentionally forced to start at the beginning of the line.

But then Foundation CLI does its thing and builds output, and I get this:

          <figure class="code-example">
            <pre class="code-example-code">
      &lt;title&gt;
      {% if current_page.home? %}
        {{ site.title }}
      {% else %}
        {{ page_title }} - {{ site.title }}
      {% endif %}
      &lt;/title&gt;</pre>
          </figure>

I need for the contents of the <pre> tag to be at the beginning of each line, or else I get awkward rendering like this:

(See how the code sample is indented a few spaces to the right? Not good!)

Is there a way to setup the gulpfile to instruct Foundation to not auto-indent the output?

 

sitesprewhitespacepaninihtml

I have HTML like the following in my source (notice the whitespace):

    <figure class="code-example">
      <pre class="code-example-code">
&lt;title&gt;
{% if current_page.home? %}
  \{{ site.title }}
{% else %}
  \{{ page_title }} - \{{ site.title }}
{% endif %}
&lt;/title&gt;</pre>
    </figure>

The contents of the <pre> tag there are intentionally forced to start at the beginning of the line.

But then Foundation CLI does its thing and builds output, and I get this:

          <figure class="code-example">
            <pre class="code-example-code">
      &lt;title&gt;
      {% if current_page.home? %}
        {{ site.title }}
      {% else %}
        {{ page_title }} - {{ site.title }}
      {% endif %}
      &lt;/title&gt;</pre>
          </figure>

I need for the contents of the <pre> tag to be at the beginning of each line, or else I get awkward rendering like this:

(See how the code sample is indented a few spaces to the right? Not good!)

Is there a way to setup the gulpfile to instruct Foundation to not auto-indent the output?

 

Rafi Benkual almost 3 years ago

Hi Chris,

Trying to figure out what's happening here. Are you trying to display code examples?

BTW: The CLI is the command line tool to set up projects. It's more likely that something else is happening here.

Chris Peters almost 3 years ago

Rafi, I am trying to display code examples. The screenshot above with the black background is what's rendered in the browser.

I am sure it's something with the build process auto-indenting the HTML. That's why I'm blaming the CLI.

Chris Peters almost 3 years ago

Is there a particular GitHub repo where I should file an issue for this? 

Jan Müller about 1 year ago

Although this thread is 2 years old, the problem still exists.

Chris, did you find a way to get around that bug?

Jan Müller about 1 year ago

I found out how to avoid the problem.

https://stackoverflow.com/questions/31753617/how-can-i-remove-leading-whitespace-in-my-pre-code-block-without-removing-in

It's caused by the way how partials are included.

Here some example files.

Layout:

...
<html>
    ...
    <body>
        {{> body}}
    </body>
</html>

Then the index.html:

<div class="grid-x">
    <div class="cell">
        {{> partial-with-pre-tag}}
    </div>
</div>

And then partial-with-pre-tag.html:

And then partial-with-pre-tag.html:
<div>
	<pre>1st line
2nd line
3rd line
for-loop
	do something
end-loop
last line</pre>
</div>

Each partial include takes all whitespaces BEFORE the include and puts them in front of EVERY line of the included Partial!

In this example we have 2 tabs before {{> body}} plus 2 tabs before {{> partial-with-pre-tag}}. That makes 4 tabs before EVERY line in the <pre> element. Resulting in something like this:

                1st line
                2nd line
                3rd line
                for-loop
                    do something
                end-loop
                last line

I still regard this behaviour as a bug.

The "solution" is to destroy indention in all partial includes on the way until the <pre> element, e.g. like this:

...
<body>
    <div>
        <any-element>
            <another-element>
                <div>
                    <something>
                        <div>
                            <div>
{{> partial-name}}
                            </div>
                        </div>
                    </something>
                </div>
            </another-element>
        </any-element>
    </div>
</body>