# Code Block component

## libaries
- [FormidableLabs/prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer)
  - seems to be used by most
  - uses a renderProps component which receives tokens line by line, so highlighting is fairly easy
  - [prism-react-renderer@1.2.0 | BundlePhobia](https://bundlephobia.com/result?p=prism-react-renderer@1.2.0)
- [react-syntax-highlighter/react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter)
  - probably would be lighter
  - [react-syntax-highlighter@15.4.3 | BundlePhobia](https://bundlephobia.com/result?p=react-syntax-highlighter@15.4.3)

## best articles

use Prism
- Prince.dev [Add line highlighting to prism-react-renderer](https://prince.dev/highlight-with-react)
- [tiagofsanchez - Code line highlight with prism-react-renderer](https://www.tiagofsanchez.com/blog/2020-08-06-code-line-highlight-with-prism-react-renderer/)
  - very similar to technique in Docusaurus [Code blocks | Docusaurus](https://docusaurus.io/docs/markdown-features/code-blocks)
  - predicated on [this migration away from remark-prism](https://prince.dev/prism-react-renderer)
  - uses `prism-react-renderer`
  - relies on the `metastring` prop received by `code` in standard MDX
  - seems to apply the same logic as docusaurus' plugin, e.g.
      ```sh
      ```js {1,2,3-4}
      ```
Using rehype
- Pedro Duarte [Pedro Duarte — Code blocks, but better](https://ped.ro/blog/code-blocks-but-better)
  - does all the processing in rehype with refractor
  - uses mdx-bundler, mdx, and custom rehype-meta plugin
  - looks for CLI-like syntax, e.g.
      ```sh
      ```js filename=foobar.js lines=1-3,5-9 showLineNumbers
      ```
  - also adds __word__ highlighting with `__double underscores__` -- probably not necessary