pat-syntax-highlight: Switch to Prism syntax highlighting.

thet · thet · commit b8ecca487c6c · 2022-10-11T07:11:33.000+02:00
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
         "moment-timezone": "^0.5.37",
         "photoswipe": "^4.1.3",
         "pikaday": "^1.8.0",
+        "prismjs": "^1.29.0",
         "promise-polyfill": "^8.2.3",
         "screenfull": "^6.0.2",
         "select2": "^3.5.1",
diff --git a/src/pat/syntax-highlight/index.html b/src/pat/syntax-highlight/index.html
@@ -1,23 +1,56 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>pat-syntax-highlight demo page</title>
-        <meta charset="utf-8">
-        <link rel="stylesheet" href="/style/common.css" />
-        <script src="/bundle.min.js"></script>
-    </head>
-    <body>
-        <h2>Sample output:</h2>
-        <pre class="pat-syntax-highlight light-bg">
-var pattern = registry.patterns[name];
+  <head>
+    <title>pat-syntax-highlight demo page</title>
+    <meta charset="utf-8" />
+    <link href="/style/common.css"
+          rel="stylesheet"
+    />
+    <script src="/bundle.min.js"></script>
+  </head>
+  <body>
+    <h2>Syntax highlight for JavaScript</h2>
+    <pre class="pat-syntax-highlight">
+      <code class="language-javascript">
+const pattern = registry.patterns[name];
 if (pattern.transform) {
     try {
         pattern.transform($content);
     } catch (e) {
-        if (dont_catch) { throw(e); }
+        if (dont_catch) {
+          throw(e);
+        }
         log.error("Transform error for pattern" + name, e);
     }
-    </pre
-        >
-    </body>
+}
+      </code>
+    </pre>
+
+    <h2>Syntax highlight for HTML</h2>
+    <pre class="pat-syntax-highlight">
+      <code class="language-html">
+&lt;h1&gt;hello&lt;/h1&gt;
+      </code>
+    </pre>
+
+    <h2>Syntax highlight for JavaScript with line-numbers</h2>
+    <pre class="pat-syntax-highlight"
+         data-pat-syntax-highlight="features: line-numbers, line-highlight"
+         data-line="1-2, 4"
+    >
+      <code class="language-javascript">
+const pattern = registry.patterns[name];
+if (pattern.transform) {
+    try {
+        pattern.transform($content);
+    } catch (e) {
+        if (dont_catch) {
+          throw(e);
+        }
+        log.error("Transform error for pattern" + name, e);
+    }
+}
+      </code>
+    </pre>
+  </body>
 </html>
diff --git a/src/pat/syntax-highlight/syntax-highlight.js b/src/pat/syntax-highlight/syntax-highlight.js
@@ -1,13 +1,62 @@
 import Base from "../../core/base";
-import utils from "../../core/utils";
+import Parser from "../../core/parser";
+
+export const parser = new Parser("syntax-highlight");
+parser.addArgument("language", "html");
+parser.addArgument("theme", "dark", ["dark", "light"]);
+parser.addArgument("features", null, ["line-highlight", "line-numbers"], true);
 
 export default Base.extend({
     name: "syntax-highlight",
     trigger: ".pat-syntax-highlight",
 
     async init() {
-        const Prettify = (await import("google-code-prettify/src/prettify")).default; // prettier-ignore
-        this.$el.addClass("prettyprint");
-        utils.debounce(Prettify.prettyPrint, 50)();
+        this.options = parser.parse(this.el, this.options);
+
+        let theme;
+        if (this.options.theme === "light") {
+            theme = "";
+        } else if (this.options.theme === "dark") {
+            theme = "okaidia";
+        } else {
+            theme = this.options.theme;
+        }
+
+        import(`prismjs/themes/prism${theme ? "-" + theme : ""}.css`);
+        const Prism = (await import("prismjs")).default;
+
+        if (this.options.features.includes("line-highlight")) {
+            import("prismjs/plugins/line-highlight/prism-line-highlight.css");
+            await import("prismjs/plugins/line-highlight/prism-line-highlight.js");
+        }
+
+        if (this.options.features.includes("line-numbers")) {
+            import("prismjs/plugins/line-numbers/prism-line-numbers.css");
+            await import("prismjs/plugins/line-numbers/prism-line-numbers.js");
+            this.el.classList.add("line-numbers");
+        }
+
+        Prism.manual = true;
+
+        let _el = this.el;
+        const code_el = [...this.el.children].filter((it) => it.tagName === "CODE")?.[0];
+        if (code_el) {
+            _el = code_el;
+        }
+
+        // Get the language
+        let language = [..._el.classList, ...this.el.classList]
+            .filter((it) => {
+                return it.startsWith("language-") || it.startsWith("lang-");
+            })?.[0]
+            ?.replace("language-", "")
+            ?.replace("lang-", "");
+        // CSS class language always win.
+        language = language || this.options.language || "html";
+        // Set the language on the code element (ignored if already set)
+        this.el.classList.add(`language-${language}`);
+        _el.classList.add(`language-${language}`);
+
+        Prism.highlightElement(_el);
     },
 });
