diff --git a/.eleventy.js b/.eleventy.js index 1826d49..a55d533 100644 --- a/.eleventy.js +++ b/.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: "
", preAttributes: {}, - codeAttributes: { - theme: "onedark", - }, + codeAttributes: {}, }, options ); diff --git a/README.md b/README.md index b4638cb..c4045b9 100644 --- a/README.md +++ b/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 diff --git a/demo/eleventy-config.js b/demo/eleventy-config.js index 9cf5d49..ad77681 100644 --- a/demo/eleventy-config.js +++ b/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", diff --git a/demo/test-markdown.md b/demo/test-markdown.md index 72d91da..a33fb89 100644 --- a/demo/test-markdown.md +++ b/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 = ` diff --git a/package.json b/package.json index 0c542fc..ff4dd19 100644 --- a/package.json +++ b/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", @@ -52,4 +54,4 @@ "./test/*.js" ] } -} +} \ No newline at end of file diff --git a/src/HighlightPairedShortcode.js b/src/HighlightPairedShortcode.js index 23f347b..c2e19c6 100644 --- a/src/HighlightPairedShortcode.js +++ b/src/HighlightPairedShortcode.js @@ -1,5 +1,4 @@ -const Chroma = require("chroma-highlight"); -const parseSyntaxArguments = require("./parseSyntaxArguments"); +const markdownChroma = require("./markdownSyntaxHighlightOptions"); 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") { - highlightedContent = content; - } else { - const parsedArgs = parseSyntaxArguments(args, options); - - let opts = `--formatter html --html-only --html-inline-styles ${parsedArgs} `; - - highlightedContent = Chroma.highlight(content, opts); - } - - return highlightedContent; + let mc = markdownChroma(options); + return mc(content, args); }; diff --git a/src/parseSyntaxArguments.js b/src/parseSyntaxArguments.js index cbce8fd..df47783 100644 --- a/src/parseSyntaxArguments.js +++ b/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} `; - } else if (context["lineNumbers"] || args.includes("lineNumbers")) { - opts = opts + "--html-lines "; - } else if ( - context["lineNumbersStyle"] == "table" || - args.includes("table") - ) { - opts = opts + "--html-lines-table "; + opts += `--html-highlight=${arg} `; } }); } - if (context["theme"]) { - opts = opts + `--style ${context["theme"]} `; - } else { - opts = opts + "--style xcode-dark "; - } return opts; }