Styling language specific code blocks with Jekyll

1 min read

While inspecting the markup of some syntax highlighted code blocks I noticed something I hadn’t before, language-lexer classes:

<div class="language-css highlighter-rouge">
  <pre class="highlight">
    <code>.foo { color: red; }</code>

This extra hook1 on the <div> element opens up some interesting styling possibilities. A fun use case for this is styling code blocks to look like terminal windows. Simply use terminal2 as the language/lexer like so:



Add the following Sass to your site’s stylesheet:

$terminal-window-height: 30px;

.language-terminal {
  position: relative;
  margin-bottom: 1.5em;
  padding: calc(#{$terminal-window-height} + 1em) 1em 1em;
  border: 1px solid $border-color;
  border-radius: $border-radius;
  box-shadow: 0 0.25em 1em rgba($base-color, 0.25);
  background-color: $base-color;

  &::before {
    content: "\2022 \2022 \2022";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: $terminal-window-height;
    margin: 0;
    padding: (0.5 * $terminal-window-height) 0;
    background: mix($base-color, #fff, 25%);
    color: mix($base-color, #fff, 50%);
    font-size: (2 * $terminal-window-height);
    line-height: 0;
    text-indent: (0.5 * $terminal-window-height);

  .highlight {
    margin: 0;
    padding: 0;
    background-color: initial;
    color: #fff;

And you’ll get something that looks like this:

[15:34:01] Finished 'site' after 2.18 min
[15:34:01] Starting 'copy:site'...
[15:34:06] Finished 'copy:site' after 4.8 s
[15:34:06] Finished 'build:site' after 2.33 min
[15:34:06] Starting 'reload'...
[BS] Reloading Browsers...
[15:34:06] Finished 'reload' after 5.22 ms

This isn’t limited to language-terminal, and can be applied to any of the other languages and lexers supported by Rouge.

  1. Apparently this was added into Kramdown a year ago. :neutral_face: Who knew? 

  2. terminal and console are aliases for shell_session and can be used interchangeably when assigning a language for syntax highlighting. 

Enjoyed this content?

Help keep it free by sending a donation or purchasing something from my Amazon Wish List. You can also subscribe to various site feeds to get notified of new posts or follow me on social media.


Great job! Can you give me the color variables for this snippet? As I don’t seem to find them anywhere ^^

SCSS variables can be found in the source code for this site.


Leave a comment