Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>When you use <code>=</code> in Haml to include the results of a script, Haml will re-indent the inserted text so that it matches the indentation of where it is included. For example, if you have Haml that looks something like this:</p> <pre class="lang-haml prettyprint-override"><code>%html %body .foo = insert_something </code></pre> <p>and <code>insert_something</code> returns some HTML like this:</p> <pre class="lang-html prettyprint-override"><code>&lt;p&gt; This is possily generated from Markdown. &lt;/p&gt; </code></pre> <p>then the resulting HTML will look like this:</p> <pre class="lang-html prettyprint-override"><code>&lt;html&gt; &lt;body&gt; &lt;div class='foo'&gt; &lt;p&gt; This is possily generated from Markdown. &lt;/p&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Note how the <code>p</code> element is indented to match its position in the document. Normally this doesn’t matter, because of the way whitespace in HTML is collapsed. However there are HTML elements where the whitespace is important, in particular <code>pre</code>.</p> <p>What it looks like is happening here is that your Markdown is generating something like</p> <pre class="lang-html prettyprint-override"><code>&lt;pre&gt;&lt;code&gt;line 1 is fine line 2 is wrapping &lt;/code&gt;&lt;/pre&gt; </code></pre> <p>and when it is included in your Haml file (I’m guessing you’re using Haml layouts with <code>= yield</code> to include the Markdown) it is being indented and the whitespace is showing up when you view the page. Note how the first line is immediately after the opening tags so there is no extra whitespace.</p> <p>There are a couple of ways to fix this. If you set the <a href="http://haml.info/docs/yardoc/Haml/Options.html#ugly-instance_method" rel="nofollow"><code>:ugly</code> option</a> then Haml won’t re-indent blocks like this (sorry I don’t know how you set Haml options in Nanoc).</p> <p>You could also use the <a href="http://haml.info/docs/yardoc/Haml/Helpers.html#find_and_preserve-instance_method" rel="nofollow"><code>find_and_preserve</code> helper method</a>. This replaces all newlines in whitespace sensitive tags with HTML entity <code>&amp;#x000A;</code>, so that they won’t be affected by the extra whitespace when indented:</p> <pre><code>= find_and_preserve(yield) </code></pre> <p>Haml provides an easy way to use <code>find_and_preserve</code>; <a href="http://haml.info/docs/yardoc/file.REFERENCE.html#tilde" rel="nofollow"><code>~</code> works the same as <code>=</code>, except that it runs <code>find_and_preserve</code> on the result</a>, so you can do:</p> <pre><code>~ yield </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload