website/src/mdx-components.tsx - main - githubmirror/immutable-js

website/src/mdx-components.tsx

78 строк2 KB

Julien Deniau

Doc as mdx instead of export from .d.ts file (#2104)

24 май 2025, 00:47

24 май 2025, 00:4721de701

import type { MDXComponents } from 'mdx/types';
import Prism from 'prismjs';
import loadLanguages from 'prismjs/components/';

loadLanguages(['ts']);

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    code: ({ className, children, ...rest }) => {
      if (!className) {
        // no classname : no need to handle syntax highlighting
        return <code {...rest}>{children}</code>;
      }

      const language = className.replace('language-', '');
      const html = Prism.highlight(
        String(children).trim(),
        Prism.languages[language] || Prism.languages.plaintext,
        language
      );

      return (
        <code
          className={`codeBlock language-${language}`}
          dangerouslySetInnerHTML={{ __html: html }}
          {...rest}
        />
      );
    },
    MemberLabel: ({ label, alias }: { label: string; alias?: string }) => {
      return (
        <div id={label}>
          <h3 className="memberLabel">
            <a className="anchor" href={`#${label}`}>
              {label}
              <span className="anchorLink">§</span>
            </a>
          </h3>
          {alias && (
            <>
              <h4 className="infoHeader">Alias:</h4>
              <code>{alias}</code>
            </>
          )}
        </div>
      );
    },
    See: ({ code }: { code: string }) => {
      return (
        <>
          <h4>See</h4>
          <code>{code}</code>
        </>
      );
    },
    Signature: ({ code }) => {
      const language = 'ts';
      const html = Prism.highlight(
        String(code).trim(),
        Prism.languages[language],
        language
      );

      return (
        <div>
          <h4>Method signature</h4>
          <pre>
            <code
              className="codeBlock memberSignature"
              dangerouslySetInnerHTML={{ __html: html }}
            />
          </pre>
        </div>
      );
    },
    ...components,
  };
}