Как можно сохранить отступы в жидкости? - PullRequest
Новая
       4

Как можно сохранить отступы в жидкости?

0 голосов
/ 07 апреля 2020

Я работаю над проектом 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>

1 Ответ

0 голосов
/ 07 апреля 2020

Сразу после написания этого я обнаружил контейнер HTML , который поддерживает предварительно отформатированный текст и, похоже, решает проблему.

Подробнее о предварительном теге здесь: https://www.w3schools.com/tags/tag_pre.asp

TLDR: Jekyll / Liquid работают отлично, и это просто общий способ работы HTML, который требует использование тега Pre.

...