# rehype-code-meta **A robust Next.js newsletter `Next.js Weekly` is sponsoring me** 💖 [![NextjsWeekly banner](./assets/next-js-weekly.png)](https://nextjsweekly.com/) **An outstanding Git-based CMS `Outstatic` is also sponsoring me** 💖 [![Outstatic banner](./assets/outstatic-banner-dark.jpg)](https://outstatic.com/?utm_source=github&utm_medium=readme&utm_campaign=next-mdx-remote-client) A warm thanks 🙌 to [@ErfanEbrahimnia](https://github.com/ErfanEbrahimnia), [@avitorio](https://github.com/avitorio), [@recepkyk](https://github.com/recepkyk), and [@LSeaburg](https://github.com/LSeaburg) for the [support](https://github.com/sponsors/ipikuka) 💖 --- [![npm version][badge-npm-version]][url-npm-package] [![npm downloads][badge-npm-download]][url-npm-package] [![publish to npm][badge-publish-to-npm]][url-publish-github-actions] [![code-coverage][badge-codecov]][url-codecov] [![type-coverage][badge-type-coverage]][url-github-package] [![typescript][badge-typescript]][url-typescript] [![license][badge-license]][url-license] This package is a **[unified][unified]** (**[rehype][rehype]**) plugin **to copy `code.data.meta` to `code.properties.metastring`**. **[unified][unified]** is a project that transforms content with abstract syntax trees (ASTs) using the new parser **[micromark][micromark]**. **[remark][remark]** adds support for markdown to unified. **[mdast][mdast]** is the Markdown Abstract Syntax Tree (AST) which is a specification for representing markdown in a syntax tree. **[rehype][rehype]** is a tool that transforms HTML with plugins. **[hast][hast]** stands for HTML Abstract Syntax Tree (HAST) that rehype uses. **This plugin finds the `` elements in hast, and copies `code.data.meta` to `code.properties.metastring`.** ## When should I use this? **`rehype-code-meta`** is useful if you use **[rehype-raw][rehype-raw]** (**[hast-util-raw][hast-util-raw]**) since it destroys `code.data.meta`. Use **`rehype-code-meta`** to copy `code.data.meta` to `code.properties.metastring` to preserve tha data before **`rehype-raw`** (**`hast-util-raw`**). Some `rehype` plugins utilize `code.data.meta`. Since **`rehype-raw`** destroys it, that `rehype` plugins also utilize `code.properties.metastring` in case **`rehype-raw`** is in the plugin chain. Don't forget to remove `code.properties.metastring` in the end. The `rehype` plugins that utilize `code.properties.metastring` already remove it in most cases, hence you don't need to do anything. ## Installation This package is suitable for ESM only. In Node.js (version 16+), install with npm: ```bash npm install rehype-code-meta ``` or ```bash yarn add rehype-code-meta ``` ## Usage Say we have the following markdown file, `example.md`, and you want to add line numbering to the code via **`rehype-highlight-code-lines`**. ````markdown ```javascript showLineNumbers const me = "ipikuka"; ``` ```` And our module, `example.js`, looks as follows: ```javascript import { read } from "to-vfile"; import remark from "remark"; import gfm from "remark-gfm"; import remarkRehype from "remark-rehype"; import rehypeCodeMeta from "rehype-code-meta"; import rehypeRaw from "rehype-raw"; import rehypeHighlightCodeLines from "rehype-highlight-code-lines"; import rehypeStringify from "rehype-stringify"; main(); async function main() { const file = await remark() .use(gfm) .use(remarkRehype) .use(rehypeCodeMeta) .use(rehypeRaw) .use(rehypeHighlightCodeLine) .process(await read("example.md")); console.log(String(file)); } ``` Now, running `node example.js` you see that the code lines are numbered thanks to **`rehype-code-meta`**. Otherwise, without **`rehype-code-meta`**, **`rehype-highlight-code-lines`** can't find the information `showLineNumbers` in the `code.data.meta` due to **`rehype-raw`**. ## Options There is no any option. It is opinionated. ## Syntax tree This plugin modifies the `hast` (HTML abstract syntax tree). ## Types This package is fully typed with [TypeScript][url-typescript]. The plugin doesn't export any type. ## Compatibility This plugin works with `rehype-parse` version 1+, `rehype-stringify` version 1+, `rehype` version 1+, and unified version `4+`. ## Security Use of **`rehype-code-meta`** involves rehype (hast), but doesn't lead to cross-site scripting (XSS) attacks. ## My Plugins I like to contribute the Unified / Remark / MDX ecosystem, so I recommend you to have a look my plugins. ### Support My Work ([become a sponsor](https://github.com/sponsors/ipikuka) 🚀) If you find **`rehype-code-meta`** or any of my projects is useful and helpful, please consider supporting my work. Your sponsorship means a lot to me and keeps these projects alive and updated! 💖 My sponsors are going to be featured at the very top of the page and proudly displayed on my [Sponsor Wall](https://github.com/sponsors/ipikuka). Thank you for supporting open source! 🙌 ### My Remark Plugins - [`remark-flexible-code-titles`](https://www.npmjs.com/package/remark-flexible-code-titles) – Remark plugin to add titles or/and containers for the code blocks with customizable properties - [`remark-flexible-containers`](https://www.npmjs.com/package/remark-flexible-containers) – Remark plugin to add custom containers with customizable properties in markdown - [`remark-ins`](https://www.npmjs.com/package/remark-ins) – Remark plugin to add `ins` element in markdown - [`remark-flexible-paragraphs`](https://www.npmjs.com/package/remark-flexible-paragraphs) – Remark plugin to add custom paragraphs with customizable properties in markdown - [`remark-flexible-markers`](https://www.npmjs.com/package/remark-flexible-markers) – Remark plugin to add custom `mark` element with customizable properties in markdown - [`remark-flexible-toc`](https://www.npmjs.com/package/remark-flexible-toc) – Remark plugin to expose the table of contents via `vfile.data` or via an option reference - [`remark-mdx-remove-esm`](https://www.npmjs.com/package/remark-mdx-remove-esm) – Remark plugin to remove import and/or export statements (mdxjsEsm) - [`remark-mdx-remove-expressions`](https://www.npmjs.com/package/remark-mdx-remove-expressions) – Remark plugin to remove MDX expressions within curlybraces {} in MDX content ### My Rehype Plugins - [`rehype-pre-language`](https://www.npmjs.com/package/rehype-pre-language) – Rehype plugin to add language information as a property to `pre` element - [`rehype-highlight-code-lines`](https://www.npmjs.com/package/rehype-highlight-code-lines) – Rehype plugin to add line numbers to code blocks and allow highlighting of desired code lines - [`rehype-code-meta`](https://www.npmjs.com/package/rehype-code-meta) – Rehype plugin to copy `code.data.meta` to `code.properties.metastring` - [`rehype-image-toolkit`](https://www.npmjs.com/package/rehype-image-toolkit) – Rehype plugin to enhance Markdown image syntax `![]()` and Markdown/MDX media elements (``, `