Syntax highlighting and remove <pre> tag

[egoist]

I need to use https://github.com/knsv/mermaid and markdown-it together

eg:

```mermaid
code
```

into:

'<div class="mermaid">'+code+'</div>'

and it should not have <pre><code> wrapped around.

The current solution won't work https://github.com/markdown-it/markdown-it#syntax-highlighting

[puzrin]

https://github.com/markdown-it/markdown-it/blob/master/lib/renderer.js#L41 You should override default fenced block renderer to format your specific type differently.

https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer

[rhinenoir]

@egoist did you get it?

[sustained]

Can you elaborate? I don't really get it. Can't we have some option to override it adding the <pre> stuff? Seems like a fairly common use-case. In my case, I want it to render a custom Vue component and inside the Vue component it has the <pre> and <code> etc.

Seems kind of hackish for us to have to dive into the lib and override rendering code just to say "don't wrap"?

[sustained]

The way it is now means I have to copy-paste the fence function into my code and I also need to include some of your utils (unescapeAll, escapeHtml) and whenever you update any of that code I also need to sync all of those changes to my version... all of this just to say "don't wrap pre".

That is not a good situation at all. Would you please consider adding an option for people who don't want the wrapping?

[puzrin]

NO.

[sustained]

I see?

[sustained]

This is what I went with anyway, since it's the only solution as things stand:

import { unescapeAll, escapeHtml } from "markdown-it/lib/common/utils";

mdInstance.renderer.rules.fence = function(tokens, idx, options, env, slf) {
  const token = tokens[idx];
  const info = token.info ? unescapeAll(token.info).trim() : "";
  let langName = "";
  let highlighted;

  if (info) {
    langName = info.split(/\s+/g)[0];
  }

  if (options.highlight) {
    highlighted =
      options.highlight(token.content, langName) || escapeHtml(token.content);
  } else {
    highlighted = escapeHtml(token.content);
  }

  return highlighted + "\n";
};

Seems to work for my needs. In case anyone else is wondering how to do it.

[olets]

@puzrin are you open to reconsidering? Currently, markdown-it syntax highlighting plugin authors who support rendering HTML where the outermost element isn't a <pre> have to tell their users to copy, paste, modify, and then maintain a customized version of the default fence rule. That's a lot to ask of a plugin user.

Here's a refactor idea which

• IMO preserves the certainty of the out-of-the-box behavior (see Respect nested <pre> elements in highlighted #927 (comment));

• makes it possible for users to provide their own code block wrapper (this issue's original request) without touching the highlighter source code

• adds a simple switch for opting out of wrapping code blocks altogether (markdownit({ wrapHighlighted: false })) (Syntax highlighting and remove <pre> tag #269 (comment), Respect nested <pre> elements in highlighted #927, using a transformer to add a wrapping element results in extra duplicative nodes shikijs/shiki#811)

The emoji reactions show quite a few people have wanted this over the years.

 

•  // lib/helpers/wrap_highlighted.js
   
   export default function(tokens, idx, options, env, slf, highlighted) {
     // move lib/renderer.mjs#L48-L74 here
   }

  https://github.com/markdown-it/markdown-it/blob/master/lib/renderer.mjs#L48-L74

• Add wrap_highlighted to lib/helpers/index.mjs
  https://github.com/markdown-it/markdown-it/blob/master/lib/helpers/index.mjs

•  // lib/presets/default.mjs
  
   // import wrap_highlighted
  
   export default {
     // …
     wrapHighlighted: wrap_highlighted,
     // …
   }

  https://github.com/markdown-it/markdown-it/blob/master/lib/presets/default.mjs

•  // lib/renderer.mjs
   
   // …
   
   default_rules.fence = function (tokens, idx, options, env, slf) {
     // move lib/renderer.mjs#L30-L46 here
   
     if (options.wrapHighlighted) {
       return options.wrapHighlighted(tokens, idx, options, env, slf, highlighted)
     }
   
     // move lib/renderer.mjs#L49 here
   }
   
   // …

  https://github.com/markdown-it/markdown-it/blob/master/lib/renderer.mjs#L30-L46
  https://github.com/markdown-it/markdown-it/blob/master/lib/renderer.mjs#L49

[olets]

Would still like my suggestion above, but in the meantime I packaged up the wrapperless fence rule as a plugin:

https://github.com/olets/markdown-it-wrapperless-fence-rule

The README has some Stackblitz links