rehype-prism vs rehype-highlight

[chrisrzhou]

I'm working on integrating support for code files through a common step by parsing code source files into a code block. I'm deciding between rehype-prism and rehype-highlight and would like to know which one is better suited within the rehype community.

This is not a discussion of prism.js vs highlight.js, but which flavor of syntax highlighting works better with the rehype ecosystem.

Pasting a very brief pseudocode of the idea I have behind this, just to also get feedback if there's a better way to achieve what I'm doing:

const supportedParsers = {...} // map of mimeTypes to parsers

function inferParser(content, filename) {
  const inferredMimeType = mime(filename);

  let parser = supportedParsers[inferredMimeType]
  // if not an explicitly supported parser, try to parse it into a codeblock for syntax highlighting
  if (!parser) {
    parser = createCodeBlockParser(filename.extension);
  }
}

// pseudocode, but basically nest the doc content under a code block (pre + code nodes) and assign `language-${extension}` as the classname
function createCodeBlockParser(extension) {
  function parse(doc) {
    const tree = {
       type: 'root',
       children: [
         {
           tagName: 'pre',
           children: [
             {
               tagName: 'code',
               children: [{ type: 'text', value: doc }],
               properties: { className: [`language-${extension}`]},
             },
           ]
         }
       ]
     };
  }
  return parse;
}

unified()
  .use(inferParser)
  .use(highlight)  // or lowlight

My main concerns with the approach above (aside from picking either highlight vs lowlight as a plugin), are:

• It seems I need to require the whole of highlight/lowlight with this, unless I find a way to dynamically allow users to specify languages. It's a tradeoff between an opinionated + larger-sized implementation vs a non-opinionated smaller-sized implementation. The project seems to be opinionated anyway, so I think I should lean on convenience rather than bundle size? Or are there any suggestions/feedback on how this could be made customizable?
• relying on the file extension to assign to language-${extension} might not always work, but I can't think of a better way to do this. I think the language-${extension} is just a semantic way to inform the code block about the language of the code in use. Is there a better concept to rely on for what I'm trying to do above?

Thanks and any feedback/guidance on the questions will help me out on this. And let me know what the rehype community prefers as a code syntax highlighting solution!