diff --git a/.eleventy.js b/.eleventy.js
index 40f4b98..438442c 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -3,10 +3,9 @@ const hasTemplateFormat = require("./src/hasTemplateFormat");
const HighlightPairedShortcode = require("./src/HighlightPairedShortcode");
const LiquidHighlightTag = require("./src/LiquidHighlightTag");
// const CharacterWrap = require("./src/CharacterWrap");
-const markdownPrismJs = require("./src/markdownSyntaxHighlightOptions");
+const markdownChroma = require("./src/markdownSyntaxHighlightOptions");
module.exports = {
- // initArguments: { Prism },
configFunction: function (eleventyConfig, options = {}) {
try {
eleventyConfig.versionCheck(pkg["11ty"].compatibility);
@@ -52,7 +51,7 @@ module.exports = {
if (hasTemplateFormat(options.templateFormats, "md")) {
// ```js/0,2-3
- eleventyConfig.addMarkdownHighlighter(markdownPrismJs(options));
+ eleventyConfig.addMarkdownHighlighter(markdownChroma(options));
}
// if (hasTemplateFormat(options.templateFormats, "11ty.js")) {
diff --git a/README.md b/README.md
index 42aa620..e0d8088 100644
--- a/README.md
+++ b/README.md
@@ -46,3 +46,60 @@ Theme can be set to one of these [themes](https://xyproto.github.io/splash/docs/
- [✅] Support `.liquid` files
- [] Add passed in `code` and `pre` atributes into returned html from chroma
+- [] 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`)
+
+## Example output
+
+Highlight line 1 and 3
+
+````
+```js
+let multilineString = `
+ this is the first line
+ this is the middle line
+ this is the last line
+`;
+```
+````
+
+
+
+Line numbers shown and highlighting range of lines 3 through 6
+
+````
+```js/3:6/lineNumbers
+let multilineString = `
+ this is the first line
+ this is the second line
+ this is the third line
+ this is the fourth line
+ this is the fifth line
+ this is the sixth line
+ this is the seventh line
+ this is the eighth line
+`;
+```
+````
+
+
+
+Line numbers shown, line numbers set to start at 200, and highlighting range of lines 202 through 204
+
+````
+```js/202:204/lineNumbers/table/lineNumbersStart=200
+let multilineString = `
+ this is the first line
+ this is the second line
+ this is the third line
+ this is the fourth line
+ this is the fifth line
+ this is the sixth line
+ this is the seventh line
+ this is the eighth line
+`;
+```
+````
+
+
\ No newline at end of file
diff --git a/demo/test-liquid.liquid b/demo/test-liquid.liquid
index f0d8660..ba361dd 100644
--- a/demo/test-liquid.liquid
+++ b/demo/test-liquid.liquid
@@ -5,16 +5,15 @@
-
Just JS
- {% highlight js %}
- function myFunction() {
- return true;
- }
- {% endhighlight %}
+{% highlight js %}
+function myFunction() {
+ return true;
+}
+{% endhighlight %}
Just JS multiline
diff --git a/demo/test-markdown.md b/demo/test-markdown.md
index 6ba632c..1e01c9f 100644
--- a/demo/test-markdown.md
+++ b/demo/test-markdown.md
@@ -4,7 +4,6 @@
-
diff --git a/demo/test-nunjucks.njk b/demo/test-nunjucks.njk
index c569fc7..124ca55 100644
--- a/demo/test-nunjucks.njk
+++ b/demo/test-nunjucks.njk
@@ -5,7 +5,6 @@
-
diff --git a/images/highlight-range-with-line-numbers-arbitary-start-number.png b/images/highlight-range-with-line-numbers-arbitary-start-number.png
new file mode 100644
index 0000000..b638bae
Binary files /dev/null and b/images/highlight-range-with-line-numbers-arbitary-start-number.png differ
diff --git a/images/highlight-range-with-line-numbers.png b/images/highlight-range-with-line-numbers.png
new file mode 100644
index 0000000..ae98d14
Binary files /dev/null and b/images/highlight-range-with-line-numbers.png differ
diff --git a/images/hightlight-first-and-third-lines.png b/images/hightlight-first-and-third-lines.png
new file mode 100644
index 0000000..1e38d7e
Binary files /dev/null and b/images/hightlight-first-and-third-lines.png differ