Getting double pre and code elements

[babakfp]

Hi

I'm getting this output by using Shiki and this code #2122 (comment) is there a way to tell marked not to create its pre and code tags?

[UziTech]

You can change the code renderer to not always wrap the code in pre and code tags. This code seems to work:

import { marked } from 'marked';
import shiki from 'shiki';

function markdownToHtml(markdown) {
  return new Promise((resolve, reject) => {
    const markedOptions = {
      highlight: (code, lang, callback) => {
        shiki
          .getHighlighter({ theme: 'nord' })
          .then(highlighter => {
            const result = highlighter.codeToHtml(code, lang);
            callback(null, result);
          })
          .catch(error => callback(error));
      },
      renderer: {
        code(code) {
          if (code.startsWith('<pre')) {
            return code;
          }

          return false;
        }
      }
    };

    const markedCallback = (err, html) => {
      if (err) return reject(err);
      resolve(html);
    };

    marked.use(markedOptions);

    marked(markdown, markedCallback);
  });
}

console.log(await markdownToHtml("```js\nconsole.log('test');\n```\n"));

[babakfp]

I think adding the renderer: { rewrites the whole default code for other elements like heading and etc. And because of that, it throws this error:

renderer.text is not a function

It throws me this error when I have an empty renderer: { object and a basic # Hello, World! heading to render.

[UziTech]

That is why I'm my code sample I use marked.use to set the options instead of sending them in the marked call. marked.use merges the renderer intermittently.

[laygir]

I really need this and somehow can't make it work, will try to get back with a reproduction case. But fwiw, this should (regardless shiki) still work, right?

[UziTech]

You should use marked-highlight to make highlighting code easy in marked.