refactor(codeSample): upgrade to Highlight.js 11

- Upgrade to Highlight.js and change code accordingly
- Update to latest version of the Github styling for code highlighting
- Fix a regression from PR #116; a scroll bar should appear for long code

package.json

@@ -86,7 +86,7 @@
     "gulp-uglify-es": "^2.0.0",
     "gulp-util": "^3.0.8",
     "gulp-zip": "^5.0.1",
-    "highlight.js": "^9.18.1",
+    "highlight.js": "^11.2.0",
     "ignore": "^5.1.4",
     "js-beautify": "^1.10.3",
     "js-yaml": "^3.13.1",

tasks/docs/static/css/highlight.css

@@ -1,99 +1,125 @@
-/*
-
-github.com style (c) Vasily Polovnyov <vast@whiteants.net>
-
+/*!
+  Theme: GitHub
+  Description: Light theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-light
+  Current colors taken from GitHub's CSS
 */
 
 .hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  color: #333;
-  background: #f8f8f8;
+  color: #24292e;
+  background: #ffffff;
 }
 
-.hljs-comment,
-.hljs-quote {
-  color: #998;
-  font-style: italic;
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: #d73a49;
 }
 
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-subst {
-  color: #333;
-  font-weight: bold;
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  /* prettylights-syntax-entity */
+  color: #6f42c1;
 }
 
-.hljs-number,
+.hljs-attr,
+.hljs-attribute,
 .hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
 .hljs-variable,
-.hljs-template-variable,
-.hljs-tag .hljs-attr {
-  color: #008080;
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+  /* prettylights-syntax-constant */
+  color: #005cc5;
 }
 
+.hljs-regexp,
 .hljs-string,
-.hljs-doctag {
-  color: #d14;
+.hljs-meta .hljs-string {
+  /* prettylights-syntax-string */
+  color: #032f62;
 }
 
-.hljs-title,
-.hljs-section,
-.hljs-selector-id {
-  color: #900;
-  font-weight: bold;
+.hljs-built_in,
+.hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #e36209;
 }
 
-.hljs-subst {
-  font-weight: normal;
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+  /* prettylights-syntax-comment */
+  color: #6a737d;
 }
 
-.hljs-type,
-.hljs-class .hljs-title {
-  color: #458;
-  font-weight: bold;
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #22863a;
 }
 
-.hljs-tag,
-.hljs-name,
-.hljs-attribute {
-  color: #000080;
-  font-weight: normal;
+.hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #24292e;
 }
 
-.hljs-regexp,
-.hljs-link {
-  color: #009926;
+.hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #005cc5;
+  font-weight: bold;
 }
 
-.hljs-symbol,
 .hljs-bullet {
-  color: #990073;
+  /* prettylights-syntax-markup-list */
+  color: #735c0f;
 }
 
-.hljs-built_in,
-.hljs-builtin-name {
-  color: #0086b3;
+.hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #24292e;
+  font-style: italic;
 }
 
-.hljs-meta {
-  color: #999;
+.hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #24292e;
   font-weight: bold;
 }
 
-.hljs-deletion {
-  background: #fdd;
-}
-
 .hljs-addition {
-  background: #dfd;
+  /* prettylights-syntax-markup-inserted */
+  color: #22863a;
+  background-color: #f0fff4;
 }
 
-.hljs-emphasis {
-  font-style: italic;
-}
-
-.hljs-strong {
-  font-weight: bold;
+.hljs-deletion {
+  /* prettylights-syntax-markup-deleted */
+  color: #b31d28;
+  background-color: #ffeef0;
+}
+
+.hljs-char.escape_,
+.hljs-link,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+  /* purposely ignored */
 }

tasks/docs/static/css/style.css

@@ -79,6 +79,7 @@ pre {
   display: block;
   padding: 1em;
   margin: 1em 0;
+  overflow: auto;
   word-break: break-all;
   word-wrap: break-word;
   border: 1px solid #ccc;

tasks/util/docHelpers.js

@@ -71,7 +71,7 @@ class docsHelpers {
         }),
         config.docs.codeBeautifier
       )
-      sample = hljs.highlight('html', sample).value
+      sample = hljs.highlight(sample, { language: 'html' }).value
     } catch (error) {
       global.console.log(error)
     }