How to remove unnecessary indent and break line in highlight jekyll

问题

I use jekyll code highlight with gem rouge.

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

Code (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>

Result

Commit

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

Point

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

is the unnecessary indent was gone. but unreadable html code. the unnecessary break line not gone.

How to remove them?

回答1:

The newlines and extra indentation are being preserved inside the highlight tags - similar to how text inside an HTML pre tag is displayed by default. The first newline is trimmed, but the final newline is preserved since it is followed by whitespace.

This produces the output you want, at the cost of source indentation:

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

Alternatively, you could capture the output above your markup to keep your source indentation:

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

回答2:

highlight tag is made to preserve code indentation, just like the html pre tag does.

If you want correct a indentation, you must remove unwanted spacing.

The extra line is due to indentation before closing {% endhighlight %}. For liquid it's a new line.

来源：https://stackoverflow.com/questions/38802499/how-to-remove-unnecessary-indent-and-break-line-in-highlight-jekyll

标签

Jekyll

liquid