Added support for tabWidth and highlightStyle

Also updated readme and removed some defaults from .eleventy.js. Simplified HighlightPairedShortcode to just mardownSyntaxHighlightOptions (should probably rename file). Finally updated package.json

.eleventy.js

@@ -18,15 +18,11 @@ module.exports = {
     options = Object.assign(
       {
         theme: "monokai",
-        lineNumbers: false,
+        // lineNumbers: false,
+        // highlightStyle: "bg:#293", /* any valid css */
         /* lineNumbersStyle: "table",*/ /* "table" or "inline" */
-        //alwaysWrapLineHighlights: false,
-        // eligible to change the default to \n in a new major version.
-        //lineSeparator: "<br>",
         preAttributes: {},
-        codeAttributes: {
+        codeAttributes: {},
-          theme: "onedark",
-        },
       },
       options
     );

README.md

@@ -4,7 +4,7 @@
 
 A module for handling syntax highlighting in [Eleventy](https://github.com/11ty/eleventy) using [Chroma](https://github.com/alecthomas/chroma); a syntax highlighter written in Go. There is no browser/client JavaScript required, the highlight transformations are all done at build-time.
 
-I am making using of the [chroma-highlight](https://github.com/krymel/chroma-highlight) NPM package to include `Chroma` support. (It handles downloading the required binary for the platform you are working on).
+I am making using of the [chroma-highlight](https://github.com/krymel/chroma-highlight) NPM package to include EX`Chroma` support. (It handles downloading the required binary for the platform you are working on).
 
 This module/plugin used the 11ty plugin [eleventy-plugin-syntaxhighlight](https://github.com/11ty/eleventy-plugin-syntaxhighlight) as its basis.
 
@@ -36,6 +36,7 @@ For `liquid` and `njk` you can use either `\` or spaces (` `) to separate the ar
 - `lineNumbersStyle` if `table` is used, then code block will use a table to make it easier to drag and select the code. i.e `lineNumberStyle=table`
 - `lineNumbersStart` the number to start the line number count from. i.e `lineNumbersStart=200`
 - number **or** number,number **or** number:number **or** number,rangeStartNumber:rangeEndNumber **or** number,rangeStartNumber-rangeEndNumber to specify a line or lines to highlight. i.e `1`, `1,3`, `3:6`, or `1,3:6`, or `2,4-6`. **NOTE** if you use `lineNumbersStart` then the specified numbers must be relative to that (so `lineNumbersStart=200`, then use `204` to highlight line 204)
+- `tabWidth` the number of spaces to replace tabs with, default is 8. Overrides value in eleventy config if set.
 
 
 ## Supported `options` in eleventy config
@@ -48,6 +49,8 @@ Example of `options` object
 eleventyConfig.addPlugin(syntaxHighlight, {
     theme: "monokai",
     lineNumbers: false,
+    highlightStyle: "bg:#943011",
+    tabWidth: 12,
 
     lexerOverrides: {
       njk: "vue",
@@ -68,14 +71,18 @@ Theme can be set to one of these [themes](https://xyproto.github.io/splash/docs/
 - `lineNumbers` will add line numbers starting from 1 for each code block.
 - `lineNumbersStyle` if `table` is used, then code block will use a table to make it easier to drag and select the code.
 - `lexerOverrides` a key value pair, for instance `liquid: "vue"` will mean that when the code comes across the language `liquid` it will use the `vue` lexer instead. Useful for rendering code blocks that `Chroma` doesn't support out of the box.
+- `tabWidth` the number of spaces to replace tabs with, default used by library is 8.
+- `highlightStyle` allows you to override the theme's highlight color with one you specify. `highlightStyle` takes a string in the form of `bg:#XXXXXX` where `xxxxxx` is a either a 3 or 6 digit color code eg `bg:#943011`
 
 ## TO DO
 
 - [✅] Support `.liquid` files
 - [✅] Add passed in `code` and `pre` atributes into returned html from chroma
+- [✅] Add other arguments that chroma can take (`--html-tab-width`, `--html-highlight-style`)
 - [] Add testing
 - [] Add improve regex for line numbers
-- [] Add other arguments that chroma can take (`--html-tab-width`, `--html-highlight-style`, maybe `--html-linkable-lines`)
+- [] Add `--html-linkable-lines`
+- [] Investigate if possible to use a bridge to call the Go Library directly from JavaScript rather than using the libary binary.
 
 ## Example output
 

demo/eleventy-config.js

@@ -4,6 +4,8 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPlugin(syntaxHighlight, {
     theme: "monokai",
     lineNumbers: false,
+    highlightStyle: "bg:#943011" /* a background color */,
+    tabWidth: 4,
 
     lexerOverrides: {
       njk: "vue",

demo/test-markdown.md

@@ -61,6 +61,16 @@ let multilineString = `
 `;
 ```
 
+TabWidth 32
+```js/tabWidth=32
+let multilineString = `
+	this line has a tab
+  this line has two spaces
+
+`;
+```
+
+
 Highlight 1 & 3
 ```js/1,3
 let multilineString = `

package.json

@@ -15,11 +15,13 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/11ty/eleventy-plugin-syntaxhighlight.git"
+    "url": "https://github.com/tarasis/eleventy-plugin-syntaxhighlighting-chroma.git"
   },
   "keywords": [
     "eleventy",
-    "eleventy-plugin"
+    "eleventy-plugin",
+    "syntax-highlighting",
+    "chroma"
   ],
   "author": {
     "name": "Robert McGovern",

src/HighlightPairedShortcode.js

@@ -1,5 +1,4 @@
-const Chroma = require("chroma-highlight");
+const markdownChroma = require("./markdownSyntaxHighlightOptions");
-const parseSyntaxArguments = require("./parseSyntaxArguments");
 
 module.exports = function (content, args, options = {}) {
   // No args, so don't know language, drop out
@@ -7,21 +6,10 @@ module.exports = function (content, args, options = {}) {
     return content;
   }
 
-  let highlightedContent;
-
   if (options.trim === undefined || options.trim === true) {
     content = content.trim();
   }
 
-  if (args === "text") {
+  let mc = markdownChroma(options);
-    highlightedContent = content;
+  return mc(content, args);
-  } else {
-    const parsedArgs = parseSyntaxArguments(args, options);
-
-    let opts = `--formatter html --html-only --html-inline-styles ${parsedArgs} `;
-
-    highlightedContent = Chroma.highlight(content, opts);
-  }
-
-  return highlightedContent;
 };

src/parseSyntaxArguments.js

@@ -14,6 +14,28 @@ function parseSyntaxArguments(args, context = {}) {
 
   let opts = "";
 
+  // Context settings first, then if can be overriden by code block args
+  if (context["lineNumbers"]) {
+    opts += "--html-lines ";
+  }
+  if (context["lineNumbersStyle"] == "table") {
+    opts += "--html-lines-table ";
+  }
+
+  if (context["theme"]) {
+    opts += `--style ${context["theme"]} `;
+  } else {
+    opts += "--style xcode-dark ";
+  }
+
+  if (context["highlightStyle"]) {
+    opts += `--html-highlight-style=${context["highlightStyle"]} `;
+  }
+
+  if (context["tabWidth"]) {
+    opts += `--html-tab-width=${context["tabWidth"]} `;
+  }
+
   // Remove the lang from the arguments
   let lang = splitArgs.shift();
 
@@ -26,29 +48,23 @@ function parseSyntaxArguments(args, context = {}) {
   if (Array.isArray(splitArgs)) {
     splitArgs.forEach((arg) => {
       if (arg.includes("lineNumbersStart")) {
-        opts = opts + `--html-base-line=${arg.split("=")[1]} `;
+        opts += `--html-base-line=${arg.split("=")[1]} `;
+      } else if (arg.includes("lineNumbers")) {
+        opts += "--html-lines ";
+      } else if (arg.includes("table")) {
+        opts += "--html-lines-table ";
+      } else if (arg.includes("tabWidth")) {
+        opts += `--html-tab-width=${arg.split("=")[1]} `;
       } else if (lineNumbersRegex.test(arg)) {
         // console.log("Match Regex " + arg);
         if (arg.includes("-")) {
           arg = arg.replace("-", ":");
           // console.log("Replacing - with : " + arg);
         }
-        opts = opts + `--html-highlight=${arg} `;
+        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 ";
       }
     });
   }
-  if (context["theme"]) {
-    opts = opts + `--style ${context["theme"]} `;
-  } else {
-    opts = opts + "--style xcode-dark ";
-  }
 
   return opts;
 }