# about markdown / mdx processing

## XDM processing

Compiling with XDM / Remark 13
- [wooorm/xdm: a modern MDX compiler](https://github.com/wooorm/xdm#evaluatefile-options)
- [xdm/evaluate.js](https://github.com/wooorm/xdm/blob/main/lib/evaluate.js)
- [How to work with non-file MDX sources? · Issue #23 · wooorm/xdm](https://github.com/wooorm/xdm/issues/23)

    /*
      REMARK PLUGINS
    */
    /*
      gfm
    */
    import remarkGfm from 'remark-gfm';
    import remarkSlug from 'remark-slug'; // apply ids to headings
    /*
      footnotes
    */
    import remarkFootnotes from 'remark-footnotes'; // CONSIDERING: footnote support; use-case unsure so far
    /*
      math
    */
    /*
      emoji
    */
    import remarkEmoji from 'remark-emoji'; // convert :x: style emoji to utf-8 chars
    // import remarkA11yEmoji from '@fec/remark-a11y-emoji'; // wrap emoji in span with [aria-label]
    import remarkBreaks from 'remark-breaks'; // add <br> tags at line breaks in headings and paragraphs
    /*
      frontmatter
      https://github.com/remcohaszing/remark-mdx-frontmatter
      https://github.com/remcohaszing/remark-mdx-frontmatter
    */
    import remarkFrontmatter from 'remark-frontmatter';
    import { remarkMdxFrontmatter } from 'remark-mdx-frontmatter';
    /*
      normalization / cleaning
    */
    import remarkSqueezeParagraphs from 'remark-squeeze-paragraphs'; // remove empty paragraphs
    // require('remark-mark'), // TODO: these don't exist yet for remark 13
    // require('remark-kbd'), // TODO: these don't exist yet for remark 13
    // require('remark-normalize-headings'), // NOTE: fork/copy and use to limit heading level
    // require('remark-truncate-links'), // NOTE: potential idea to convert certain links
    // require('remark-external-links'), // CONSIDERING: add [target] and [rel] per recommendations
    // require('remark-heading-id'), // CONSIDERING: apply custom ids to headings
    /* REHYPE */
    // import rehypeShiki from 'rehype-shiki';


## features and plugins

- frontmatter
  https://github.com/remcohaszing/remark-mdx-frontmatter
  https://github.com/remcohaszing/remark-mdx-frontmatter
- footnotes
- math, katex etc
  node.properties.meta = node.data.meta


## MISC

images
  - using local rehype-figure
  - alternative: unwrap-images https://github.com/remarkjs/remark-unwrap-images/blob/main/index.js
code blocks
  - prism:
headings
  - slug: https://github.com/remarkjs/remark-slug
footnotes
  - https://github.com/remarkjs/remark-footnotes
inline markup
  - additional marks
    - gfm: https://github.com/remarkjs/remark-gfm
    - abbr: remark-abbr
    - kbd, mark: remark-kbd, mark, etc. ? (see docusaurus)
  - typography
    - smartypants https://github.com/silvenon/remark-smartypants
  - emoji
    - emoji: https://github.com/rhysd/remark-emoji
    - a11y-emoji: https://github.com/florianeckerstorfer/remark-a11y-emoji
custom/advanced control
  - remark-directive is more future-proof than fenced-divs or admonitions
    https://github.com/remarkjs/remark-directive


## Syntax Highlighting in MDX

Prism & Highlight.js
- [rehypejs/rehype-highlight](https://github.com/rehypejs/rehype-highlight)
- [mapbox/rehype-prism](https://github.com/mapbox/rehype-prism)
- [sergioramos/remark-prism](https://github.com/sergioramos/remark-prism)
- [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter)

Shiki
- [Shiki](https://shiki.matsu.io/)
- [shikijs/shiki](https://github.com/shikijs/shiki/blob/master/packages/shiki/README.md)
- [rsclarke/rehype-shiki](https://github.com/rsclarke/rehype-shiki)
- hacking shiki for switchable themes
  - [vscode-textmate/theme.ts at 6e5409de4591f1cf52f1862f7b1d1399e1feebb9 · microsoft/vscode-textmate](https://github.com/microsoft/vscode-textmate/blob/6e5409de4591f1cf52f1862f7b1d1399e1feebb9/src/theme.ts#L46-L68)
  - [Ryan Florence on Twitter: "Wheeeeeewwwww I just hacked the heck out out shiki syntax highlighter. It inlines the theme colors into the markup, but that's no good for dark mode. It only allows hex values for theme colors (vscode-textmate really) things but I tricked it to spit out css custom properties!" / Twitter](https://twitter.com/ryanflorence/status/1370985172011675651)

Building the Syntax Highlighting component

https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism-async-light.html
https://github.com/rajinwonderland/react-code-blocks
https://egghead.io/lessons/react-syntax-highlighting-code-blocks-using-components-with-prism-react-renderer-and-gatsby-mdx
https://prismjs.com/
/*
  see
 */