如何在液体中保存缩进？

Question

我正在一个jekyll项目中，这需要我创建一个包含代码段的元素。包含元素的代码如下所示：

  {% 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>

Answer 1

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

更多关于前置标签的信息：https://www.w3schools.com/tags/tag_pre.asp

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