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
This commit is contained in:
Robert McGovern 2023-02-11 00:36:15 +00:00
parent e3d9338708
commit cc6e7e2436
7 changed files with 62 additions and 41 deletions

View File

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

View File

@ -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. 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. 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` - `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` - `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) - 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 ## Supported `options` in eleventy config
@ -48,6 +49,8 @@ Example of `options` object
eleventyConfig.addPlugin(syntaxHighlight, { eleventyConfig.addPlugin(syntaxHighlight, {
theme: "monokai", theme: "monokai",
lineNumbers: false, lineNumbers: false,
highlightStyle: "bg:#943011",
tabWidth: 12,
lexerOverrides: { lexerOverrides: {
njk: "vue", 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. - `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. - `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. - `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 ## TO DO
- [✅] Support `.liquid` files - [✅] Support `.liquid` files
- [✅] Add passed in `code` and `pre` atributes into returned html from chroma - [✅] 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 testing
- [] Add improve regex for line numbers - [] 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 ## Example output

View File

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

View File

@ -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 Highlight 1 & 3
```js/1,3 ```js/1,3
let multilineString = ` let multilineString = `

View File

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

View File

@ -1,5 +1,4 @@
const Chroma = require("chroma-highlight"); const markdownChroma = require("./markdownSyntaxHighlightOptions");
const parseSyntaxArguments = require("./parseSyntaxArguments");
module.exports = function (content, args, options = {}) { module.exports = function (content, args, options = {}) {
// No args, so don't know language, drop out // No args, so don't know language, drop out
@ -7,21 +6,10 @@ module.exports = function (content, args, options = {}) {
return content; return content;
} }
let highlightedContent;
if (options.trim === undefined || options.trim === true) { if (options.trim === undefined || options.trim === true) {
content = content.trim(); 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;
}; };

View File

@ -14,6 +14,28 @@ function parseSyntaxArguments(args, context = {}) {
let opts = ""; 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 // Remove the lang from the arguments
let lang = splitArgs.shift(); let lang = splitArgs.shift();
@ -26,29 +48,23 @@ function parseSyntaxArguments(args, context = {}) {
if (Array.isArray(splitArgs)) { if (Array.isArray(splitArgs)) {
splitArgs.forEach((arg) => { splitArgs.forEach((arg) => {
if (arg.includes("lineNumbersStart")) { 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)) { } else if (lineNumbersRegex.test(arg)) {
// console.log("Match Regex " + arg); // console.log("Match Regex " + arg);
if (arg.includes("-")) { if (arg.includes("-")) {
arg = arg.replace("-", ":"); arg = arg.replace("-", ":");
// console.log("Replacing - with : " + arg); // 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; return opts;
} }