.eleventy.js

@@ -17,7 +17,7 @@ module.exports = {
 
     options = Object.assign(
       {
-        theme: "monokai",
+        theme: "onedark",
         lineNumbers: false,
         /* lineNumbersStyle: "table",*/ /* "table" or "inline" */
         //alwaysWrapLineHighlights: false,

.github/workflows/ci.yml

@@ -18,6 +18,6 @@ jobs:
           node-version: ${{ matrix.node }}
           # cache: npm
       - run: npm install
-      - run: npm demo
+      - run: npm test
 env:
   YARN_GPG: no

demo/eleventy-config.js

@@ -2,20 +2,12 @@ const syntaxHighlight = require("../.eleventy.js");
 
 module.exports = function (eleventyConfig) {
   eleventyConfig.addPlugin(syntaxHighlight, {
-    theme: "monokai",
+    // alwaysWrapLineHighlights: true
-    lineNumbers: false,
-
     lexerOverrides: {
       njk: "vue",
-      liquid: "vue",
+      liquid: "swift",
     },
-    preAttributes: {
+    preAttributes: { tabindex: 0 },
-      tabindex: 0,
-      testing: "ZX Spectrum Forever",
-      blargh: "Grrr Argh",
-      style: "border: purple 5px dashed",
-    },
-    codeAttributes: { test: "123" },
   });
 
   eleventyConfig.setTemplateFormats("njk,liquid,md,css");

demo/test-liquid.liquid

@@ -34,16 +34,6 @@ this is the last line
 `;
 {% endhighlight %}
 
-JS + Linehighlight with /
-{% highlight js/1,3 %}
-let multilineString = `
-this is the first line
-this is the middle line
-this is the last line
-`;
-{% endhighlight %}
-
-
     Swift + show lineNumbers
 
 {% highlight swift lineNumbers %}

demo/test-markdown.md

@@ -16,14 +16,6 @@ function myFunction() {
 }
 ```
 
-Text
-```text
-function myFunction() {
-  return true;
-}
-```
-
-
 Langs
 ```ts
 function myFunction() {

demo/test-nunjucks.njk

@@ -60,16 +60,6 @@ ${collections.post.map((post) => `<li>${ post.data.title }</li>`).join("\n")}
 };
 {% endhighlight %}
 
-Highlight lines 1 & 3
-{% highlight "js/1,3" %}
-module.exports = function({collections}) {
-  return `<ul>
-${collections.post.map((post) => `<li>${ post.data.title }</li>`).join("\n")}
-</ul>`;
-};
-{% endhighlight %}
-
-
 {% highlight "typescript" %}
 function myFunction() {
   return true;

package.json

@@ -9,9 +9,7 @@
   "scripts": {
     "test": "npx ava",
     "demo": "npx @11ty/eleventy --input=demo --output=demo/_site --config=demo/eleventy-config.js",
-    "start": "npx @11ty/eleventy --input=demo --output=demo/_site --config=demo/eleventy-config.js --serve",
+    "start": "npx @11ty/eleventy --input=demo --output=demo/_site --config=demo/eleventy-config.js --serve"
-    "debug": "DEBUG=Eleventy* npx @11ty/eleventy --input=demo --output=demo/_site --config=demo/eleventy-config.js",
-    "bench": "DEBUG=Eleventy:Benchmark* npx @11ty/eleventy --input=demo --output=demo/_site --config=demo/eleventy-config.js"
   },
   "repository": {
     "type": "git",
@@ -42,7 +40,6 @@
   },
   "dependencies": {
     "chroma-highlight": "^2.4.2",
-    "jsdom": "^21.1.0",
     "linkedom": "^0.14.19"
   },
   "ava": {
@@ -52,4 +49,4 @@
       "./test/*.js"
     ]
   }
-}
+}

src/LiquidHighlightTag.js

@@ -1,4 +1,7 @@
-const markdownChroma = require("./markdownSyntaxHighlightOptions");
+const HighlightPairedShortcode = require("./HighlightPairedShortcode");
+const Chroma = require("chroma-highlight");
+const parseSyntaxArguments = require("./parseSyntaxArguments");
+const getAttributes = require("./getAttributes");
 
 class LiquidHighlightTag {
   constructor(liquidEngine) {
@@ -6,8 +9,6 @@ class LiquidHighlightTag {
   }
 
   getObject(options = {}) {
-    let mc = markdownChroma(options);
-
     let ret = function (highlighter) {
       return {
         parse: function (tagToken, remainTokens) {
@@ -38,7 +39,9 @@ class LiquidHighlightTag {
           });
           let tokenStr = tokens.join("").trim();
 
-          return Promise.resolve(mc(tokenStr, this.args));
+          return Promise.resolve(
+            HighlightPairedShortcode(tokenStr, this.args, options)
+          );
         },
       };
     };

src/markdownSyntaxHighlightOptions.js

@@ -1,8 +1,5 @@
 const Chroma = require("chroma-highlight");
 const parseSyntaxArguments = require("./parseSyntaxArguments");
-// const getAttributes = require("./getAttributes");
-
-const jsdom = require("jsdom");
 
 module.exports = function (options = {}) {
   return function (str, args) {
@@ -13,49 +10,16 @@ module.exports = function (options = {}) {
 
     let html;
 
-    const parsedArgs = parseSyntaxArguments(args, options);
+    if (args === "text") {
+      html = str;
+    } else {
+      const parsedArgs = parseSyntaxArguments(args, options);
 
-    let opts = `--formatter html --html-only --html-inline-styles ${parsedArgs} `;
+      let opts = `--formatter html --html-only --html-inline-styles ${parsedArgs} `;
 
-    html = Chroma.highlight(str, opts);
+      html = Chroma.highlight(str, opts);
+    }
 
-    const dom = new jsdom.JSDOM(html);
+    return html;
-
-    addAttributesToHtmlElements(
-      dom.window.document.getElementsByTagName("pre"),
-      options.preAttributes
-    );
-
-    addAttributesToHtmlElements(
-      dom.window.document.getElementsByTagName("code"),
-      options.codeAttributes
-    );
-
-    return dom.window.document.body.innerHTML;
   };
 };
-
-function addAttributesToHtmlElements(elements, attributes) {
-  if (typeof attributes === "object") {
-    for (let index = 0; index < elements.length; index++) {
-      Object.entries(attributes).map((entry) => {
-        if (typeof elements[index] === "object") {
-          if (entry[0] === "style") {
-            // check if style already set
-            let style = elements[index].getAttribute("style");
-
-            if (style != null) {
-              elements[index].setAttribute(entry[0], style + entry[1]);
-            } else {
-              elements[index].setAttribute(entry[0], entry[1]);
-            }
-          } else {
-            elements[index].setAttribute(entry[0], entry[1]);
-          }
-        } else {
-          console.error("Can't set attribute on " + typeof elements[index]);
-        }
-      });
-    }
-  }
-}

src/parseSyntaxArguments.js

@@ -1,7 +1,56 @@
+// const { split } = require("liquidjs/dist/builtin/filters");
+const getAttributes = require("./getAttributes");
+
+function attributeEntryToString2(attribute, context) {
+  let [key, value] = attribute;
+
+  if (typeof value === "function") {
+    // Callback must return a string or a number
+    value = value(context); // Run the provided callback and store the result
+  }
+
+  if (typeof value !== "string" && typeof value !== "number") {
+    throw new Error(
+      `Attribute "${key}" must have, or evaluate to, a value of type string or number, not "${typeof value}".`
+    );
+  }
+
+  return `${key}="${value}"`;
+}
+
+/**
+ * ## Usage
+ * The function `getAttributes` is used to convert an object, `attributes`, with HTML attributes as keys and the values as the corresponding HTML attribute's values.
+ * If it is falsey, an empty string will be returned.
+ *
+ * ```js
+  getAttributes({
+    tabindex: 0,
+    'data-language': function (context) { return context.language; },
+    'data-otherStuff': 'value'
+  }) // => ' tabindex="0" data-language="JavaScript" data-otherStuff="value"'
+  ```
+ *
+ * @param {{[s: string]: string | number}} attributes An object with key-value pairs that represent attributes.
+ * @param {object} context An object with the current context.
+ * @param {string} context.content The code to parse and highlight.
+ * @param {string} context.language The language for the current instance.
+ * @param {object} context.options The options passed to the syntax highlighter.
+ * @returns {string} A string containing the above HTML attributes preceded by a single space.
+ */
 function parseSyntaxArguments(args, context = {}) {
+  // console.log(">>pSA");
+  // console.log(args);
+  // console.log(">>>>>> context");
+  // console.log(context);
+  const preAttributes = getAttributes(context.preAttributes);
+  const codeAttributes = getAttributes(context.codeAttributes);
+
   const lineNumbersRegex =
     /[0-9]{1,},[0-9]{1,}[:-][0-9]{1,}|[0-9]{1,},[0-9]{1,}|[0-9]{1,}/;
 
+  // console.log("<<pSA");
+
   let splitArgs;
 
   if (args.includes("/")) {
@@ -17,7 +66,7 @@ function parseSyntaxArguments(args, context = {}) {
   // Remove the lang from the arguments
   let lang = splitArgs.shift();
 
-  if (context.lexerOverrides && context.lexerOverrides[lang]) {
+  if (context.lexerOverrides[lang]) {
     lang = context.lexerOverrides[lang];
   }
 
@@ -34,15 +83,13 @@ function parseSyntaxArguments(args, context = {}) {
           // console.log("Replacing - with : " + arg);
         }
         opts = opts + `--html-highlight=${arg} `;
-      } else if (context["lineNumbers"] || args.includes("lineNumbers")) {
-        opts = opts + "--html-lines ";
-      } else if (
-        context["lineNumbersStyle"] == "table" ||
-        args.includes("table")
-      ) {
-        opts = opts + "--html-lines-table ";
       }
+
+      // console.log(arg);
     });
+    // for (arg in splitArgs) {
+    //   console.log(arg);
+    // }
   }
   if (context["theme"]) {
     opts = opts + `--style ${context["theme"]} `;
@@ -50,6 +97,14 @@ function parseSyntaxArguments(args, context = {}) {
     opts = opts + "--style xcode-dark ";
   }
 
+  if (context["lineNumbers"] || args.includes("lineNumbers")) {
+    opts = opts + "--html-lines ";
+  }
+
+  if (context["lineNumbersStyle"] == "table" || args.includes("table")) {
+    opts = opts + "--html-lines-table ";
+  }
+
   return opts;
 }