3

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?

2
  • Did you have a repository url ? It's better for debugging. Commented Aug 6, 2016 at 12:00
  • I edit for commit. Commented Aug 6, 2016 at 15:58

2 Answers 2

3

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>
1
  • capture is the only way I was able to get this to work the way I wanted it to. All other variants (including <div markdown="1">...</div> incorrectly escaped content and/or added extra </div> tags at the end for no reason. Commented Aug 2, 2018 at 18:20
0

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.

2
  • you mean the jekyll do not have lie hear document <<~EOS? hear document ~ remove indent. Commented Aug 7, 2016 at 12:08
  • Code representation uses HTML PRE. This tag doesn't remove indentation. And no heredoc in liquid. Commented Aug 7, 2016 at 21:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.