如何删除高亮 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 标签一样。

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

额外的行是由于关闭前的缩进{% endhighlight %}。对于液体，这是一条新线。

Answer 2

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>

如何删除高亮 jekyll 中不必要的缩进和换行

How to remove unnecessary indent and break line in highlight jekyll

liquid

jekyll

代码 (index.html)

结果

提交

点