Loading PrismJS in Eleventy config breaks plugin

[jordanthornquest]

Hello, folks.

To be honest, I'm not sure if this is an expected behavior, or something unintended. In a recent project, I was using eleventy-plugin-syntaxhighlight to provide straightforward highlighting for markdown files. However, I also created a shortcode for creating previews of code snippets and their processed output. Essentially, what Bootstrap does in their documentation.

For this shortcode, I ended up needing to load my own instance of PrismJS, and the languages I'd need to utilize. Here's a shorthand of what was going on in my config.

eleventy.js

// Load libraries and dependencies
const prism = require("prismjs");
const loadLanguages = require("prismjs/components/");
loadLanguages(['html', 'jsx', 'json', 'twig', 'velocity']);
const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(syntaxHighlight);

  // Code examples shortcode
  eleventyConfig.addPairedShortcode("example", function(content, title, show_preview, show_markup) {
    let highlightedContent = prism.highlight(content.trim(), prism.languages["html"], "html");

    let lines = highlightedContent.split("\n");
    lines = lines.map(function(line, j) {
      return line;
    });

    return outdent`
      <div class="card docs-example">
        ${title ? `<h6 class="card-header">${title}</h6>` : `<h6 class="card-header">Example</h6>`}
        <div class="card-body">
          ${show_preview ? `<div class="docs-example-content">${content}</div>` : ``}
          ${show_markup ? `<div class="docs-example-markup"><pre class="language-html"><code class="language-html">` + lines.join("<br>") + "</code></pre></div>" : ``}
        </div><!-- /.card-body -->
      </div><!-- /.docs-example -->
    `
  });

  // And so on
}

In one of my markdown files, I attempted to use eleventy-plugin-syntaxhighlight to style a bash script. What I've discovered is that, by loading PrismJS for use with my shortcode, I inadvertently caused the eleventy-plugin-syntaxhighlight plugin to no longer load the correct languages. I received an error in my console explaining that bash was not an available language for PrismJS.

I ran in circles for a bit before thinking to remove my shortcode and the const prism = require("prismjs"); module. I think the error is occurring either from loading Prism in the config, or by loading const loadLanguages = require("prismjs/components/"); in the config. Even if I removed my shortcode and kept the module imports, the same error would occur. Removing the modules caused the plugin to successfully process the bash highlighting without issue.

Any thoughts on whether or not this is expected, or how to use both functions while maintaining compatibility?

[zachleat]

Eleventy has a bunch of Prism-specific loading code to facilitate its use in Node.

I think your best bet here is a programmatic use of this plugin. We do provided a pairedShortcode export that you can use, e.g.

const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
const eleventyPrism = syntaxHighlight.pairedShortcode;

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(syntaxHighlight);

  // Code examples shortcode
  eleventyConfig.addPairedShortcode("example", function(content, title, show_preview, show_markup) {
    return outdent`
      <div class="card docs-example">
        ${title ? `<h6 class="card-header">${title}</h6>` : `<h6 class="card-header">Example</h6>`}
        <div class="card-body">
          ${show_preview ? `<div class="docs-example-content">${content}</div>` : ``}
          ${show_markup ? `<div class="docs-example-markup">${eleventyPrism(content), "html"}</div>" : ``}
        </div><!-- /.card-body -->
      </div><!-- /.docs-example -->
    `
  });

  // And so on
}

[zachleat]

This is an automated message to let you know that a helpful response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.

If the response works to solve your problem—great! But if you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and we will reopen the issue. Thanks!