added handling highlighting lines, from single lines, to ranges, to line + range. Could probably do multiple ranges if I edit the regex

README.md

@@ -21,7 +21,7 @@ Arguments:
 - `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. i.e `lineNumberStyle=table`
 - `lineNumbersStart` the number to start the line number count from. i.e `lineNumbersStart=200`
-
+- number **or** number, number **or** number,rangeStartNumber-rangeEndNumber **or** number,rangeStartNumber-rangeEndNumber to specify a line or lines to highlight. i.e `1`, or `1,3`, or `3:6`, or `1,3:6`, or `2,4-6`. **NOTE** if you specify `lineNumbersStart` then the specified numbers must be relative to that (so `lineNumbersStart=200`, then use `204` to highlight line 204)
 
 ## Supported `options` in eleventy config
 

demo/test-markdown.md

@@ -93,6 +93,20 @@ let multilineString = `
 `;
 ```
 
+```js/4
+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 and highlight
 Highlight 1, 3-6
 
@@ -109,10 +123,44 @@ let multilineString = `
 `;
 ```
 
-Line numbers, highlight, base number 200, table
+Line numbers and highlight
-Highlight 1, 3-6
+Highlight 3-6
 
-```js/1,3:6/lineNumbers/table/lineNumbersStart=200
+```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, highlight, base number 200, table
+Highlight 202-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
+`;
+```
+
+
+Line numbers, highlight, base number 200, table
+Highlight 3-6 (won't work)
+
+```js/3:6/lineNumbers/table/lineNumbersStart=200
 let multilineString = `
   this is the first line
   this is the second line

src/parseSyntaxArguments.js

@@ -39,14 +39,17 @@ function attributeEntryToString2(attribute, context) {
  * @returns {string} A string containing the above HTML attributes preceded by a single space.
  */
 function parseSyntaxArguments(args, context = {}) {
-  console.log(">>pSA");
+  // console.log(">>pSA");
-  console.log(args);
+  // console.log(args);
-  console.log(">>>>>> context");
+  // console.log(">>>>>> context");
-  console.log(context);
+  // console.log(context);
   const preAttributes = getAttributes(context.preAttributes);
   const codeAttributes = getAttributes(context.codeAttributes);
 
-  console.log("<<pSA");
+  const lineNumbersRegex =
+    /[0-9]{1,},[0-9]{1,}[:-][0-9]{1,}|[0-9]{1,},[0-9]{1,}|[0-9]{1,}/;
+
+  // console.log("<<pSA");
 
   let splitArgs;
 
@@ -62,6 +65,28 @@ function parseSyntaxArguments(args, context = {}) {
 
   opts += `--lexer ${splitArgs[0]} `;
 
+  // Remove the language which should be the first arg
+  splitArgs.shift();
+
+  if (Array.isArray(splitArgs)) {
+    splitArgs.forEach((arg) => {
+      if (arg.includes("lineNumbersStart")) {
+        opts = opts + `--html-base-line=${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} `;
+      }
+
+      // console.log(arg);
+    });
+    // for (arg in splitArgs) {
+    //   console.log(arg);
+    // }
+  }
   if (context["theme"]) {
     opts = opts + `--style ${context["theme"]} `;
   } else {
@@ -76,35 +101,6 @@ function parseSyntaxArguments(args, context = {}) {
     opts = opts + "--html-lines-table ";
   }
 
-  if (splitArgs.includes("lineNumbersStart")) {
-    console.log("lineNumbersStart");
-    // console.log(splitArgs["lineNumbersStart"]);
-    // // console.log(args.keys());
-    // console.log(splitArgs.getAttribute("lineNumbersStart"));
-    // opts =
-    //   opts + `--html-base-line= ${split["lineNumbersStart"].split("="[1])}`;
-  }
-
-  // let langClass = context.language ? `language-${context.language}` : "";
-  // if (!attributes) {
-  //   return langClass ? ` class="${langClass}"` : "";
-  // } else if (typeof attributes === "object") {
-  //   if(!("class" in attributes) && langClass) {
-  //     // class attribute should be first in order
-  //     let tempAttrs = { class: langClass };
-  //     for(let key in attributes) {
-  //       tempAttrs[key] = attributes[key];
-  //     }
-  //     attributes = tempAttrs;
-  //   }
-  //   const formattedAttributes = Object.entries(attributes).map(
-  //     entry => attributeEntryToString(entry, context)
-  //   );
-  //   return formattedAttributes.length ? ` ${formattedAttributes.join(" ")}` : "";
-  // } else if (typeof attributes === "string") {
-  //   throw new Error("Syntax highlighter plugin custom attributes on <pre> and <code> must be an object. Received: " + JSON.stringify(attributes));
-  // }
-
   return opts;
 }