Reading code isn't always that easy, which is why syntax highlighting is a good idea.

As stated on GitHub Pages, you can use Rouge out of the box with Jekyll. In Jekyll 3 and above, Rouge is the default syntax highlighter and works for 60+ languages.

In fact, GitHub Pages only supports Rouge as syntax highlighter. Traditionally, highlighting in Jekyll was implemented using the {% highlight %} Liquid tag, but now pure Markdown should be used instead.

Code blocks

To create a fenced code block, use triple backticks ``` before and after the the code block, and include the language you are using after the first backticks, like so:

```scss
@mixin text-color($color) {
  color: $color;
}

.header {
  min-height: 4em;
  background-color: rgb(0,0,0);
  @include text-color(white);
  border-radius: 5px;
  box-shadow: 1px 1px 1px rgba(244,201,73,0.1);
}
```

The above results in the following formatted code block, and you can make your code look pretty using a Pygments CSS theme compatible with Rouge:

@mixin text-color($color) {

  color: $color;
}

.header {
  min-height: 4em;
  background-color: rgb(0,0,0);
  @include text-color(white);
  border-radius: 5px;
  box-shadow: 1px 1px 1px rgba(244,201,73,0.1);
}

Liquid tags

Finally, if you want to write a fenced code block containing Liquid tags, you need to wrap your code with {% raw %} and {% endraw %} to stop Liquid from interpreting your code as Liquid.

Which results in the following:

{% include header %}