Logarion text system

Code highlighting

| | | topics: Enhancements | keywords: code, highlighting
id: e8b9a621-4ab6-4e89-b754-203cf80ba08b

Logarion doesn't come by default with code highlighting, but it can easily be enabled using Hightlight.js.

Highlight.js

One of the more featureful Javascript based highlighters.

Get

Visit https://highlightjs.org/download/.

There are two options:

  1. Use the provided snippet which will use their already hosted Javascript and stylesheet files
  2. Download a customised Javascript package. It also contains a lot of stylesheets to select from.

Note: if you are downloading, you get to selected the supported languages and your visitors will have better privacy.

If you choose to download and host your own copy, select the languages to support and click Download. Extract in the highlight directory contain in the package under wherever your static_dir is (defined in web.toml).

Optionally delete any files that shouldn't be served by your host, only highlight.pack.js and your preferred stylesheets under styles/ are needed.

Configure

Normally only the notes themselves contain code elements, so this example only enables code highlighting in notes. Edit share/html_templates/note.mustache to enable code highlighting in your article pages. Either at the very top, or very bottom, paste the snippet for including the script and stylesheet, and the function call.

If you are hosting your own files, the snippet should look like:

<link rel="stylesheet" href="/static/highlight/styles/default.css">
<script src="/static/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Otherwise, if you are using the hosted one, the snippet should look like:

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

But using the latest version numbers.