Big release—adds support for Nunjucks highlighter, adds options to allow specifying using only some of the syntax highlighter pack (Fixes #2), adds options.init to make it possible to further customize Prism (Fixes #4)

zachleat · zachleat · commit 9dbd54adcd88 · 2018-09-28T09:30:22.000-05:00
diff --git a/.eleventy.js b/.eleventy.js
@@ -1,14 +1,31 @@
-const liquidPlain = require("./src/liquidSyntaxHighlightPlain");
-const liquidPrismJs = require("./src/liquidSyntaxHighlightPrism");
+const Prism = require("prismjs");
+const hasTemplateFormat = require("./src/hasTemplateFormat");
+const HighlightPairedShortcode = require("./src/HighlightPairedShortcode");
+const LiquidHighlightTag = require("./src/LiquidHighlightTag");
 const markdownPrismJs = require("./src/markdownSyntaxHighlight");
 
-module.exports = function(eleventyConfig, pluginNamespace) {
-  eleventyConfig.namespace(pluginNamespace, () => {
-    // compatibility with existing {% highlight js %} and others
-    eleventyConfig.addLiquidTag("highlight", liquidPrismJs);
-    eleventyConfig.addMarkdownHighlighter(markdownPrismJs);
+module.exports = {
+  initArguments: { Prism },
+  configFunction: function(eleventyConfig, options = {}) {
+    // TODO hbs?
+    if( hasTemplateFormat(options.templateFormats, "liquid") ) {
+      eleventyConfig.addLiquidTag("highlight", (liquidEngine) => {
+        // {% highlight js 0 2 %}
+        let highlight = new LiquidHighlightTag(liquidEngine);
+        return highlight.getObject();
+      });
+    }
 
-    // Deprecated, use {% highlight text %} instead.
-    eleventyConfig.addLiquidTag("highlight-plain", liquidPlain);
-  });
+    if( hasTemplateFormat(options.templateFormats, "njk") ) {
+      eleventyConfig.addPairedNunjucksShortcode("highlight", (content, args) => {
+        // {% highlight "js 0 2-3" %}
+        let [language, ...highlightNumbers] = args.split(" ");
+        return HighlightPairedShortcode(content, language, highlightNumbers.join(" "));
+      });
+    }
+
+    if( hasTemplateFormat(options.templateFormats, "md") ) {
+      eleventyConfig.addMarkdownHighlighter(markdownPrismJs);
+    }
+  }
 };
diff --git a/README.md b/README.md
@@ -23,12 +23,36 @@ You are responsible for including [your favorite PrismJS theme CSS](https://gith
 
 Read more about [Eleventy plugins.](https://www.11ty.io/docs/plugins/)
 
+### Options
+
+Optionally pass in an options object as the second argument to `addPlugin` to further customize this plugin pack.
+
+```
+const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+module.exports = function(eleventyConfig) {
+  eleventyConfig.addPlugin(syntaxHighlight, {
+
+    // Change which syntax highlighters are installed
+    templateFormats: ["*"], // default
+
+    // Or, just njk and md syntax highlighters (do not install liquid)
+    // templateFormats: ["njk", "md"],
+
+    // init callback lets you customize Prism
+    init: function({ Prism }) {
+      Prism.languages.myCustomLanguage = /* */;
+    }
+  });
+};
+```
+
 ## Usage
 
 ### This plugin provides:
 
 * Markdown Highlighter: syntax highlights using PrismJS
-* Liquid Tag `{% highlight %}`: syntax highlights using PrismJS.
+* Liquid Custom Tag `{% highlight %}`: syntax highlights using PrismJS.
+* Nunjucks Paired Shortcode `{% highlight %}`: syntax highlights using PrismJS.
 
 ### Markdown Highlighter
 
@@ -37,6 +61,7 @@ Optionally specify a language after the start of the markdown fenced code block.
 * [List of supported PrismJS languages](http://prismjs.com/#languages-list)
 
 ````
+<!-- Markdown Template -->
 ``` js
 function myFunction() {
   return true;
@@ -45,8 +70,12 @@ function myFunction() {
 ````
 
 ````
-// Line highlighting classes (single highlight)
-// Adds `highlight-line-active` class to lines 1,3,4,5 (for line highlighting)
+<!--
+  Line highlighting classes (single highlight)
+  Adds `highlight-line-active` class to lines 1,3,4,5 (for line highlighting)
+-->
+
+<!-- Markdown Template -->
 ``` js/1,3-5
 function myFunction() {
   // …
@@ -56,9 +85,13 @@ function myFunction() {
 ````
 
 ````
-// Line highlighting classes (add and remove mode)
-// Adds `highlight-line-add` class to lines 1,3
-// Adds `highlight-line-remove` class to lines 5,6,7,8
+<!--
+  Line highlighting classes (add and remove mode)
+  Adds `highlight-line-add` class to lines 1,3
+  Adds `highlight-line-remove` class to lines 5,6,7,8
+-->
+
+<!-- Markdown Template -->
 ``` js/1,3/5-8
 function myFunction() {
   // …
@@ -85,6 +118,7 @@ function myFunction() {
 * [List of supported PrismJS languages](http://prismjs.com/#languages-list)
 
 ```
+<!-- Liquid Template -->
 {% highlight js %}
 function myFunction() {
   return true;
@@ -93,8 +127,12 @@ function myFunction() {
 ```
 
 ```
-// Line highlighting classes (single highlight)
-// Adds `highlight-line-active` class to lines 1,3,4,5 (for line highlighting)
+<!--
+  Line highlighting classes (single highlight)
+  Adds `highlight-line-active` class to lines 1,3,4,5 (for line highlighting)
+-->
+
+<!-- Liquid Template -->
 {% highlight js 1,3-5 %}
 function myFunction() {
   // …
@@ -104,9 +142,13 @@ function myFunction() {
 ```
 
 ```
-// Line highlighting classes (add and remove)
-// Adds `highlight-line-add` class to lines 1,3
-// Adds `highlight-line-remove` class to lines 5,6,7,8
+<!--
+  Line highlighting classes (add and remove)
+  Adds `highlight-line-add` class to lines 1,3
+  Adds `highlight-line-remove` class to lines 5,6,7,8
+-->
+
+<!-- Liquid Template -->
 {% highlight js 1,3 5-8 %}
 function myFunction() {
   // …
@@ -120,6 +162,7 @@ function myFunction() {
 Use `text` to use the line highlighting features without PrismJS.
 
 ```
+<!-- Liquid Template -->
 {% highlight text 1-2 %}
 function myFunction() {
   let highlighted = true;
@@ -128,16 +171,79 @@ function myFunction() {
 {% endhighlight %}
 ```
 
-### Sample Line Highlighting CSS
+### Nunjucks Paired Shortcode: Prism Syntax Highlighter
+
+* [List of supported PrismJS languages](http://prismjs.com/#languages-list)
+
+```
+<!-- Nunjucks Template -->
+{% highlight "js" %}
+function myFunction() {
+  return true;
+}
+{% endhighlight %}
+```
 
 ```
+<!--
+  Line highlighting classes (single highlight)
+  Adds `highlight-line-active` class to lines 1,3,4,5 (for line highlighting)
+-->
+
+<!-- Nunjucks Template -->
+{% highlight "js 1,3-5" %}
+function myFunction() {
+  // …
+  return true;
+}
+{% endhighlight %}
+```
+
+```
+<!--
+  Line highlighting classes (add and remove)
+  Adds `highlight-line-add` class to lines 1,3
+  Adds `highlight-line-remove` class to lines 5,6,7,8
+-->
+
+<!-- Nunjucks Template -->
+{% highlight "js 1,3 5-8" %}
+function myFunction() {
+  // …
+  return true;
+}
+{% endhighlight %}
+```
+
+#### Plain text
+
+Use `text` to use the line highlighting features without PrismJS.
+
+```
+<!-- Nunjucks Template -->
+{% highlight "text 1-2" %}
+function myFunction() {
+  let highlighted = true;
+  return highlighted;
+}
+{% endhighlight %}
+```
+
+### Sample Line Highlighting CSS
+
+```css
 .highlight-line {
   display: block;
-  padding: 0.125em 1em;
   text-decoration: none; /* override del, ins, mark defaults */
   color: inherit; /* override del, ins, mark defaults */
 }
-.highlight-line:not(:empty) + br {
+
+/* allow highlighting empty lines */
+.highlight-line:empty:before {
+  content: " ";
+}
+/* avoid double line breaks when using display: block; */
+.highlight-line + br {
   display: none;
 }
 
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
     "ava": "^0.25.0"
   },
   "dependencies": {
-    "@11ty/eleventy": "^0.3.5",
-    "prismjs": "^1.13.0"
+    "@11ty/eleventy": "^0.5.4",
+    "prismjs": "^1.15.0"
   }
 }
diff --git a/src/HighlightLinesGroup.js b/src/HighlightLinesGroup.js
@@ -5,9 +5,9 @@ class HighlightLinesGroup {
     this.init(str, delimiter);
   }
 
-  init(str, delimiter) {
+  init(str = "", delimiter = " ") {
     this.str = str;
-    this.delimiter = delimiter || " ";
+    this.delimiter = delimiter;
 
     let split = str.split(this.delimiter);
     this.highlights = new HighlightLines(split.length === 1 ? split[0] : "");
diff --git a/src/HighlightPairedShortcode.js b/src/HighlightPairedShortcode.js
@@ -0,0 +1,24 @@
+const Prism = require("prismjs");
+const PrismLoader = require("prismjs/components/index.js");
+const HighlightLinesGroup = require("./HighlightLinesGroup");
+
+module.exports = function(content, language, highlightNumbers) {
+  let highlightedContent;
+  if( language === "text" ) {
+    highlightedContent = content.trim();
+  } else {
+    if( !Prism.languages[ language ] ) {
+      PrismLoader([language]);
+    }
+
+    highlightedContent = Prism.highlight(content.trim(), Prism.languages[ language ]);
+  }
+
+  let group = new HighlightLinesGroup(highlightNumbers);
+
+  let lines = highlightedContent.split("\n").map(function(line, j) {
+    return group.getLineMarkup(j, line);
+  });
+
+  return `<pre class="language-${language}"><code class="language-${language}">` + lines.join("<br>") + "</code></pre>";
+};
diff --git a/src/LiquidHighlightTag.js b/src/LiquidHighlightTag.js
@@ -1,18 +1,9 @@
 const HighlightLinesGroup = require("./HighlightLinesGroup");
+const HighlightPairedShortcode = require("./HighlightPairedShortcode");
 
-class LiquidHighlight {
+class LiquidHighlightTag {
   constructor(liquidEngine) {
     this.liquidEngine = liquidEngine;
-    this.hooks = [];
-    this.classHooks = [];
-  }
-
-  addHook(hookFunction) {
-    this.hooks.push(hookFunction);
-  }
-
-  addClassHook(hookFunction) {
-    this.classHooks.push(hookFunction);
   }
 
   getObject() {
@@ -22,7 +13,7 @@ class LiquidHighlight {
           let split = tagToken.args.split(" ");
 
           this.language = split.shift();
-          this.highlights = new HighlightLinesGroup(split.join(" "));
+          this.highlightLines = split.join(" ");
 
           this.tokens = [];
 
@@ -46,23 +37,7 @@ class LiquidHighlight {
           let tokens = this.tokens.map(token => token.raw);
           let tokenStr = tokens.join("").trim();
 
-          for( let hook of highlighter.hooks ) {
-            tokenStr = hook.call(this, this.language, tokenStr);
-          }
-
-          let lines = tokenStr.split("\n").map(function(line, j) {
-            let classHookClasses = [];
-            for( let classHook of highlighter.classHooks ) {
-              let ret = classHook(this.language, line, j);
-              if( ret ) {
-                classHookClasses.push(ret);
-              }
-            }
-
-            return this.highlights.getLineMarkup(j, line, classHookClasses);
-          }.bind(this));
-
-          return Promise.resolve(`<pre class="language-${this.language}"><code class="language-${this.language}">` + lines.join("<br>") + "</code></pre>");
+          return Promise.resolve(HighlightPairedShortcode(tokenStr, this.language, this.highlightLines));
         }
       };
     };
@@ -71,4 +46,4 @@ class LiquidHighlight {
   }
 }
 
-module.exports = LiquidHighlight;
+module.exports = LiquidHighlightTag;
diff --git a/src/hasTemplateFormat.js b/src/hasTemplateFormat.js
@@ -0,0 +1,13 @@
+module.exports = function(templateFormats = ["*"], format = false) {
+  if(!Array.isArray(templateFormats)) {
+    templateFormats = [templateFormats];
+  }
+
+  if( Array.isArray(templateFormats) ) {
+    if( templateFormats.indexOf("*") > -1 || templateFormats.indexOf(format) > -1 ) {
+      return true;
+    }
+  }
+
+  return false;
+};
diff --git a/src/liquidSyntaxHighlightPrism.js b/src/liquidSyntaxHighlightPrism.js
diff --git a/test/HasTemplateFormatTest.js b/test/HasTemplateFormatTest.js
diff --git a/test/HighlightPairedShortcodeTest.js b/test/HighlightPairedShortcodeTest.js

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@`
`27`	`27`	`"ava": "^0.25.0"`
`28`	`28`	`},`
`29`	`29`	`"dependencies": {`
`30`		`- "@11ty/eleventy": "^0.3.5",`
`31`		`- "prismjs": "^1.13.0"`
	`30`	`+ "@11ty/eleventy": "^0.5.4",`
	`31`	`+ "prismjs": "^1.15.0"`
`32`	`32`	`}`
`33`	`33`	`}`