jekyll - 如何删除高亮 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>