Use Prism

.babelrc

@@ -1,5 +1,12 @@
 {
-    "plugins": ["@loadable/babel-plugin"],
+    "plugins": [
+        "@loadable/babel-plugin",
+        ["prismjs", {
+            "languages": ["css", "html", "javascript", "jsx", "tsx"],
+            "theme": "twilight",
+            "css": true
+        }]
+    ],
     "presets": [
         "@babel/preset-env",
         "@babel/preset-react"

client/helpers/highlight.ts

@@ -3,19 +3,14 @@
  * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
  */
 
-import hljs from 'highlight.js/lib/highlight'; // tslint:disable-line
-import javascript from 'highlight.js/lib/languages/javascript'; // tslint:disable-line
-import html from 'highlight.js/lib/languages/xml'; // tslint:disable-line
-
-hljs.registerLanguage('javascript', javascript);
-hljs.registerLanguage('html', html);
+import Prism from 'prismjs';
 
 const highlight = (input: string, language: string) => {
     const lang = language || 'html';
-    const { value } = hljs.highlight(lang, input);
+    const value = Prism.highlight(input, Prism.languages[language], language);
     const highlighted = value.replace('&amp;', '&').trim();
 
-    return `<code class="${lang}">${highlighted}</code>`;
+    return `<code class="language-${lang}">${highlighted}</code>`;
 };
 
-export default highlight;
+export default highlight;

package.json

@@ -13,6 +13,7 @@
     "dependencies": {
         "@loadable/component": "^5.14.1",
         "highlight.js": "^10.7.1",
+        "prismjs": "^1.23.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-helmet": "^6.1.0",
@@ -24,11 +25,13 @@
         "@babel/preset-react": "^7.13.13",
         "@loadable/babel-plugin": "^5.13.2",
         "@types/loadable__component": "^5.13.3",
+        "@types/prismjs": "^1.16.4",
         "@types/react": "^17.0.3",
         "@types/react-dom": "^17.0.3",
         "@types/react-helmet": "^6.1.0",
         "@types/react-router-dom": "^5.1.7",
         "babel-loader": "^8.2.2",
+        "babel-plugin-prismjs": "^2.0.1",
         "cpx2": "^3.0.0",
         "css-loader": "^5.2.0",
         "html-webpack-plugin": "^5.3.1",