Auto merge of #3878 - Turbo87:highlight-js, r=hi-rustin

bors · bors · commit f8ab73183465 · 2021-09-04T03:46:32.000Z
Replace `ember-prism` with `highlight.js` [highlight.js](https://highlightjs.org) is easier to integrate with the app (via ember-auto-import) and doesn't require us to use any global variables or an ember-addon at all. The remaining two `<pre>` usages got a `.terminal` CSS class in this commit to avoid styling conflicts.
diff --git a/app/components/rendered-html.module.css b/app/components/rendered-html.module.css
@@ -15,13 +15,23 @@
     }
 
     pre {
-        overflow-x: auto;
+        code {
+            display: block;
+            overflow-x: auto;
+            padding: 1em;
+            background-color: #f6f8fa;
+            font-size: 85%;
+            border-radius: 6px;
+        }
     }
 
     p {
         code {
-            background-color: #fff;
-            padding: 0 2px;
+            background-color: #f6f8fa;
+            border-radius: 6px;
+            font-size: 85%;
+            margin: 0;
+            padding: .2em .4em;
         }
     }
 
diff --git a/app/components/settings/api-tokens.hbs b/app/components/settings/api-tokens.hbs
@@ -97,7 +97,7 @@
           its value again. For use on the command line you can save it to <code>~/.cargo/credentials</code>
           with:
 
-          <pre>cargo login {{token.token}}</pre>
+          <pre class="terminal">cargo login {{token.token}}</pre>
         </div>
       </div>
     {{/if}}
diff --git a/app/modifiers/highlight-syntax.js b/app/modifiers/highlight-syntax.js
@@ -1,16 +1,55 @@
-/* global Prism */
 import { modifier } from 'ember-modifier';
+import hljs from 'highlight.js/lib/core';
+import 'highlight.js/styles/github.css';
+import bash from 'highlight.js/lib/languages/bash';
+import c from 'highlight.js/lib/languages/c';
+import cpp from 'highlight.js/lib/languages/cpp';
+import csharp from 'highlight.js/lib/languages/csharp';
+import glsl from 'highlight.js/lib/languages/glsl';
+import go from 'highlight.js/lib/languages/go';
+import ini from 'highlight.js/lib/languages/ini';
+import javascript from 'highlight.js/lib/languages/javascript';
+import json from 'highlight.js/lib/languages/json';
+import protobuf from 'highlight.js/lib/languages/protobuf';
+import ruby from 'highlight.js/lib/languages/ruby';
+import rust from 'highlight.js/lib/languages/rust';
+import scss from 'highlight.js/lib/languages/scss';
+import sql from 'highlight.js/lib/languages/sql';
+import xml from 'highlight.js/lib/languages/xml';
+import yaml from 'highlight.js/lib/languages/yaml';
 
-Prism.plugins.NormalizeWhitespace.setDefaults({
-  'left-trim': false,
-  'right-trim': true,
-  'remove-initial-line-feed': true,
-});
+hljs.registerLanguage('bash', bash);
+hljs.registerLanguage('c', c);
+hljs.registerLanguage('cpp', cpp);
+hljs.registerLanguage('csharp', csharp);
+hljs.registerLanguage('glsl', glsl);
+hljs.registerLanguage('go', go);
+hljs.registerLanguage('ini', ini);
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('protobuf', protobuf);
+hljs.registerLanguage('ruby', ruby);
+hljs.registerLanguage('rust', rust);
+hljs.registerLanguage('scss', scss);
+hljs.registerLanguage('sql', sql);
+hljs.registerLanguage('xml', xml);
+hljs.registerLanguage('yaml', yaml);
+
+// these aliases are registered for compatibility with the Prism.js language names
+// that we used before.
+hljs.registerAliases('clike', { languageName: 'c' });
+hljs.registerAliases('markup', { languageName: 'xml' });
 
 export default modifier((element, _, { selector }) => {
   let elements = selector ? element.querySelectorAll(selector) : [element];
 
   for (let element of elements) {
-    Prism.highlightElement(element);
+    // if the code block has no allowed language tag we use `no-highlight` to avoid highlighting
+    let hasLanguageClass = [...element.classList].some(it => /^language-.+/.test(it));
+    if (!hasLanguageClass) {
+      element.classList.add('no-highlight');
+    }
+
+    hljs.highlightElement(element);
   }
 });
