如何在液体中保存凹痕？答案

【问题标题】：How can indents be preserved in liquid?如何在液体中保存凹痕？
【发布时间】：2020-04-06 21:05:52
【问题描述】：

我正在做一个 jekyll 项目，该项目需要我创建一个 code-sn-p 包含元素。包含元素的代码如下所示：

  {% include callouts/codeSnippet.html
       title="The title of the snippet"
       bodyText="'Lines of code', 'for(as many as you need) {', '    indented with spaces', '}' "
  %}

这由包含文件 codeSnippet.html 处理，其中包含以下内容：

<div class="row codeSnippet">
    <div class="col-md-1">
        <i class="fa fa-file-alt" aria-hidden="true"></i>
    </div>
    <div class="col-md-11">
        <h1>{{ include.title }}</h1>
        {% assign rows = include.bodyText | split: ',' %}
        {% for row in rows %}
            <div class="snippetField">
                <span class="lineNumber">{{ forloop.index }}</span> {{ row | remove: "'" }}
            </div>
        {% endfor %}  
    </div>
</div>

不幸的是，当液体接收到“缩进空格”之前的四个空格时，它会在显示输出之前将它们删除，所以 Jekyll 生成的输出是这样的：

        <h1>The title of the snippet</h1>


            <div class="snippetField">
                <span class="lineNumber">1</span> Lines of code
            </div>

            <div class="snippetField">
                <span class="lineNumber">2</span>  for(as many as you need) {
            </div>

            <div class="snippetField">
                <span class="lineNumber">3</span>    indented with spaces
            </div>

            <div class="snippetField">
                <span class="lineNumber">4</span>  } 
            </div>

【问题讨论】：

标签： jekyll liquid

【解决方案1】：

写完之后，我立即发现了 HTML <pre></pre> 容器，它支持预格式化文本，似乎可以解决问题。

更多关于 pre 标签的信息在这里：https://www.w3schools.com/tags/tag_pre.asp

TLDR：Jekyll / Liquid 工作正常，这只是 HTML 工作的一般方式，需要使用 Pre 标记。

【讨论】：