Markup: Syntax Highlighting

Syntax highlighting is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.^[1]

GFM Code Blocks

GitHub Flavored Markdown fenced code blocks are supported. To modify styling and highlight colors edit /_sass/syntax.scss.

#container {
  float: left;
  margin: 0 -240px 0 0;
  width: 100%;
}
```<pre class="language-scss"><code class="language-scss"><span class="token selector">.highlight </span><span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token variable">$monospace</span><span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token variable">$type-size-7</span><span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 1.8<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>

```html<nav class="pagination" role="navigation">
  {% if page.previous %}
    <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
  {% endif %}
  {% if page.next %}
    <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
  {% endif %}
</nav><!-- /.pagination -->

module Jekyll
  class TagIndex < Page
    def initialize(site, base, dir, tag)
      @site = site
      @base = base
      @dir = dir
      @name = 'index.html'
      self.process(@name)
      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
      self.data['tag'] = tag
      tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
      tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
      self.data['title'] = "#{tag_title_prefix}#{tag}"
      self.data['description'] = "An archive of posts tagged #{tag}."
    end
  end
end

Code Blocks in Lists

Indentation matters. Be sure the indent of the code block aligns with the first non-space character after the list item marker (e.g., 1.). Usually this will mean indenting 3 spaces instead of 4.

1. Do step 1.

2. Now do this:

   def print_hi(name)
     puts "Hi, #{name}"
   end
   print_hi('Tom')
   #=> prints 'Hi, Tom' to STDOUT.

3. Now you can do this.

Highlight Tag

An example of a code blocking using {% highlight %} tag.

// ‘gulp html’ – does nothing

// ‘gulp html --prod’ – minifies and gzips HTML files for production

gulp.task(‘html’, () => {

  return gulp.src(paths.siteFolderName + paths.htmlPattern)

    .pipe(when(argv.prod, htmlmin({

      removeComments: true,

      collapseWhitespace: true,

      collapseBooleanAttributes: false,

      removeAttributeQuotes: false,

      removeRedundantAttributes: false,

      minifyJS: true,

      minifyCSS: true

    })))

    .pipe(when(argv.prod, size({title: ‘optimized HTML’})))

    .pipe(when(argv.prod, gulp.dest(paths.siteFolderName)))

    .pipe(when(argv.prod, gzip({append: true})))

    .pipe(when(argv.prod, size({

      title: ‘gzipped HTML’,

      gzip: true

    })))

    .pipe(when(argv.prod, gulp.dest(paths.siteFolderName)))

});

Module[{},

  Sqrt[2]

  4

]

GitHub Gist Embed

An example of a Gist embed below.