Fixes #77

Author: zachleat

syntaxHighlight.js

@@ -4,6 +4,8 @@ import PrismLoader from "./src/PrismLoader.js";
 import hasTemplateFormat from "./src/hasTemplateFormat.js";
 import HighlightPairedShortcode from "./src/HighlightPairedShortcode.js";
 
+const TRIPLE_BACKTICK = "```";
+
 export default function(eleventyConfig, options){
   try {
     eleventyConfig.versionCheck(pkg["11ty"].compatibility);
@@ -13,7 +15,6 @@ export default function(eleventyConfig, options){
   options = Object.assign({
     init: function({Prism}){},
     lineSeparator: "\n",
-    lineHighlightSeparator: " ",
     errorOnInvalidLanguage: false,
     alwaysWrapLineHighlights: false,
     preAttributes: {},
@@ -25,20 +26,27 @@ export default function(eleventyConfig, options){
     PrismLoader(language)
   }
 
+  function shortcode(content, args) {
+    // {% highlight "js 0 2-3" %}
+    let [language, ...highlightNumbers] = (args || "").split(" ");
+
+    // Issue #77 avoid issues when nesting code blocks inside other elements (e.g. <div>{% highlight %}…</div>), introducing extra paragraphs
+    if(this.page.inputPath.endsWith(".md")) {
+      let highlightNumbersStr = highlightNumbers.length > 0 ? `/${highlightNumbers.join("/")}` : "";
+      return `\n\n${TRIPLE_BACKTICK}${language || ""}${highlightNumbersStr}
+${content}
+${TRIPLE_BACKTICK}\n\n`;
+    }
+
+    return HighlightPairedShortcode(content, language, highlightNumbers.join(" "), options);
+  }
+
   if( hasTemplateFormat(options.templateFormats, "liquid") ) {
-    eleventyConfig.addPairedLiquidShortcode("highlight", function(content, args) {
-      // {% highlight "js 0 2-3" %}
-      let [language, ...highlightNumbers] = (args || "").split(" ");
-      return HighlightPairedShortcode(content, language, highlightNumbers.join(" "), options);
-    });
+    eleventyConfig.addPairedLiquidShortcode("highlight", shortcode);
   }
 
   if( hasTemplateFormat(options.templateFormats, "njk") ) {
-    eleventyConfig.addPairedNunjucksShortcode("highlight", function(content, args) {
-      // {% highlight "js 0 2-3" %}
-      let [language, ...highlightNumbers] = (args || "").split(" ");
-      return HighlightPairedShortcode(content, language, highlightNumbers.join(" "), options);
-    });
+    eleventyConfig.addPairedNunjucksShortcode("highlight", shortcode);
   }
 
   if( hasTemplateFormat(options.templateFormats, "md") ) {

test/EleventyTest.js

@@ -33,3 +33,14 @@ test("diff-javascript #80", async t => {
   t.is(json.length, 1);
 	t.is(json[0].content.trim(), `<pre class="language-diff-javascript"><code class="language-diff-javascript"><span class="token deleted-sign deleted language-javascript"><span class="token prefix deleted">-</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span></code></pre>`);
 });
+
+test("Issue #77", async t => {
+  let json = await render("issue-77.md", `<div>{% highlight "js" %}
+// line 1
+
+// line 3
+{% endhighlight %}</div>`);
+
+  let content = json[0].content.trim();
+	t.is(content, `<div>\n<pre class="language-js"><code class="language-js"><span class="token comment">// line 1</span>\n\n<span class="token comment">// line 3</span></code></pre>\n</div>`);
+});