# Remark Plugins

Links

- [remark/plugins](https://github.com/remarkjs/remark/blob/main/doc/plugins.md)
- [Create a plugin - unified](https://unifiedjs.com/learn/guide/create-a-plugin/)


## Core Plugins

Remark
- [remark-mdx](https://github.com/mdx-js/mdx/tree/master/packages/remark-mdx)
- [remark-emoji](https://github.com/rhysd/remark-emoji)
- [remark-admonitions](https://github.com/elviswolcott/remark-admonitions)
- [remark-slug](https://github.com/remarkjs/remark-slug)
- [remark-math](https://github.com/remarkjs/remark-math)
- [remark-toc](https://github.com/remarkjs/remark-toc)
- [remark-images](https://github.com/remarkjs/remark-images)
- [remark-smartypants](https://github.com/silvenon/remark-smartypants)

Remark -> GFM
  https://www.gatsbyjs.org/packages/gatsby-remark-github/?=github
  https://github.com/huy-nguyen/remark-github-plugin


## Plugins under Consideration

- react
  - [remarkjs/remark-react: plugin to transform to React](https://github.com/remarkjs/remark-react)
    - use rehype-react instead
  - [rehype-react](https://github.com/rehypejs/rehype-react)
    - needs access to React.createElement
    - runs its conversion on the client side, thus unified etc. must also be present
- headings
  - ✅ [remarkjs/remark-slug: plugin to add anchors to headings using GitHub’s algorithm](https://github.com/remarkjs/remark-slug)
    - use rehype-slug instead
  - ✅ [imcuttle/remark-heading-id: The remark plugin for supporting custom heading id](https://github.com/imcuttle/remark-heading-id)
    - allows customizing heading IDs -- may be better than remark/rehype-slug
    - but would conflict with remark-attrs, when that is updated
  - [remarkjs/remark-normalize-headings: plugin to make sure that there is only one top-level heading by normalising heading depths](https://github.com/remarkjs/remark-normalize-headings)
    - ensures all headings align to H1
  - [remark-behead](https://github.com/mrzmmr/remark-behead)
    - sets min/max heading depth, might work in combination with normalize headings
- code blocks, syntax highlighting
  - [sergioramos/remark-prism: Syntax highlighter for markdown code blocks using Prism](https://github.com/sergioramos/remark-prism)
    - the one being used by docusaurus 🤷🏻‍♂️
  - [rehypejs/rehype-highlight: plugin to highlight code blocks](https://github.com/rehypejs/rehype-highlight)
  - [s0/remark-tree-sitter: Highlight code in Markdown files using tree-sitter and remark](https://github.com/s0/remark-tree-sitter)
    - uses the atom syntax highlighting specs!
  - [mrzmmr/remark-code-blocks: Remark plugin for selecting and storing code blocks from markdown.](https://github.com/mrzmmr/remark-code-blocks)
    - extracts code block from MD so you can do something wiht them
  - [s0/remark-code-extra: Add to or transform the HTML output of markdown code blocks using remark](https://github.com/s0/remark-code-extra)
    - allows adding more stuff to code blocks *AFTER* one of the hightlighters has done their work
  - [unlight/remark-sources: Inserts source code to markdown files](https://github.com/unlight/remark-sources)
    - not needed for CMS content
  - remark-highlight
  - [rehype-highlight](https://github.com/rehypejs/rehype-highlight)
    - works with highlight.js via lowlight
  - [gatsby-remark-vscode](https://github.com/andrewbranch/gatsby-remark-vscode)
    - seems to assume gatsby; annoyingly
    - work to generalize it [may be in process](https://github.com/andrewbranch/gatsby-remark-vscode/issues/99#issuecomment-726656312)
    - [highlighting-only part is here](https://github.com/elviswolcott/vscode-highlight)
- links
  - [remarkjs/remark-inline-links: plugin to transform references and definitions into normal links and images](https://github.com/remarkjs/remark-inline-links)
- footnotes
  - ✅ [remarkjs/remark-footnotes: plugin to add support for pandoc footnotes](https://github.com/remarkjs/remark-footnotes)
    - the official one
  - [jackfletch/remark-numbered-footnote-labels: remark plugin to label footnotes with numbers](https://github.com/jackfletch/remark-numbered-footnote-labels)
    - looks better than the zmarkdown version
- other markup
  - ✅[florianeckerstorfer/remark-a11y-emoji: Remark Plugin to make Emoji in Markdown accessible. Wraps Emoji in a <span>-Tag with role and aria-label attributes.](https://github.com/florianeckerstorfer/remark-a11y-emoji#configuration)
    - wraps emoji characters in span with aria-label
  - [remarkjs/remark-github](https://github.com/remarkjs/remark-github)
    - autolinks references to commits, issues, pull-requests, and users, like on GitHub
  - [remarkjs/remark-math: remark and rehype plugins to support math](https://github.com/remarkjs/remark-math)
    - requires a rehype plugin as well, because it creates `katex` instructions; might want a separate conversion tool
  - [remark-github-plugin](https://github.com/huy-nguyen/remark-github-plugin) (embed gihtub sources directly)
- images, figures, embeds
  - ✅ [remarkjs/remark-images: plugin to add an improved image syntax](https://github.com/remarkjs/remark-images)
    - allows standalone link to an image to be wrapped up in full markdown image syntax
  - ✅ [remarkjs/remark-unwrap-images](https://github.com/remarkjs/remark-unwrap-images)
    - unwraps the paragraph around images, probably useful
  - [agentofuser/remark-oembed: Convert URLs in markdown for youtube, twitter, etc. surrounded by newlines into html embeds](https://github.com/agentofuser/remark-oembed)
    - appealing, if we weren't using MDX
    - fork: [sergioramos/remark-oembed: Converts URLs surrounded by newlines into embeds that are loaded asynchronously](https://github.com/sergioramos/remark-oembed)
- special containers/directives
  - [remarkjs/remark-directive: remark plugin to support directives](https://github.com/remarkjs/remark-directive#use)
    - this enables new syntax proposal, using ::: :: and : and direct indication of html tags
    - only adds info to the AST; requires a further plugin to turn it in to HTML
  - ✅ [benabel/remark-fenced-divs: This plugin aims to imitate the comportment of the pandoc extension fenced_divs in remark.](https://github.com/benabel/remark-fenced-divs)
    - alternative to the above, allows divs with arbitrary classes and IDs