Add language class to <pre> tags for Prism compatibility

[janko]

I'm using Docusaurus, which uses Remarkable under-the-hood. Its default highlighter is higlight.js, but I wanted to use Prism instead.

Prism almost works, the only hiccup is that Prism CSS requires <pre> tags to have the language-* class. Since I didn't have much luck figuring out how to create a plugin for this, I thought we could make this built-in. This is what this PR does.

[coveralls]

Coverage remained the same at 98.544% when pulling 5da306e on janko:prism-compatibility into c510fce on jonschlinkert:master.

[janko]

I've worked around this by styling the <code> tag directly. Prism doesn't actually require the <pre> tag to have the class, though its themes do rely on it, but that can be tweaked easily.

[psalaets]

Sorry to bump an old thread but this is what I'm using with remarkable 2.0.1 and prism 1.29.0.

const prismFriendlyFence: Remarkable.Plugin = (md) => {
  const original = md.renderer.rules.fence;

  md.renderer.rules.fence = function(tokens, idx, options, env, instance) {
    const prefix = options?.langPrefix ? options.langPrefix : '';
    const langName = tokens[idx].params;
    const langClass = langName ? ` class="${prefix + langName}"` : '';

    return original.call(this, tokens, idx, options, env, instance)
      .replace('<pre>', `<pre${langClass}>`);
  };
};

Usage

const md = new Remarkable()
  .use(prismFriendlyFence);