title: How to remove unnecessary indent and break line in highlight jekyll
body: <p>I use jekyll <code>code highlight</code> with <code>gem rouge</code>.</p>
  
  <p><a href="https://jekyllrb.com/docs/templates/" rel="nofollow noreferrer">Templates - Jekyll • Simple, blog-aware, static sites</a></p>
  
  <h2>Code (index.html)</h2>
  
  <pre><code>---
  layout: default
  ---
  
  &lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-2" style="background-color:red;"&gt;
        {% highlight ruby %}
        def hoge
          puts 'red'
        end
        {% endhighlight %}
      &lt;/div&gt;
      &lt;div class="col-sm-8" style="background-color:blue;"&gt;
        {% highlight ruby %}
        def foo
          puts 'blue'
        end
        {% endhighlight %}
      &lt;/div&gt;
      &lt;div class="col-sm-2" style="background-color:yellow;"&gt;
        {% highlight ruby %}
  def bar
    puts 'yellow'
  end
        {% endhighlight %}
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>Result</h2>
  
  <p><a href="https://i.stack.imgur.com/FWLtn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FWLtn.png" alt="enter image description here"></a></p>
  
  <h2>Commit</h2>
  
  <p><a href="https://github.com/shingo-nakanishi/jekyll-dojo/tree/ca564cd5653e7ee028cd30b87c04a6076f078693" rel="nofollow noreferrer">https://github.com/shingo-nakanishi/jekyll-dojo/tree/ca564cd5653e7ee028cd30b87c04a6076f078693</a></p>
  
  <h2>Point</h2>
  
  <pre><code>      {% highlight ruby %}
  def bar
    puts 'yellow'
  end
        {% endhighlight %}
  </code></pre>
  
  <p>is the unnecessary indent was gone. but unreadable html code. the unnecessary break line not gone.</p>
  
  <p>How to remove them?</p>