code-hike / codehike

Marvellous code walkthroughs
https://codehike.org
MIT License
4.39k stars 135 forks source link

Exclude certain languages from identified as relevant code blocks #326

Closed gurkerl83 closed 1 year ago

gurkerl83 commented 1 year ago

Codehikes remark plugin converts any code block found in an mdx file. Using code blocks in combination with a library called mermaid allows you to generate e.g. sequence diagrams. When the codehike remark plugin takes all, another plugin, this time using rehype, does not have a chance to catch the original code blocks in raw format because the remark plugin has converted them already.

A nice feature would be a way to tell codehike which languages to skip for processing. The following example shows how it can be done using className, which represents a language.

const visitLanguageMermaid = (node: Element) => {
  if (node.tagName !== 'pre') {
    return;
  }

  const [child] = node.children as Array<Element>;
  if (child?.tagName !== 'code') {
    return;
  }

  const className = child?.properties?.className as Array<string> | undefined;
  if (!className?.includes('language-mermaid')) {
    return;
  }

  /* eslint-disable  no-param-reassign */
  node.properties = {
    ...node.properties,
    className: ['mermaid']
  };
  node.tagName = 'mermaidDiv';
  node.children = child.children;
  /* eslint-enable  no-param-reassign */
};

Thx!

pomber commented 1 year ago

Hi, see: https://codehike.org/docs/configuration#skip-languages

gurkerl83 commented 1 year ago

Wow, thanks for the tip, its working!