Switch from highlight.js to prism

rundsk · Oct 15, 2021 · ccfbc33 · ccfbc33
1 parent 55f6d6e
commit ccfbc33
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 38 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -9,8 +9,8 @@
     "@rundsk/js-sdk": "rundsk/js-sdk#user-components",
     "filesize": "^4.1.2",
     "get-contrast": "^2.0.0",
-    "highlight.js": "^10.4.1",
     "jest": "^27.2.4",
+    "prismjs": "^1.25.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^5.2.1",

diff --git a/frontend/src/DocumentationComponents/CodeBlock/CodeBlock.jsx b/frontend/src/DocumentationComponents/CodeBlock/CodeBlock.jsx
@@ -10,33 +10,23 @@ import React, { useState, useEffect } from 'react';
 
 import { Client } from '@rundsk/js-sdk';
 
-import hljs from 'highlight.js/lib/core';
-import bash from 'highlight.js/lib/languages/bash';
-import css from 'highlight.js/lib/languages/css';
-import dockerfile from 'highlight.js/lib/languages/dockerfile';
-import go from 'highlight.js/lib/languages/go';
-import javascript from 'highlight.js/lib/languages/javascript';
-import markdown from 'highlight.js/lib/languages/markdown';
-import nginx from 'highlight.js/lib/languages/nginx';
-import php from 'highlight.js/lib/languages/php';
-import scss from 'highlight.js/lib/languages/scss';
-import xml from 'highlight.js/lib/languages/xml';
+import Prism from 'prismjs';
 
 import { copyTextToClipboard } from '../../utils';
 
 import './atelier-forest-light.css';
 import './CodeBlock.css';
-
-hljs.registerLanguage('bash', bash);
-hljs.registerLanguage('css', css);
-hljs.registerLanguage('dockerfile', dockerfile);
-hljs.registerLanguage('go', go);
-hljs.registerLanguage('javascript', javascript);
-hljs.registerLanguage('markdown', markdown);
-hljs.registerLanguage('nginx', nginx);
-hljs.registerLanguage('php', php);
-hljs.registerLanguage('scss', scss);
-hljs.registerLanguage('xml', xml);
+import 'prismjs/themes/prism.css';
+
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-docker';
+import 'prismjs/components/prism-go';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-markdown';
+// import 'prismjs/components/prism-php';
+import 'prismjs/components/prism-scss';
 
 // This components receives a literal string with HTML escaped content as its
 // children. Independent if indirectly used with <pre> tags (coming from fenced
@@ -84,17 +74,13 @@ function CodeBlock({ title, src, language, children, ...props }) {
       }
       content = trimInitialLine(content);
 
-      setCode(<code className="code-block__code-content" dangerouslySetInnerHTML={{ __html: content }} />);
+      setCode(<code className={`code-block__code-content ${language ? `language-${language}`: ''}`} dangerouslySetInnerHTML={{ __html: content }} />);
     }
-  }, [src, children]);
+  }, [src, children, language]);
 
   useEffect(() => {
     if (language && codeRef.current) {
-      const nodes = codeRef.current.querySelectorAll('code');
-
-      for (let i = 0; i < nodes.length; i++) {
-        hljs.highlightElement(nodes[i]);
-      }
+      Prism.highlightAllUnder(codeRef.current)
     }
   }, [code, language, codeRef]);
 

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -2488,11 +2488,11 @@ __metadata:
     eslint-plugin-react-hooks: ^4.2.0
     filesize: ^4.1.2
     get-contrast: ^2.0.0
-    highlight.js: ^10.4.1
     http-proxy-middleware: ^0.19.1
     jest: ^27.2.4
     jest-enzyme: ^7.1.0
     prettier: ^2.4.1
+    prismjs: ^1.25.0
     react: ^17.0.2
     react-dom: ^17.0.2
     react-helmet: ^5.2.1
@@ -8375,13 +8375,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"highlight.js@npm:^10.4.1":
-  version: 10.7.3
-  resolution: "highlight.js@npm:10.7.3"
-  checksum: defeafcd546b535d710d8efb8e650af9e3b369ef53e28c3dc7893eacfe263200bba4c5fcf43524ae66d5c0c296b1af0870523ceae3e3104d24b7abf6374a4fea
-  languageName: node
-  linkType: hard
-
 "history@npm:^4.9.0":
   version: 4.10.1
   resolution: "history@npm:4.10.1"
@@ -13844,6 +13837,13 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"prismjs@npm:^1.25.0":
+  version: 1.25.0
+  resolution: "prismjs@npm:1.25.0"
+  checksum: 04d8eae9d1b26b76c350bc65621584c8f8cab80ace7da3953f8aef2f9a8dd4b4f71c1d15bc5c67f126ddc90cd5af613919dc1340589a6c57355bed86fa3ac010
+  languageName: node
+  linkType: hard
+
 "process-nextick-args@npm:~2.0.0":
   version: 2.0.1
   resolution: "process-nextick-args@npm:2.0.1"