Jekyll inserting extra code when generating blog posts

Question

I'm creating my first Jekyll site. I try to include a blogging section which I'm copying from an existing non-Jekyll version, converting existing blog pages which were in hardcoded html.

I put my header, navigation, and footer html in _include files. And I merge those in a layout file that also includes {{ content }}

I erase the header, navigation, and footer from the old html file and I only include the body in the .markdown file for the post.

I was expecting the content of the markdown file to be included at the place of the {{ content }}... it does, however Jekyll also seems to include this before the {{ content }} content:

<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>

so instead of seeing my own html generated, I see the "code" version of my html. Where does this extra code come from, and how do I get around it?

ashmaroli ashmaroli · Accepted Answer · 2018-07-13T03:57:20

Where does this extra code come from..?

The extra code <div class="highlighter-rouge"><div class="highlight"> you see is a sign of syntax-highlighting.

Syntax-highlighting is rendered in 2 ways:

When you enclose a block of text within triple backticks and a language ```ruby
```
```ruby
def some_method
  # do something
end
```
```
becomes
```
def some_method
  # do something
end
```
(the above block will have the same extra code in the generated index.html)

When you indent kramdown content by more than 4 spaces

      ## Heading 2

      Some Markdown text here.
      Lorem Ipsum [dolor](sit/amet/index.html)

becomes an unrendered block of Markdown highlighted for language plain-text

## Heading 2

Some Markdown text here.
Lorem Ipsum [dolor](sit/amet/index.html)

Jekyll inserting extra code when generating blog posts

1 Answers