CODEWITHSUNDEEP
jekyllliquid
shingo.nakanishi
shingo.nakanishi

Reputation: 2807

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

enter image description here

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?

Upvotes: 3

Views: 1241

Answers (2)

Ross
Ross

Reputation: 2871

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>

Upvotes: 3

David Jacquel
David Jacquel

Reputation: 52809

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.

Upvotes: 0

Related Questions