Use highlightjs to highlight the code blocks

[doug-devx]

This issue follows #17

We can highlight code blocks using highlightjs. https://highlightjs.org/

Basic implementation

Using highlightjs

highlightjs is an alternate highlighter.

to use this you can disable Jekyll's default highlighter in the _config.yaml with:

markdown: kramdown
kramdown:
  syntax_highlighter_opts:
    # disables syntax highlighting so another highlighter like highlightjs can be used
    disable: true

In _includes/head_custom.html you add the references to the highlightjs code and styles. See highlightjs' documentation for details.

You'll notice that after this code is highlighted, but you lose the styling and copy functionality. You will need to add those back yourself.

Styles can be added in _sass/custom/custom.scss

Specifically you may want to add styles for the code.hljs element class code block.

Copy button

A copy button can be added to code blocks using https://github.com/arronhunt/highlightjs-copy

JS and CSS CDN links added to _includes/head_custom.html and code registers the highlightjs-copy plugin (see highlightjs-copy for set up).