Code Syntax Highlighting with Rouge

Syntax highlighting is performed by Jekyll’s built-in Rouge.

Rouge supports a ton of languages, and you can find the short-codes here.

The theme used is Dracula, and it’s located in the /_assets/scss/custom/includes/_syntax_highlighting.scss file.

I’ve added some small border, margin, and padding refinements to the highlight class:

.highlight {
  background: $dt-gray-dark;
  border-radius: 5px;
  color: $dt-gray-light;
  margin-bottom: 1rem;
  padding: 0.6rem 0.6rem 0.1rem 0.5rem;

You can tweak this all you want and/or swap out the entire contents of the _syntax_highlighting.scss file to make it your own.

Code highlighting examples

Terminal (shell)

A terminal command

HTML

<div class="container py5">
  <p>Lorem ipsum</p>
</div>

JavaScript

function fibonacci(n) {
  if (n < 2) {
    return 1;
  } else {
    return fibonacci(n - 2) + fibonacci(n - 1);
  }
}

Liquid

{% for item in site.docs %}
  <h2>{{ item.title }}</h2>
  <p>{{ item.description }}</p>
  <p><a href="{{ item.url }}">{{ item.title }}</a></p>
{% endfor %}

When writing Liquid code snippets, be sure to surround your Liquid code with raw/endraw tags, or Jekyll will actually process the code as written. See here for more info.

React JSX

React.render(<div>Bonjour!</div>, document.getElementById("container"));

Ruby

def fibonacci( n )
    return  n  if n <= 1
    fibonacci( n - 1 ) + fibonacci( n - 2 )
end

Sass (SCSS)

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}