コードをレンダリングするHTML文字列を渡すと、私はこのような<a href="http://www.metalsmith.io/" rel="nofollow noreferrer">Metalsmith</a>またはHexoのような静的な発電用<a href="https://jekyllrb.com/docs/frontmatter/" rel="nofollow noreferrer">frontMatter</a> HTML文字列の例を持って

Question

スニペットしかし、私はすべてを得るインライン。

だから、レンダリング私の最終は次のとおりです。

<a class="button-social" href="#"> <div class="button-social__icon"><i class="fa fa-dashboard"></i></div> <div class="button-social__network">Button</div> </a> 

の代わりに：

<a class="button-social" href="#"> 
    <div class="button-social__icon"><i class="fa fa-dashboard"></i></div> 
    <div class="button-social__network">Button</div> 
</a> 

マイ小枝テンプレートは、単にこれですとコードがPrismJSで強調表示されます。

<div class="snippet-code" id="sn1"> 
    <pre class="lang-html"><code>{{ html.code|raw }}</code></pre> 
</div> 

それ何らかの理由で改行が緩んでいるようですが、これはソースコードの様子です：

<pre><code class="lang-html"><a class="button-social" href="#"> <div class="button-social__icon"><i class="fa fa-dashboard"></i></div> <div class="button-social__network">Button</div> </a></code></pre> 

どのように私はそれのインデントでコードを見るために改行を失うことを避けることができますか？

Answer 1

あなたはこのようnew line 2 break filterを試みることができる：

<div class="snippet-code" id="sn2"> 
    <pre class="lang-html"> 
    <code> 
    {{ html.snippet|raw|nl2br }} 
    </code> 
    </pre> 
</div> 

それは<br/>タグを挿入します。それがあなたのために働くかどうか分からないのですか？