Fix and improve highlighting with highlight.js

src/css/doc.css

@@ -465,9 +465,11 @@
   display: flex;
   visibility: hidden;
   position: absolute;
-  top: 0.25rem;
+  /* move things up for more distance, original top: 0.25rem; */
+  top: -0.5rem;
   right: 0.5rem;
-  color: var(--pre-annotation-font-color);
+  /* same color as in css/highlight.css hljs-built_in */
+  color: #0086b3;
   font-family: var(--body-font-family);
   font-size: calc(13.5 / var(--rem-base) * 1rem);
   line-height: 1;
@@ -551,6 +553,13 @@
   transition: none;
 }
 
+/* When using language console, a bash prompt (like > or $ or % or # or [test@ubuntu ~]$ ect.)
+ * will activate the meta css tag which prevents that the prompt being copied and pasted manually in the 
+ * browser. This is also true for up to 3 leading blanks at the beginning and then a prompt symbol!
+ * Rule: if the text to highlight starts with a bash prompt, choose shell (or console),
+ * otherwise choose bash. If you use console but the line does not start with a bash prompt,
+ * highlighting will not work. Therefore check the language used carefully.
+*/
 .doc .language-console .hljs-meta {
   user-select: none;
 }

src/css/highlight.css

@@ -1,4 +1,5 @@
 /*! GitHub style for highlight.js (c) Vasily Polovnyov <vast@whiteants.net> */
+
 /*
 .hljs {
   display: block;

src/js/vendor/highlight.js

@@ -1,6 +1,11 @@
 ;(function () {
   'use strict'
 
+// the following are additional keywords to be highlighted, particulary when using bash
+const CUSTOM_KEYWORDS = ['occ', 'apt', 'apt-get', 'systemctl', 'service', 'sudo',
+'dpkg', 'wget', 'tar', 'mysql', 'php', 'grep', 'pecl', 'pear', 'make', 
+'phpenmod', 'phpdismod', 'a2enmod', 'a2dismod', 'a2ensite', 'a2dissite'];
+
 var hljs = (window.hljs = require('highlight.js/lib/core'))
   hljs.registerLanguage('apache', require('highlight.js/lib/languages/apache'))
   hljs.registerLanguage('asciidoc', require('highlight.js/lib/languages/asciidoc'))
@@ -38,6 +43,21 @@ var hljs = (window.hljs = require('highlight.js/lib/core'))
   hljs.registerLanguage('swift', require('highlight.js/lib/languages/swift'))
   hljs.registerLanguage('xml', require('highlight.js/lib/languages/xml'))
   hljs.registerLanguage('yaml', require('highlight.js/lib/languages/yaml'))
+
+/* Add the additional keywords to the bash language
+ * References: https://github.com/highlightjs/highlight.js/wiki/Adding-keywords-to-a-language-at-runtime
+ * Layout used and defined in highlight.css at .hljs-built_in
+*/
+  hljs.getLanguage('bash').keywords.built_in.push(...CUSTOM_KEYWORDS);
+  // console.log(hljs.getLanguage('bash').keywords);
+
+/* To eliminate the security messages in the browser telling:
+ * "One of your code blocks includes unescaped HTML. This is a potentially serious security risk"
+ * See: https://github.com/highlightjs/highlight.js/wiki/security
+ * A hljs command has been added in partials/footer-scripts.hbs
+ * hljs.configure({ ignoreUnescapedHTML: true })
+ * This is not a security issue for us as we have a static site
+*/
   ;[].slice.call(document.querySelectorAll('pre code.hljs')).forEach(function (node) {
     hljs.highlightElement(node)
   })

src/partials/footer-scripts.hbs

@@ -4,3 +4,4 @@
 {{/if}}
 <script src="{{uiRootPath}}/js/vendor/highlight.js"></script>
 <script>hljs.highlightAll()</script>
+<script>hljs.configure({ ignoreUnescapedHTML: true })</script>