diff --git a/app/styles/application.module.css b/app/styles/application.module.css
@@ -65,7 +65,7 @@ a {
     }
 }
 
-pre {
+pre:global(.terminal) {
     background: var(--main-color);
     color: white;
     padding: 20px;
diff --git a/app/templates/error.hbs b/app/templates/error.hbs
@@ -1,5 +1,5 @@
 <h1>Something Went Wrong!</h1>
 <h5 data-test-error-message>{{this.model.message}}</h5>
-<pre>
+<pre class="terminal">
   {{this.model.stack}}
 </pre>
diff --git a/ember-cli-build.js b/ember-cli-build.js
@@ -8,25 +8,6 @@ module.exports = function (defaults) {
   let env = EmberApp.env();
   let isProd = env === 'production';
 
-  const highlightedLanguages = [
-    'bash',
-    'c',
-    'clike',
-    'glsl',
-    'go',
-    'ini',
-    'javascript',
-    'json',
-    'markup',
-    'protobuf',
-    'ruby',
-    'rust',
-    'scss',
-    'sql',
-    'toml',
-    'yaml',
-  ];
-
   let app = new EmberApp(defaults, {
     autoImport: {
       webpack: {
@@ -43,10 +24,6 @@ module.exports = function (defaults) {
     'ember-fetch': {
       preferNative: true,
     },
-    'ember-prism': {
-      theme: 'twilight',
-      components: highlightedLanguages,
-    },
 
     cssModules: {
       extension: 'module.css',
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "copy-text-to-clipboard": "3.0.1",
     "date-fns": "2.23.0",
     "fastboot-app-server": "3.0.0",
+    "highlight.js": "11.2.0",
     "morgan": "1.10.0",
     "pretty-bytes": "5.6.0",
     "semver": "7.3.5",
@@ -94,7 +95,6 @@
     "ember-load-initializers": "2.1.2",
     "ember-modifier": "2.1.2",
     "ember-page-title": "6.2.2",
-    "ember-prism": "0.9.1",
     "ember-qunit": "5.1.4",
     "ember-resolver": "8.0.2",
     "ember-router-scroll": "4.1.1",
diff --git a/tests/modifiers/highlight-syntax-test.js b/tests/modifiers/highlight-syntax-test.js
@@ -15,8 +15,9 @@ module('Modifier | highlight-syntax', function (hooks) {
 extern crate bitflags;
       </pre>
     `);
-    assert.dom('.token').exists();
-    assert.dom('.keyword').exists({ count: 2 });
+
+    assert.dom('.hljs-meta').exists();
+    assert.dom('.hljs-keyword').exists({ count: 2 });
   });
 
   test('accepts a `selector` argument', async function (assert) {
@@ -32,8 +33,8 @@ extern crate bitflags;
         </pre>
       </div>
     `);
-    assert.dom('.a .token').doesNotExist();
-    assert.dom('.b .token').exists();
-    assert.dom('.b .keyword').exists({ count: 2 });
+    assert.dom('.a .hljs-meta').doesNotExist();
+    assert.dom('.b .hljs-meta').exists();
+    assert.dom('.b .hljs-keyword').exists({ count: 2 });
   });
 });
diff --git a/yarn.lock b/yarn.lock
@@ -1150,7 +1150,7 @@
     ember-cli-babel "^7.22.1"
     ember-compatibility-helpers "^1.1.1"
 
-"@ember/render-modifiers@1.0.2", "@ember/render-modifiers@^1.0.2":
+"@ember/render-modifiers@1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@ember/render-modifiers/-/render-modifiers-1.0.2.tgz#2e87c48db49d922ce4850d707215caaac60d8444"
   integrity sha512-6tEnHl5+62NTSAG2mwhGMFPhUrJQjoVqV+slsn+rlTknm2Zik+iwxBQEbwaiQOU1FUYxkS8RWcieovRNMR8inQ==
@@ -4295,26 +4295,6 @@ broccoli-funnel-reducer@^1.0.0:
   resolved "https://registry.yarnpkg.com/broccoli-funnel-reducer/-/broccoli-funnel-reducer-1.0.0.tgz#11365b2a785aec9b17972a36df87eef24c5cc0ea"
   integrity sha1-ETZbKnha7JsXlyo234fu8kxcwOo=
 
-broccoli-funnel@^1.0.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/broccoli-funnel/-/broccoli-funnel-1.2.0.tgz#cddc3afc5ff1685a8023488fff74ce6fb5a51296"
-  integrity sha1-zdw6/F/xaFqAI0iP/3TOb7WlEpY=
-  dependencies:
-    array-equal "^1.0.0"
-    blank-object "^1.0.1"
-    broccoli-plugin "^1.3.0"
-    debug "^2.2.0"
-    exists-sync "0.0.4"
-    fast-ordered-set "^1.0.0"
-    fs-tree-diff "^0.5.3"
-    heimdalljs "^0.2.0"
-    minimatch "^3.0.0"
-    mkdirp "^0.5.0"
-    path-posix "^1.0.0"
-    rimraf "^2.4.3"
-    symlink-or-copy "^1.0.0"
-    walk-sync "^0.3.1"
-
 broccoli-funnel@^2.0.0, broccoli-funnel@^2.0.1, broccoli-funnel@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/broccoli-funnel/-/broccoli-funnel-2.0.2.tgz#0edf629569bc10bd02cc525f74b9a38e71366a75"
@@ -4363,20 +4343,6 @@ broccoli-kitchen-sink-helpers@^0.3.1:
     glob "^5.0.10"
     mkdirp "^0.5.1"
 
-broccoli-merge-trees@^1.1.1:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/broccoli-merge-trees/-/broccoli-merge-trees-1.2.4.tgz#a001519bb5067f06589d91afa2942445a2d0fdb5"
-  integrity sha1-oAFRm7UGfwZYnZGvopQkRaLQ/bU=
-  dependencies:
-    broccoli-plugin "^1.3.0"
-    can-symlink "^1.0.0"
-    fast-ordered-set "^1.0.2"
-    fs-tree-diff "^0.5.4"
-    heimdalljs "^0.2.1"
-    heimdalljs-logger "^0.1.7"
-    rimraf "^2.4.3"
-    symlink-or-copy "^1.0.0"
-
 broccoli-merge-trees@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/broccoli-merge-trees/-/broccoli-merge-trees-2.0.1.tgz#14d4b7fc1a90318c12b16f843e6ba2693808100c"
@@ -6576,18 +6542,6 @@ ember-cli-mirage@2.2.0:
     lodash-es "^4.17.11"
     miragejs "^0.1.31"
 
-ember-cli-node-assets@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/ember-cli-node-assets/-/ember-cli-node-assets-0.2.2.tgz#d2d55626e7cc6619f882d7fe55751f9266022708"
-  integrity sha1-0tVWJufMZhn4gtf+VXUfkmYCJwg=
-  dependencies:
-    broccoli-funnel "^1.0.1"
-    broccoli-merge-trees "^1.1.1"
-    broccoli-source "^1.1.0"
-    debug "^2.2.0"
-    lodash "^4.5.1"
-    resolve "^1.1.7"
-
 ember-cli-normalize-entity-name@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/ember-cli-normalize-entity-name/-/ember-cli-normalize-entity-name-1.0.0.tgz#0b14f7bcbc599aa117b5fddc81e4fd03c4bad5b7"
@@ -7095,17 +7049,6 @@ ember-page-title@6.2.2:
   dependencies:
     ember-cli-babel "^7.23.1"
 
-ember-prism@0.9.1:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/ember-prism/-/ember-prism-0.9.1.tgz#0d8a993cfe86dc446212cd40fcaaef247c9ba0d6"
-  integrity sha512-zeCjlQVlaIiO2EAkS8JLHTXMPCopNEvZsFNuA8BiemXjGJs5rKcSv+UYr4jm4oS4ISTwyUORmP4oLPkA3ZY+YA==
-  dependencies:
-    "@ember/render-modifiers" "^1.0.2"
-    ember-cli-babel "^7.22.1"
-    ember-cli-htmlbars "^5.3.1"
-    ember-cli-node-assets "^0.2.2"
-    prismjs "^1.22.0"
-
 ember-qunit@5.1.4:
   version "5.1.4"
   resolved "https://registry.yarnpkg.com/ember-qunit/-/ember-qunit-5.1.4.tgz#bc69f963a0f5409ce33bee1e4d8146b1407147bf"
@@ -7819,11 +7762,6 @@ execa@^5.0.0:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
-exists-sync@0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/exists-sync/-/exists-sync-0.0.4.tgz#9744c2c428cc03b01060db454d4b12f0ef3c8879"
-  integrity sha1-l0TCxCjMA7AQYNtFTUsS8O88iHk=
-
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -7985,7 +7923,7 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
-fast-ordered-set@^1.0.0, fast-ordered-set@^1.0.2:
+fast-ordered-set@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/fast-ordered-set/-/fast-ordered-set-1.0.3.tgz#3fbb36634f7be79e4f7edbdb4a357dee25d184eb"
   integrity sha1-P7s2Y097555PftvbSjV97iXRhOs=
@@ -9017,6 +8955,11 @@ heimdalljs@^0.3.0:
   dependencies:
     rsvp "~3.2.1"
 
+highlight.js@11.2.0:
+  version "11.2.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.2.0.tgz#a7e3b8c1fdc4f0538b93b2dc2ddd53a40c6ab0f0"
+  integrity sha512-JOySjtOEcyG8s4MLR2MNbLUyaXqUunmSnL2kdV/KuGJOmHZuAR5xC54Ko7goAXBWNhf09Vy3B+U7vR62UZ/0iw==
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -10483,7 +10426,7 @@ lodash.values@^4.3.0:
   resolved "https://registry.yarnpkg.com/lodash.values/-/lodash.values-4.3.0.tgz#a3a6c2b0ebecc5c2cba1c17e6e620fe81b53d347"
   integrity sha1-o6bCsOvsxcLLocF+bmIP6BtT00c=
 
-lodash@^4.17.10, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.5.1, lodash@^4.7.0:
+lodash@^4.17.10, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -12254,11 +12197,6 @@ printf@^0.6.1:
   resolved "https://registry.yarnpkg.com/printf/-/printf-0.6.1.tgz#b9afa3d3b55b7f2e8b1715272479fc756ed88650"
   integrity sha512-is0ctgGdPJ5951KulgfzvHGwJtZ5ck8l042vRkV6jrkpBzTmb/lueTqguWHy2JfVA+RY6gFVlaZgUS0j7S/dsw==
 
-prismjs@^1.22.0:
-  version "1.24.1"
-  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.24.1.tgz#c4d7895c4d6500289482fa8936d9cdd192684036"
-  integrity sha512-mNPsedLuk90RVJioIky8ANZEwYm5w9LcvCXrxHlwf4fNVSn8jEipMybMkWUyyF0JhnC+C4VcOVSBuHRKs1L5Ow==
-
 private@^0.1.6, private@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"

Original file line number	Diff line number	Diff line change
`@@ -15,13 +15,23 @@`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`pre {`
`18`		`- overflow-x: auto;`
	`18`	`+ code {`
	`19`	`+ display: block;`
	`20`	`+ overflow-x: auto;`
	`21`	`+ padding: 1em;`
	`22`	`+ background-color: #f6f8fa;`
	`23`	`+ font-size: 85%;`
	`24`	`+ border-radius: 6px;`
	`25`	`+ }`
`19`	`26`	`}`
`20`	`27`
`21`	`28`	`p {`
`22`	`29`	`code {`
`23`		`- background-color: #fff;`
`24`		`- padding: 0 2px;`
	`30`	`+ background-color: #f6f8fa;`
	`31`	`+ border-radius: 6px;`
	`32`	`+ font-size: 85%;`
	`33`	`+ margin: 0;`
	`34`	`+ padding: .2em .4em;`
`25`	`35`	`}`
`26`	`36`	`}`
`27`	`37`
Original file line number	Diff line number	Diff line change
`@@ -65,7 +65,7 @@ a {`
`65`	`65`	`}`
`66`	`66`	`}`
`67`	`67`
`68`		`-pre {`
	`68`	`+pre:global(.terminal) {`
`69`	`69`	`background: var(--main-color);`
`70`	`70`	`color: white;`
`71`	`71`	`padding: 20px;`