Feature request: config to add wrapping div

[brycewray]

For having things like absolute-position Copy Code buttons that won’t move when you’re horizontally scrolling a highlighted code block, it would be nice to have a config-level option of wrapping this plugin’s output within a div.

Just so it’s clear what I’m suggesting: I don’t mean to replace the current pre class="language-[whatever]" wrapper, but rather to be able to wrap all of that within a div. This would therefore be similar to, e.g., how Hugo wraps its syntax highlighting in div class="highlight" followed by the pre.

I am making the naïve assumption that there is nothing about Prism.js itself that would preclude this. I looked through the Prism docs and couldn’t find any way to implement it within Prism itself, including suggested Prism plugins (most if not all of which are presumably assuming client-side use of Prism rather than static-site-building), so I hoped that this plugin could provide a workaround such as what I’m suggesting.

Thanks in advance for whatever consideration this may receive.

[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.

[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.

[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.