11ty · pborenstein · May 10, 2020 · May 11, 2020
diff --git a/.eleventy.js b/.eleventy.js
@@ -7,7 +7,8 @@ const markdownPrismJs = require("./src/markdownSyntaxHighlightOptions");
 module.exports = {
   initArguments: { Prism },
   configFunction: function(eleventyConfig, options = {}) {
-    options = Object.assign({ alwaysWrapLineHighlights: false }, options);
+    options = Object.assign({ alwaysWrapLineHighlights: false,
+                              showLineNumbers: false}, options);
 
     // TODO hbs?
     if( hasTemplateFormat(options.templateFormats, "liquid") ) {
@@ -26,6 +27,9 @@ module.exports = {
       });
     }
 
+    //  this is where the plugin code gets hooked up
+    //  in the default md's highlighter
+
     if( hasTemplateFormat(options.templateFormats, "md") ) {
       eleventyConfig.addMarkdownHighlighter(markdownPrismJs(options));
     }

diff --git a/README.md b/README.md
@@ -1,5 +1,19 @@
 # eleventy-plugin-syntaxhighlight
 
+To show line numbers, set the `showLineNumbers` option to true.
+This is a global setting.
+
+```
+module.exports = function(eleventyConfig) {
+  eleventyConfig.addPlugin(syntaxHighlight, {
+    alwaysWrapLineHighlights: true,
+    showLineNumbers: false
+  });
+
+  eleventyConfig.setTemplateFormats("njk,liquid,md,css");
+};
+```
+
 A pack of [Eleventy](https://github.com/11ty/eleventy) plugins for syntax highlighting. No browser/client JavaScript here, these highlight transformations are all done at build-time.
 
 ## Read the [Full Documentation on 11ty.dev](https://www.11ty.dev/docs/plugins/syntaxhighlight/)

diff --git a/demo/eleventy-config.js b/demo/eleventy-config.js
@@ -2,7 +2,8 @@ const syntaxHighlight = require("../.eleventy.js");
 
 module.exports = function(eleventyConfig) {
   eleventyConfig.addPlugin(syntaxHighlight, {
-    // alwaysWrapLineHighlights: true
+    alwaysWrapLineHighlights: true,
+    showLineNumbers: false
   });
 
   eleventyConfig.setTemplateFormats("njk,liquid,md,css");

diff --git a/demo/line-numbers.css b/demo/line-numbers.css
@@ -0,0 +1,54 @@
+/***
+ *    LINE NUMBERS
+ *    https://raw.githubusercontent.com/PrismJS/prism/master/plugins/line-numbers/prism-line-numbers.css
+ ***/
+
+ pre[class*="language-"].line-numbers {
+	position: relative;
+	padding-left: 3.8em;
+	counter-reset: linenumber;
+}
+
+pre[class*="language-"].line-numbers > code {
+	position: relative;
+	white-space: inherit;
+}
+
+.line-numbers .line-numbers-rows {
+	position: absolute;
+	pointer-events: none;
+	top: -4px; /* hack to get numbers to line up with text */
+	font-size: 100%;
+	left: -3.8em;
+	width: 3em; /* works for line-numbers below 1000 lines */
+	letter-spacing: -1px;
+	border-right: 1px solid #999;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+.line-numbers-rows > span {
+  pointer-events: none;
+  display: block;
+  counter-increment: linenumber;
+}
+
+.line-numbers-rows > span:before {
+  content: counter(linenumber);
+  color: #999;
+  display: block;
+  padding-right: 0.8em;
+  text-align: right;
+}
+
+.highlight-line-add {
+  background-color: rgb(197, 234, 197);
+}
+
+.highlight-line-remove {
+  background-color: rgb(253, 204, 204);
+}
diff --git a/demo/test-markdown.md b/demo/test-markdown.md
@@ -5,26 +5,35 @@
     <title></title>
     <link rel="stylesheet" href="../test.css">
     <link rel="stylesheet" href="../prism-theme.css">
+    <link rel="stylesheet" href="../line-numbers.css">
   </head>
   <body>
 
+
+ts
+
 ```ts
 function myFunction() {
   return true;
 }
 ```
 
+typescript
+
 ```typescript
 function myFunction() {
   return true;
 }
 ```
 
+js
+
 ```js
 function myFunction() {
   return true;
 }
 ```
+js
 
 ```js
 let multilineString = `
@@ -34,8 +43,34 @@ let multilineString = `
 `;
 ```
 
+## Table
+
+markdown
+
+``` markdown
+| State         | Capital |
+| :------------ | :------ |
+| New York      | Albany  |
+| Nebraska      | Lincoln |
+| New Hampshire | Concord |
+```
+
+markdown/1,3
+
+``` markdown/1,3
+| State         | Capital |
+| :------------ | :------ |
+| New York      | Albany  |
+| Nebraska      | Lincoln |
+| New Hampshire | Concord |
+```
+
+
+
 ## Dash line
 
+js/-
+
 ```js/-
 let multilineString = `
   this is the first line
@@ -44,6 +79,8 @@ let multilineString = `
 `;
 ```
 
+js/1,3
+
 ```js/1,3
 let multilineString = `
   this is the first line
@@ -52,5 +89,27 @@ let multilineString = `
 `;
 ```
 
+text/1,3
+
+```text/1,3
+  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
+```
+
+
+
+text/1,3/2,4
+
+```text/1,3/2,4
+  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
+```
+
   </body>
 </html>
diff --git a/src/markdownSyntaxHighlightOptions.js b/src/markdownSyntaxHighlightOptions.js
@@ -2,8 +2,19 @@ const Prism = require("prismjs");
 const PrismLoader = require("./PrismLoader");
 const HighlightLinesGroup = require("./HighlightLinesGroup");
 
+/**
+ *
+ *  lang / 1,2,5-8
+ *    highlight lines 1,2,5,6,7,8
+ *
+ *  lang / 1, 9 / 2-4,6
+ *    add lines 1, 9
+ *    delete lines 2,3,4,6
+ */
+
 module.exports = function(options = {}) {
-  return function(str, language) {
+  let plugin = function( str, language) {
+
     if(!language) {
       // empty string means defer to the upstream escaping code built into markdown lib.
       return "";
@@ -21,9 +32,26 @@ module.exports = function(options = {}) {
       html = Prism.highlight(str, PrismLoader(language), language);
     }
 
+        //  Prism's markdown highlighter renders tables
+        //  with a newline before the end of the corresponding
+        //  markdown line. It's hacky, but I'd rather
+        //  fix it up here than figure out how to
+        //  fix Prism's markdown highlighter
+
+    if(language === 'markdown'){
+      let wickedPattern=/<\/span>\n<\/span>/g
+      let goodReplacement='</span></span>\n'
+      html = html.replace(wickedPattern, goodReplacement)
+    }
+
     let hasHighlightNumbers = split.length > 0;
     let highlights = new HighlightLinesGroup(split.join("/"), "/");
-    let lines = html.split("\n").slice(0, -1); // The last line is empty.
+
+    let lines = html.split("\n")
+      //  The last line is usually empty
+      //  but not always -- such as tables
+    if (lines[lines.length-1] === "")
+      lines.pop()
 
     lines = lines.map(function(line, j) {
       if(options.alwaysWrapLineHighlights || hasHighlightNumbers) {
@@ -33,6 +61,26 @@ module.exports = function(options = {}) {
       return line;
     });
 
-    return `<pre class="language-${language}"><code class="language-${language}">${lines.join("<br>")}</code></pre>`;
+    let lineNumbers = ""      // the "<span></span>" string that does the numbering
+    if (options.showLineNumbers) {
+      lineNumbers = `<span aria-hidden="true" class="line-numbers-rows">${new Array(lines.length + 1).join("<span></span>")}</span>`
+    }
+
+    let classNames = `language-${language}` +
+                      (options.showLineNumbers
+                        ? " line-numbers"
+                        : "")
+        //  the line-numbers CSS class shifts the lines right
+        //  to make room for the line numbers
+
+    let retStr = `<pre class="${classNames}">` +
+                    `<code class="language-${language}">${lines.join("<br>")}` +
+                    lineNumbers +
+                  `</code></pre>`
+
+    return retStr
   };
+
+  return plugin;
 };
+
diff --git a/test/MarkdownHighlightTest.js b/test/MarkdownHighlightTest.js
@@ -22,6 +22,17 @@ alert();
 \`\`\``).trim(), `<pre class="language-js"><code class="language-js"><span class="token function">alert</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>`);
 });
 
+test("Test Markdown Highlighter Line Numbers", t => {
+  let mdLib = md();
+  mdLib.set({
+    highlight: markdownPrismJsOptions({ alwaysWrapLineHighlights: true,
+      showLineNumbers: true})
+  });
+  t.is(mdLib.render(`\`\`\`js
+alert();
+\`\`\``).trim(), `<pre class="language-js line-numbers"><code class="language-js"><span class="highlight-line"><span class="token function">alert</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>`);
+});
+
 
 // test("Test Markdown Highlighter Block Comment", t => {
 //   let mdLib = md();