如何删除突出显示jekyll中不必要的缩进和断行

Question

我使用jekyll code highlight和gem rouge。

Templates - Jekyll • Simple, blog-aware, static sites

代码（index.html）

---
layout: default
---

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-2" style="background-color:red;">
      {% highlight ruby %}
      def hoge
        puts 'red'
      end
      {% endhighlight %}
    </div>
    <div class="col-sm-8" style="background-color:blue;">
      {% highlight ruby %}
      def foo
        puts 'blue'
      end
      {% endhighlight %}
    </div>
    <div class="col-sm-2" style="background-color:yellow;">
      {% highlight ruby %}
def bar
  puts 'yellow'
end
      {% endhighlight %}
    </div>
  </div>
</div>

结果

提交

https://github.com/shingo-nakanishi/jekyll-dojo/tree/ca564cd5653e7ee028cd30b87c04a6076f078693

点

      {% highlight ruby %}
def bar
  puts 'yellow'
end
      {% endhighlight %}

是不必要的缩进消失了。但是不可读的HTML代码。不必要的断线没有消失。

如何删除它们？

Answer 1

新行和额外缩进被保留在highlight标记内 - 类似于默认情况下HTML pre标记内的文本显示方式。修剪第一个换行符，但保留最后一个换行符，因为后面跟着空格。

这会产生您想要的输出，代价是源缩进：

<div class="container-fluid">
  <div class="row">
    ...
    <div class="col-sm-2" style="background-color:yellow;">
{% highlight ruby %}
def bar
  puts 'yellow'
end
{% endhighlight %}
    </div>
  </div>
</div>

或者，您可以捕获标记上方的输出以保留源缩进：

{% capture code %}
def bar
  puts 'yellow'
end
{% endcapture %}

<div class="container-fluid">
  <div class="row">
    ...
    <div class="col-sm-2" style="background-color:yellow;">
      {% highlight ruby %}{{ code }}{% endhighlight %}
    </div>
  </div>
</div>

Answer 2

高亮显示标记用于保留代码缩进，就像html pre标记一样。

如果要缩进缩进，则必须删除不需要的间距。

额外的行是由于缩小{% endhighlight %}之前的缩进造成的。对于液体来说，它是一条新线。