updated readme, added examples of output and code used to generate it

2023-02-03 02:54:28 +00:00 · 2023-02-03 02:54:28 +00:00 · 5f3d7238d9
parent 04f69115c9
commit 5f3d7238d9
8 changed files with 64 additions and 11 deletions
--- 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")) {
--- 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
+`;
+```
+````
+
+![](./images/hightlight-first-and-third-lines.png)
+
+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
+`;
+```
+````
+
+![](./images/highlight-range-with-line-numbers.png)
+
+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
+`;
+```
+````
+
+![](./images/highlight-range-with-line-numbers-arbitary-start-number.png)
--- a/demo/test-liquid.liquid
+++ b/demo/test-liquid.liquid
@ -5,16 +5,15 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="../test.css">
-  <!-- <link rel="stylesheet" href="../prism-theme.css"> -->
  </head>
  <body>

    Just JS
-    {% highlight js %}
-    function myFunction() {
-      return true;
-    }
-    {% endhighlight %}
+{% highlight js %}
+function myFunction() {
+  return true;
+}
+{% endhighlight %}

    Just JS multiline

--- a/demo/test-markdown.md
+++ b/demo/test-markdown.md
@ -4,7 +4,6 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="../test.css">
-    <!-- <link rel="stylesheet" href="../prism-theme.css"> -->
  </head>
  <body>

--- a/demo/test-nunjucks.njk
+++ b/demo/test-nunjucks.njk
@ -5,7 +5,6 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="../test.css">
-    <link rel="stylesheet" href="../prism-theme.css">
  </head>
  <body>

--- a/images/highlight-range-with-line-numbers-arbitary-start-number.png
+++ b/images/highlight-range-with-line-numbers-arbitary-start-number.png
--- a/images/highlight-range-with-line-numbers.png
+++ b/images/highlight-range-with-line-numbers.png
--- a/images/hightlight-first-and-third-lines.png
+++ b/images/hightlight-first-and-third-lines.png