Feature request: config to add wrapping div about eleventy-plugin-syntaxhighlight

[davidpmccormick]

Would love this. I've just jumped through so many hoops to make a code block appear full bleed with some truly horrific css that could have been avoided with one extra wrapping div.

[laujonat]

Hi, if I understand correctly, you're trying to wrap the highlighted code block in a div like this?

<div>
  <pre>
     <code>
     <!-- highlighted code -->
     </code>
  </pre>
</div>

I agree, it seems like a feature that Prism should support natively. However, as a workaround in Eleventy, if you're using markdown-it as your markdown parser, you can override the renderer rules for fenced code blocks like this:

const defaultRender = markdownLibrary.renderer.rules.fence;

markdownLibrary.renderer.rules.fence = function (
  tokens,
  idx,
  options,
  env,
  slf
) {
  let html = defaultRender(tokens, idx, options, env, slf);

  html = `<div class="wrapper">${html}</div>`;

  return html;
};

This will wrap the highlighted code from the syntax highlighter plugin in a div with the class wrapper.

This approach should work with Liquid, Nunjucks, or any other template engines that interpret markdown to generate HTML.

And note this will only affect fenced code blocks (i.e., code blocks that are enclosed in triple backticks ```). If you want to apply the same wrapping to indented code blocks (i.e., code blocks that are indented by four spaces or a tab), you would need to override markdownLibrary.renderer.rules.code_block in the same way.

Hope that helps anyone looking to do this.

[brycewray]

In the meantime, I came up with a workaround. It’s clunky, but it does the job.

1. My posts with code blocks all use the same template, so it now has this in place of the usual {{ content | safe }}:

{# START, divs around Prism `pre``code` stuff #}
{% set Content = content %}
{% set withoutDivStart = '<pre class="language-' %}
{% set withDivStart = '<div class="highlight"><pre class="language-' %}
{% set withoutDivEnd = '</code></pre>'  %}
{% set withDivEnd = '</code></pre></div>' %}
{% if withoutDivStart in content %}
  {% set Content = content | replace (withoutDivStart, withDivStart) %}
  {% set Content = Content | replace (withoutDivEnd, withDivEnd) %}
{% endif %}
{#   END, divs around Prism `pre``code` stuff #}
{{ Content | safe }} 

(Note the capitalization or lack thereof for “Content”/“content” above.)

2. I added the following CSS to the relevant place:

div.highlight {
  position: relative;
}

3. I adjusted the code for the “copy code” button (borrowed from others’ efforts, as noted in https://www.brycewray.com/posts/2022/05/gems-in-rough-18/#code-for-copying-code) so that it would put the button before the pre, not after:

const pre = codeBlock.parentNode;
pre.parentNode.insertBefore(button, pre);

Now, if you have to scroll horizontally through a long-width code block, the “copy code” button stays affixed to the right end of the div as it should rather than scrolling with the code.

Mind you, this doesn’t cancel my feature request 😄 — but it does work in the interim, so there ya go.