{"id":13484039,"url":"https://github.com/syntax-tree/mdast-util-to-hast","last_synced_at":"2025-05-15T23:03:09.057Z","repository":{"id":39613377,"uuid":"61430144","full_name":"syntax-tree/mdast-util-to-hast","owner":"syntax-tree","description":"utility to transform mdast to hast","archived":false,"fork":false,"pushed_at":"2024-06-07T13:58:18.000Z","size":490,"stargazers_count":108,"open_issues_count":0,"forks_count":43,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-05-15T23:02:03.034Z","etag":null,"topics":["hast","hast-util","html","markdown","mdast","mdast-util","syntax-tree","unist"],"latest_commit_sha":null,"homepage":"https://unifiedjs.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/syntax-tree.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"unifiedjs","open_collective":"unified"}},"created_at":"2016-06-18T11:20:42.000Z","updated_at":"2025-05-14T03:20:48.000Z","dependencies_parsed_at":"2023-07-18T02:08:58.289Z","dependency_job_id":"a3342b22-6d19-4ffe-bcea-cc44470c6738","html_url":"https://github.com/syntax-tree/mdast-util-to-hast","commit_stats":{"total_commits":285,"total_committers":30,"mean_commits":9.5,"dds":"0.11228070175438598","last_synced_commit":"f511a93817b131fb73419bf7d24d73a5b8b0f0c2"},"previous_names":["wooorm/mdast-util-to-hast"],"tags_count":60,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syntax-tree%2Fmdast-util-to-hast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syntax-tree%2Fmdast-util-to-hast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syntax-tree%2Fmdast-util-to-hast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syntax-tree%2Fmdast-util-to-hast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/syntax-tree","download_url":"https://codeload.github.com/syntax-tree/mdast-util-to-hast/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254436944,"owners_count":22070946,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hast","hast-util","html","markdown","mdast","mdast-util","syntax-tree","unist"],"created_at":"2024-07-31T17:01:18.450Z","updated_at":"2025-05-15T23:03:08.849Z","avatar_url":"https://github.com/syntax-tree.png","language":"JavaScript","funding_links":["https://github.com/sponsors/unifiedjs","https://opencollective.com/unified"],"categories":["JavaScript","mdast utilities"],"sub_categories":[],"readme":"# mdast-util-to-hast\n\n[![Build][build-badge]][build]\n[![Coverage][coverage-badge]][coverage]\n[![Downloads][downloads-badge]][downloads]\n[![Size][size-badge]][size]\n[![Sponsors][sponsors-badge]][collective]\n[![Backers][backers-badge]][collective]\n[![Chat][chat-badge]][chat]\n\n[mdast][] utility to transform to [hast][].\n\n## Contents\n\n* [What is this?](#what-is-this)\n* [When should I use this?](#when-should-i-use-this)\n* [Install](#install)\n* [Use](#use)\n* [API](#api)\n  * [`defaultFootnoteBackContent(referenceIndex, rereferenceIndex)`](#defaultfootnotebackcontentreferenceindex-rereferenceindex)\n  * [`defaultFootnoteBackLabel(referenceIndex, rereferenceIndex)`](#defaultfootnotebacklabelreferenceindex-rereferenceindex)\n  * [`defaultHandlers`](#defaulthandlers)\n  * [`toHast(tree[, options])`](#tohasttree-options)\n  * [`FootnoteBackContentTemplate`](#footnotebackcontenttemplate)\n  * [`FootnoteBackLabelTemplate`](#footnotebacklabeltemplate)\n  * [`Handler`](#handler)\n  * [`Handlers`](#handlers)\n  * [`Options`](#options)\n  * [`Raw`](#raw)\n  * [`State`](#state)\n* [Examples](#examples)\n  * [Example: supporting HTML in markdown naïvely](#example-supporting-html-in-markdown-naïvely)\n  * [Example: supporting HTML in markdown properly](#example-supporting-html-in-markdown-properly)\n  * [Example: footnotes in languages other than English](#example-footnotes-in-languages-other-than-english)\n  * [Example: supporting custom nodes](#example-supporting-custom-nodes)\n* [Algorithm](#algorithm)\n  * [Default handling](#default-handling)\n  * [Fields on nodes](#fields-on-nodes)\n* [CSS](#css)\n* [Syntax tree](#syntax-tree)\n  * [Nodes](#nodes)\n* [Types](#types)\n* [Compatibility](#compatibility)\n* [Security](#security)\n* [Related](#related)\n* [Contribute](#contribute)\n* [License](#license)\n\n## What is this?\n\nThis package is a utility that takes an [mdast][] (markdown) syntax tree as\ninput and turns it into a [hast][] (HTML) syntax tree.\n\n## When should I use this?\n\nThis project is useful when you want to deal with ASTs and turn markdown to\nHTML.\n\nThe hast utility [`hast-util-to-mdast`][hast-util-to-mdast] does the inverse of\nthis utility.\nIt turns HTML into markdown.\n\nThe remark plugin [`remark-rehype`][remark-rehype] wraps this utility to also\nturn markdown to HTML at a higher-level (easier) abstraction.\n\n## Install\n\nThis package is [ESM only][esm].\nIn Node.js (version 16+), install with [npm][]:\n\n```sh\nnpm install mdast-util-to-hast\n```\n\nIn Deno with [`esm.sh`][esmsh]:\n\n```js\nimport {toHast} from 'https://esm.sh/mdast-util-to-hast@13'\n```\n\nIn browsers with [`esm.sh`][esmsh]:\n\n```html\n\u003cscript type=\"module\"\u003e\n  import {toHast} from 'https://esm.sh/mdast-util-to-hast@13?bundle'\n\u003c/script\u003e\n```\n\n## Use\n\nSay we have the following `example.md`:\n\n```markdown\n## Hello **World**!\n```\n\n…and next to it a module `example.js`:\n\n```js\nimport {fs} from 'node:fs/promises'\nimport {toHtml} from 'hast-util-to-html'\nimport {fromMarkdown} from 'mdast-util-from-markdown'\nimport {toHast} from 'mdast-util-to-hast'\n\nconst markdown = String(await fs.readFile('example.md'))\nconst mdast = fromMarkdown(markdown)\nconst hast = toHast(mdast)\nconst html = toHtml(hast)\n\nconsole.log(html)\n```\n\n…now running `node example.js` yields:\n\n```html\n\u003ch2\u003eHello \u003cstrong\u003eWorld\u003c/strong\u003e!\u003c/h2\u003e\n```\n\n## API\n\nThis package exports the identifiers\n[`defaultFootnoteBackContent`][api-default-footnote-back-content],\n[`defaultFootnoteBackLabel`][api-default-footnote-back-label],\n[`defaultHandlers`][api-default-handlers], and\n[`toHast`][api-to-hast].\nThere is no default export.\n\n### `defaultFootnoteBackContent(referenceIndex, rereferenceIndex)`\n\nGenerate the default content that GitHub uses on backreferences.\n\n###### Parameters\n\n* `referenceIndex` (`number`)\n  — index of the definition in the order that they are first referenced,\n  0-indexed\n* `rereferenceIndex` (`number`)\n  — index of calls to the same definition, 0-indexed\n\n###### Returns\n\nContent (`Array\u003cElementContent\u003e`).\n\n### `defaultFootnoteBackLabel(referenceIndex, rereferenceIndex)`\n\nGenerate the default label that GitHub uses on backreferences.\n\n###### Parameters\n\n* `referenceIndex` (`number`)\n  — index of the definition in the order that they are first referenced,\n  0-indexed\n* `rereferenceIndex` (`number`)\n  — index of calls to the same definition, 0-indexed\n\n###### Returns\n\nLabel (`string`).\n\n### `defaultHandlers`\n\nDefault handlers for nodes ([`Handlers`][api-handlers]).\n\n### `toHast(tree[, options])`\n\nTransform mdast to hast.\n\n###### Parameters\n\n* `tree` ([`MdastNode`][mdast-node])\n  — mdast tree\n* `options` ([`Options`][api-options], optional)\n  — configuration\n\n###### Returns\n\nhast tree ([`HastNode`][hast-node]).\n\n##### Notes\n\n###### HTML\n\nRaw HTML is available in mdast as [`html`][mdast-html] nodes and can be embedded\nin hast as semistandard `raw` nodes.\nMost utilities ignore `raw` nodes but two notable ones don’t:\n\n* [`hast-util-to-html`][hast-util-to-html] also has an option\n  `allowDangerousHtml` which will output the raw HTML.\n  This is typically discouraged as noted by the option name but is useful if\n  you completely trust authors\n* [`hast-util-raw`][hast-util-raw] can handle the raw embedded HTML strings by\n  parsing them into standard hast nodes (`element`, `text`, etc).\n  This is a heavy task as it needs a full HTML parser, but it is the only way\n  to support untrusted content\n\n###### Footnotes\n\nMany options supported here relate to footnotes.\nFootnotes are not specified by CommonMark, which we follow by default.\nThey are supported by GitHub, so footnotes can be enabled in markdown with\n[`mdast-util-gfm`][mdast-util-gfm].\n\nThe options `footnoteBackLabel` and `footnoteLabel` define natural language\nthat explains footnotes, which is hidden for sighted users but shown to\nassistive technology.\nWhen your page is not in English, you must define translated values.\n\nBack references use ARIA attributes, but the section label itself uses a\nheading that is hidden with an `sr-only` class.\nTo show it to sighted users, define different attributes in\n`footnoteLabelProperties`.\n\n###### Clobbering\n\nFootnotes introduces a problem, as it links footnote calls to footnote\ndefinitions on the page through `id` attributes generated from user content,\nwhich results in DOM clobbering.\n\nDOM clobbering is this:\n\n```html\n\u003cp id=x\u003e\u003c/p\u003e\n\u003cscript\u003ealert(x) // `x` now refers to the DOM `p#x` element\u003c/script\u003e\n```\n\nElements by their ID are made available by browsers on the `window` object,\nwhich is a security risk.\nUsing a prefix solves this problem.\n\nMore information on how to handle clobbering and the prefix is explained in\n[Example: headings (DOM clobbering) in `rehype-sanitize`][clobber-example].\n\n###### Unknown nodes\n\nUnknown nodes are nodes with a type that isn’t in `handlers` or `passThrough`.\nThe default behavior for unknown nodes is:\n\n* when the node has a `value` (and doesn’t have `data.hName`,\n  `data.hProperties`, or `data.hChildren`, see later), create a hast `text`\n  node\n* otherwise, create a `\u003cdiv\u003e` element (which could be changed with\n  `data.hName`), with its children mapped from mdast to hast as well\n\nThis behavior can be changed by passing an `unknownHandler`.\n\n### `FootnoteBackContentTemplate`\n\nGenerate content for the backreference dynamically.\n\nFor the following markdown:\n\n```markdown\nAlpha[^micromark], bravo[^micromark], and charlie[^remark].\n\n[^remark]: things about remark\n[^micromark]: things about micromark\n```\n\nThis function will be called with:\n\n* `0` and `0` for the backreference from `things about micromark` to\n  `alpha`, as it is the first used definition, and the first call to it\n* `0` and `1` for the backreference from `things about micromark` to\n  `bravo`, as it is the first used definition, and the second call to it\n* `1` and `0` for the backreference from `things about remark` to\n  `charlie`, as it is the second used definition\n\n###### Parameters\n\n* `referenceIndex` (`number`)\n  — index of the definition in the order that they are first referenced,\n  0-indexed\n* `rereferenceIndex` (`number`)\n  — index of calls to the same definition, 0-indexed\n\n###### Returns\n\nContent for the backreference when linking back from definitions to their\nreference (`Array\u003cElementContent\u003e`, `ElementContent`, or `string`).\n\n### `FootnoteBackLabelTemplate`\n\nGenerate a back label dynamically.\n\nFor the following markdown:\n\n```markdown\nAlpha[^micromark], bravo[^micromark], and charlie[^remark].\n\n[^remark]: things about remark\n[^micromark]: things about micromark\n```\n\nThis function will be called with:\n\n* `0` and `0` for the backreference from `things about micromark` to\n  `alpha`, as it is the first used definition, and the first call to it\n* `0` and `1` for the backreference from `things about micromark` to\n  `bravo`, as it is the first used definition, and the second call to it\n* `1` and `0` for the backreference from `things about remark` to\n  `charlie`, as it is the second used definition\n\n###### Parameters\n\n* `referenceIndex` (`number`)\n  — index of the definition in the order that they are first referenced,\n  0-indexed\n* `rereferenceIndex` (`number`)\n  — index of calls to the same definition, 0-indexed\n\n###### Returns\n\nBack label to use when linking back from definitions to their reference\n(`string`).\n\n### `Handler`\n\nHandle a node (TypeScript type).\n\n###### Parameters\n\n* `state` ([`State`][api-state])\n  — info passed around\n* `node` ([`MdastNode`][mdast-node])\n  — node to handle\n* `parent` ([`MdastNode | undefined`][mdast-node])\n  — parent of `node`\n\n###### Returns\n\nResult ([`Array\u003cHastNode\u003e | HastNode | undefined`][hast-node]).\n\n### `Handlers`\n\nHandle nodes (TypeScript type).\n\n###### Type\n\n```ts\ntype Handlers = Partial\u003cRecord\u003cNodes['type'], Handler\u003e\u003e\n```\n\n### `Options`\n\nConfiguration (TypeScript type).\n\n###### Fields\n\n* `allowDangerousHtml` (`boolean`, default: `false`)\n  — whether to persist raw HTML in markdown in the hast tree\n* `clobberPrefix` (`string`, default: `'user-content-'`)\n  — prefix to use before the `id` property on footnotes to prevent them from\n  *clobbering*\n* `file` ([`VFile`][vfile], optional)\n  — corresponding virtual file representing the input document\n* `footnoteBackContent`\n  ([`FootnoteBackContentTemplate`][api-footnote-back-content-template]\n  or `string`, default:\n  [`defaultFootnoteBackContent`][api-default-footnote-back-content])\n  — content of the backreference back to references\n* `footnoteBackLabel`\n  ([`FootnoteBackLabelTemplate`][api-footnote-back-label-template]\n  or `string`, default:\n  [`defaultFootnoteBackLabel`][api-default-footnote-back-label])\n  — label to describe the backreference back to references\n* `footnoteLabel` (`string`, default: `'Footnotes'`)\n  — label to use for the footnotes section (affects screen readers)\n* `footnoteLabelProperties`\n  ([`Properties`][properties], default: `{className: ['sr-only']}`)\n  — properties to use on the footnote label\n  (note that `id: 'footnote-label'` is always added as footnote calls use it\n  with `aria-describedby` to provide an accessible label)\n* `footnoteLabelTagName` (`string`, default: `h2`)\n  — tag name to use for the footnote label\n* `handlers` ([`Handlers`][api-handlers], optional)\n  — extra handlers for nodes\n* `passThrough` (`Array\u003cNodes['type']\u003e`, optional)\n  — list of custom mdast node types to pass through (keep) in hast (note that\n  the node itself is passed, but eventual children are transformed)\n* `unknownHandler` ([`Handler`][api-handler], optional)\n  — handle all unknown nodes\n\n### `Raw`\n\nRaw string of HTML embedded into HTML AST (TypeScript type).\n\n###### Type\n\n```ts\nimport type {Data, Literal} from 'hast'\n\ninterface Raw extends Literal {\n  type: 'raw'\n  data?: RawData | undefined\n}\n\ninterface RawData extends Data {}\n```\n\n### `State`\n\nInfo passed around about the current state (TypeScript type).\n\n###### Fields\n\n* `all` (`(node: MdastNode) =\u003e Array\u003cHastNode\u003e`)\n  — transform the children of an mdast parent to hast\n* `applyData` (`\u003cType extends HastNode\u003e(from: MdastNode, to: Type) =\u003e Type | HastElement`)\n  — honor the `data` of `from` and maybe generate an element instead of `to`\n* `definitionById` (`Map\u003cstring, Definition\u003e`)\n  — definitions by their uppercased identifier\n* `footnoteById` (`Map\u003cstring, FootnoteDefinition\u003e`)\n  — footnote definitions by their uppercased identifier\n* `footnoteCounts` (`Map\u003cstring, number\u003e`)\n  — counts for how often the same footnote was called\n* `footnoteOrder` (`Array\u003cstring\u003e`)\n  — identifiers of order when footnote calls first appear in tree order\n* `handlers` ([`Handlers`][api-handlers])\n  — applied node handlers\n* `one` (`(node: MdastNode, parent: MdastNode | undefined) =\u003e HastNode | Array\u003cHastNode\u003e | undefined`)\n  — transform an mdast node to hast\n* `options` ([`Options`][api-options])\n  — configuration\n* `patch` (`(from: MdastNode, to: HastNode) =\u003e undefined`)\n* `wrap` (`\u003cType extends HastNode\u003e(nodes: Array\u003cType\u003e, loose?: boolean) =\u003e Array\u003cType | HastText\u003e`)\n  — wrap `nodes` with line endings between each node, adds initial/final line\n  endings when `loose`\n\n## Examples\n\n### Example: supporting HTML in markdown naïvely\n\nIf you completely trust authors (or plugins) and want to allow them to HTML *in*\nmarkdown, and the last utility has an `allowDangerousHtml` option as well (such\nas `hast-util-to-html`) you can pass `allowDangerousHtml` to this utility\n(`mdast-util-to-hast`):\n\n```js\nimport {fromMarkdown} from 'mdast-util-from-markdown'\nimport {toHast} from 'mdast-util-to-hast'\nimport {toHtml} from 'hast-util-to-html'\n\nconst markdown = 'It \u003ci\u003eworks\u003c/i\u003e! \u003cimg onerror=\"alert(1)\"\u003e'\nconst mdast = fromMarkdown(markdown)\nconst hast = toHast(mdast, {allowDangerousHtml: true})\nconst html = toHtml(hast, {allowDangerousHtml: true})\n\nconsole.log(html)\n```\n\n…now running `node example.js` yields:\n\n```html\n\u003cp\u003eIt \u003ci\u003eworks\u003c/i\u003e! \u003cimg onerror=\"alert(1)\"\u003e\u003c/p\u003e\n```\n\n\u003e ⚠️ **Danger**: observe that the XSS attack through the `onerror` attribute\n\u003e is still present.\n\n### Example: supporting HTML in markdown properly\n\nIf you do not trust the authors of the input markdown, or if you want to make\nsure that further utilities can see HTML embedded in markdown, use\n[`hast-util-raw`][hast-util-raw].\nThe following example passes `allowDangerousHtml` to this utility\n(`mdast-util-to-hast`), then turns the raw embedded HTML into proper HTML nodes\n(`hast-util-raw`), and finally sanitizes the HTML by only allowing safe things\n(`hast-util-sanitize`):\n\n```js\nimport {raw} from 'hast-util-raw'\nimport {sanitize} from 'hast-util-sanitize'\nimport {toHtml} from 'hast-util-to-html'\nimport {fromMarkdown} from 'mdast-util-from-markdown'\nimport {toHast} from 'mdast-util-to-hast'\n\nconst markdown = 'It \u003ci\u003eworks\u003c/i\u003e! \u003cimg onerror=\"alert(1)\"\u003e'\nconst mdast = fromMarkdown(markdown)\nconst hast = raw(toHast(mdast, {allowDangerousHtml: true}))\nconst safeHast = sanitize(hast)\nconst html = toHtml(safeHast)\n\nconsole.log(html)\n```\n\n…now running `node example.js` yields:\n\n```html\n\u003cp\u003eIt \u003ci\u003eworks\u003c/i\u003e! \u003cimg\u003e\u003c/p\u003e\n```\n\n\u003e 👉 **Note**: observe that the XSS attack through the `onerror` attribute\n\u003e is no longer present.\n\n### Example: footnotes in languages other than English\n\nIf you know that the markdown is authored in a language other than English,\nand you’re using `micromark-extension-gfm` and `mdast-util-gfm` to match how\nGitHub renders markdown, and you know that footnotes are (or can?) be used, you\nshould translate the labels associated with them.\n\nLet’s first set the stage:\n\n```js\nimport {toHtml} from 'hast-util-to-html'\nimport {gfm} from 'micromark-extension-gfm'\nimport {fromMarkdown} from 'mdast-util-from-markdown'\nimport {gfmFromMarkdown} from 'mdast-util-gfm'\nimport {toHast} from 'mdast-util-to-hast'\n\nconst markdown = 'Bonjour[^1]\\n\\n[^1]: Monde!'\nconst mdast = fromMarkdown(markdown, {\n  extensions: [gfm()],\n  mdastExtensions: [gfmFromMarkdown()]\n})\nconst hast = toHast(mdast)\nconst html = toHtml(hast)\n\nconsole.log(html)\n```\n\n…now running `node example.js` yields:\n\n```html\n\u003cp\u003eBonjour\u003csup\u003e\u003ca href=\"#user-content-fn-1\" id=\"user-content-fnref-1\" data-footnote-ref aria-describedby=\"footnote-label\"\u003e1\u003c/a\u003e\u003c/sup\u003e\u003c/p\u003e\n\u003csection data-footnotes class=\"footnotes\"\u003e\u003ch2 class=\"sr-only\" id=\"footnote-label\"\u003eFootnotes\u003c/h2\u003e\n\u003col\u003e\n\u003cli id=\"user-content-fn-1\"\u003e\n\u003cp\u003eMonde! \u003ca href=\"#user-content-fnref-1\" data-footnote-backref=\"\" aria-label=\"Back to reference 1\" class=\"data-footnote-backref\"\u003e↩\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\u003c/section\u003e\n```\n\nThis is a mix of English and French that screen readers can’t handle nicely.\nLet’s say our program does know that the markdown is in French.\nIn that case, it’s important to translate and define the labels relating to\nfootnotes so that screen reader users can properly pronounce the page:\n\n```diff\n@@ -9,7 +9,16 @@ const mdast = fromMarkdown(markdown, {\n   extensions: [gfm()],\n   mdastExtensions: [gfmFromMarkdown()]\n })\n-const hast = toHast(mdast)\n+const hast = toHast(mdast, {\n+  footnoteLabel: 'Notes de bas de page',\n+  footnoteBackLabel(referenceIndex, rereferenceIndex) {\n+    return (\n+      'Retour à la référence ' +\n+      (referenceIndex + 1) +\n+      (rereferenceIndex \u003e 1 ? '-' + rereferenceIndex : '')\n+    )\n+  }\n+})\n const html = toHtml(hast)\n\n console.log(html)\n```\n\n…now running `node example.js` with the above patch applied yields:\n\n```diff\n@@ -1,8 +1,8 @@\n \u003cp\u003eBonjour\u003csup\u003e\u003ca href=\"#user-content-fn-1\" id=\"user-content-fnref-1\" data-footnote-ref aria-describedby=\"footnote-label\"\u003e1\u003c/a\u003e\u003c/sup\u003e\u003c/p\u003e\n-\u003csection data-footnotes class=\"footnotes\"\u003e\u003ch2 class=\"sr-only\" id=\"footnote-label\"\u003eFootnotes\u003c/h2\u003e\n+\u003csection data-footnotes class=\"footnotes\"\u003e\u003ch2 class=\"sr-only\" id=\"footnote-label\"\u003eNotes de bas de page\u003c/h2\u003e\n \u003col\u003e\n \u003cli id=\"user-content-fn-1\"\u003e\n-\u003cp\u003eMonde! \u003ca href=\"#user-content-fnref-1\" data-footnote-backref=\"\" aria-label=\"Back to reference 1\" class=\"data-footnote-backref\"\u003e↩\u003c/a\u003e\u003c/p\u003e\n+\u003cp\u003eMonde! \u003ca href=\"#user-content-fnref-1\" data-footnote-backref=\"\" aria-label=\"Retour à la référence 1\" class=\"data-footnote-backref\"\u003e↩\u003c/a\u003e\u003c/p\u003e\n \u003c/li\u003e\n \u003c/ol\u003e\n \u003c/section\u003e\n```\n\n### Example: supporting custom nodes\n\nThis project supports CommonMark and the GFM constructs (footnotes,\nstrikethrough, tables) and the frontmatter constructs YAML and TOML.\nSupport can be extended to other constructs in two ways: a) with handlers, b)\nthrough fields on nodes.\n\nFor example, when we represent a mark element in markdown and want to turn it\ninto a `\u003cmark\u003e` element in HTML, we can use a handler:\n\n```js\nimport {toHtml} from 'hast-util-to-html'\nimport {toHast} from 'mdast-util-to-hast'\n\nconst mdast = {\n  type: 'paragraph',\n  children: [{type: 'mark', children: [{type: 'text', value: 'x'}]}]\n}\n\nconst hast = toHast(mdast, {\n  handlers: {\n    mark(state, node) {\n      return {\n        type: 'element',\n        tagName: 'mark',\n        properties: {},\n        children: state.all(node)\n      }\n    }\n  }\n})\n\nconsole.log(toHtml(hast))\n```\n\nWe can do the same through certain fields on nodes:\n\n```js\nimport {toHtml} from 'hast-util-to-html'\nimport {toHast} from 'mdast-util-to-hast'\n\nconst mdast = {\n  type: 'paragraph',\n  children: [\n    {\n      type: 'mark',\n      children: [{type: 'text', value: 'x'}],\n      data: {hName: 'mark'}\n    }\n  ]\n}\n\nconsole.log(toHtml(toHast(mdast)))\n```\n\n## Algorithm\n\nThis project by default handles CommonMark, GFM (footnotes, strikethrough,\ntables) and common frontmatter (YAML, TOML).\n\nExisting handlers can be overwritten and handlers for more nodes can be added.\nIt’s also possible to define how mdast is turned into hast through fields on\nnodes.\n\n### Default handling\n\nThe following table gives insight into what input turns into what output:\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth scope=\"col\"\u003emdast node\u003c/th\u003e\n\u003cth scope=\"col\"\u003emarkdown example\u003c/th\u003e\n\u003cth scope=\"col\"\u003ehast node\u003c/th\u003e\n\u003cth scope=\"col\"\u003ehtml example\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003cth scope=\"row\"\u003e\n\n[`blockquote`](https://github.com/syntax-tree/mdast#blockquote)\n\n\u003c/th\u003e\n\u003ctd\u003e\n\n```markdown\n\u003e A greater than…\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n[`element`](https://github.com/syntax-tree/hast#element) (`blockquote`)\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cblockquote\u003e\n\u003cp\u003eA greater than…\u003c/p\u003e\n\u003c/blockquote\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003cth scope=\"row\"\u003e\n\n[`break`](https://github.com/syntax-tree/mdast#break)\n\n\u003c/th\u003e\n\u003ctd\u003e\n\n```markdown\nA backslash\\\nbefore a line break…\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n[`element`](https://github.com/syntax-tree/hast#element) (`br`)\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cp\u003eA backslash\u003cbr\u003e\nbefore a line break…\u003c/p\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003cth scope=\"row\"\u003e\n\n[`code`](https://github.com/syntax-tree/mdast#code)\n\n\u003c/th\u003e\n\u003ctd\u003e\n\n````markdown\n```js\nbacktick.fences('for blocks')\n```\n````\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n[`element`](https://github.com/syntax-tree/hast#element) (`pre` and `code`)\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cpre\u003e\u003ccode className=\"language-js\"\u003ebacktick.fences('for blocks')\n\u003c/code\u003e\u003c/pre\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003cth scope=\"row\"\u003e\n\n[`delete`](https://github.com/syntax-tree/mdast#delete) (GFM)\n\n\u003c/th\u003e\n\u003ctd\u003e\n\n```markdown\nTwo ~~tildes~~ for delete.\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n[`element`](https://github.com/syntax-tree/hast#element) (`del`)\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cp\u003eTwo \u003cdel\u003etildes\u003c/del\u003e for delete.\u003c/p\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003cth scope=\"row\"\u003e\n\n[`emphasis`](https://github.com/syntax-tree/mdast#emphasis)\n\n\u003c/th\u003e\n\u003ctd\u003e\n\n```markdown\nSome *asterisks* for emphasis.\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n[`element`](https://github.com/syntax-tree/hast#element) (`em`)\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cp\u003eSome \u003cem\u003easterisks\u003c/em\u003e for emphasis.\u003c/p\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003cth scope=\"row\"\u003e\n\n[`footnoteReference`](https://github.com/syntax-tree/mdast#footnotereference),\n[`footnoteDefinition`](https://github.com/syntax-tree/mdast#footnotedefinition)\n(GFM)\n\n\u003c/th\u003e\n\u003ctd\u003e\n\n```markdown\nWith a [^caret].\n\n[^caret]: Stuff\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n[`element`](https://github.com/syntax-tree/hast#element) (`section`, `sup`, `a`)\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cp\u003eWith a \u003csup\u003e\u003ca href=\"#fn-caret\" …\u003e1\u003c/a\u003e\u003c/sup\u003e.\u003c/p\u003e…\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003cth scope=\"row\"\u003e\n\n[`heading`](https://github.com/syntax-tree/mdast#heading)\n\n\u003c/th\u003e\n\u003ctd\u003e\n\n```markdown\n# One number sign…\n###### Six number signs…\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n[`element`](https://github.com/syntax-tree/hast#element) (`h1`…`h6`)\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003ch1\u003eOne number sign…\u003c/h1\u003e\n\u003ch6\u003eSix number signs…\u003c/h6\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003cth scope=\"row\"\u003e\n\n[`html`](https://github.com/syntax-tree/mdast#html)\n\n\u003c/th\u003e\n\u003ctd\u003e\n\n```html\n\u003ckbd\u003eCMD+S\u003c/kbd\u003e\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\nNothing (default), `raw` (when `allowDangerousHtml: true`)\n\n\u003c/td\u003e\n\u003ctd\u003e\n\nn/a\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003cth scope=\"row\"\u003e\n\n[`image`](https://github.com/syntax-tree/mdast#image)\n\n\u003c/th\u003e\n\u003ctd\u003e\n\n```markdown\n![Alt text](/logo.png \"title\")\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n[`element`](https://github.com/syntax-tree/hast#element) (`img`)\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cp\u003e\u003cimg src=\"/logo.png\" alt=\"Alt text\" title=\"title\"\u003e\u003c/p\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003cth scope=\"row\"\u003e\n\n[`imageReference`](https://github.com/syntax-tree/mdast#imagereference),\n[`definition`](https://github.com/syntax-tree/mdast#definition)\n\n\u003c/th\u003e\n\u003ctd\u003e\n\n```markdown\n![Alt text][logo]\n\n[logo]: /logo.png \"title\"\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n[`element`](https://github.com/syntax-tree/hast#element) (`img`)\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cp\u003e\u003cimg src=\"/logo.png\" alt=\"Alt text\" title=\"title\"\u003e\u003c/p\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003cth scope=\"row\"\u003e\n\n[`inlineCode`](https://github.com/syntax-tree/mdast#inlinecode)\n\n\u003c/th\u003e\n\u003ctd\u003e\n\n```markdown\nSome `backticks` for inline code.\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n[`element`](https://github.com/syntax-tree/hast#element) (`code`)\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cp\u003eSome \u003ccode\u003ebackticks\u003c/code\u003e for inline code.\u003c/p\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003cth scope=\"row\"\u003e\n\n[`link`](https://github.com/syntax-tree/mdast#link)\n\n\u003c/th\u003e\n\u003ctd\u003e\n\n```markdown\n[Example](https://example.com \"title\")\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n[`element`](https://github.com/syntax-tree/hast#element) (`a`)\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cp\u003e\u003ca href=\"https://example.com\" title=\"title\"\u003eExample\u003c/a\u003e\u003c/p\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003cth scope=\"row\"\u003e\n\n[`linkReference`](https://github.com/syntax-tree/mdast#linkreference),\n[`definition`](https://github.com/syntax-tree/mdast#definition)\n\n\u003c/th\u003e\n\u003ctd\u003e\n\n```markdown\n[Example][]\n\n[example]: https://example.com \"title\"\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n[`element`](https://github.com/syntax-tree/hast#element) (`a`)\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cp\u003e\u003ca href=\"https://example.com\" title=\"title\"\u003eExample\u003c/a\u003e\u003c/p\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003cth scope=\"row\"\u003e\n\n[`list`](https://github.com/syntax-tree/mdast#list),\n[`listItem`](https://github.com/syntax-tree/mdast#listitem)\n\n\u003c/th\u003e\n\u003ctd\u003e\n\n```markdown\n* asterisks for unordered items\n\n1. decimals and a dot for ordered items\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n[`element`](https://github.com/syntax-tree/hast#element) (`li` and `ol` or `ul`)\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cul\u003e\n\u003cli\u003easterisks for unordered items\u003c/li\u003e\n\u003c/ul\u003e\n\u003col\u003e\n\u003cli\u003edecimals and a dot for ordered items\u003c/li\u003e\n\u003c/ol\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003cth scope=\"row\"\u003e\n\n[`paragraph`](https://github.com/syntax-tree/mdast#paragraph)\n\n\u003c/th\u003e\n\u003ctd\u003e\n\n```markdown\nJust some text…\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n[`element`](https://github.com/syntax-tree/hast#element) (`p`)\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cp\u003eJust some text…\u003c/p\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003cth scope=\"row\"\u003e\n\n[`root`](https://github.com/syntax-tree/mdast#root)\n\n\u003c/th\u003e\n\u003ctd\u003e\n\n```markdown\nAnything!\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n[`root`](https://github.com/syntax-tree/hast#root)\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cp\u003eAnything!\u003c/p\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003cth scope=\"row\"\u003e\n\n[`strong`](https://github.com/syntax-tree/mdast#strong)\n\n\u003c/th\u003e\n\u003ctd\u003e\n\n```markdown\nTwo **asterisks** for strong.\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n[`element`](https://github.com/syntax-tree/hast#element) (`strong`)\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cp\u003eTwo \u003cstrong\u003easterisks\u003c/strong\u003e for strong.\u003c/p\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003cth scope=\"row\"\u003e\n\n[`text`](https://github.com/syntax-tree/mdast#text)\n\n\u003c/th\u003e\n\u003ctd\u003e\n\n```markdown\nAnything!\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n[`text`](https://github.com/syntax-tree/hast#text)\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cp\u003eAnything!\u003c/p\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003cth scope=\"row\"\u003e\n\n[`table`](https://github.com/syntax-tree/mdast#table),\n[`tableRow`](https://github.com/syntax-tree/mdast#tablerow),\n[`tableCell`](https://github.com/syntax-tree/mdast#tablecell)\n\n\u003c/th\u003e\n\u003ctd\u003e\n\n```markdown\n| Pipes |\n| ----- |\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n[`element`](https://github.com/syntax-tree/hast#element) (`table`, `thead`,\n`tbody`, `tr`, `td`, `th`)\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003ePipes\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003c/table\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003cth scope=\"row\"\u003e\n\n[`thematicBreak`](https://github.com/syntax-tree/mdast#thematicbreak)\n\n\u003c/th\u003e\n\u003ctd\u003e\n\n```markdown\nThree asterisks for a thematic break:\n\n***\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n[`element`](https://github.com/syntax-tree/hast#element) (`hr`)\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cp\u003eThree asterisks for a thematic break:\u003c/p\u003e\n\u003chr\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003cth scope=\"row\"\u003e\n\n`toml` (frontmatter)\n\n\u003c/th\u003e\n\u003ctd\u003e\n\n```markdown\n+++\nfenced = true\n+++\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\nNothing\n\n\u003c/td\u003e\n\u003ctd\u003e\n\nn/a\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003cth scope=\"row\"\u003e\n\n[`yaml`](https://github.com/syntax-tree/mdast#yaml) (frontmatter)\n\n\u003c/th\u003e\n\u003ctd\u003e\n\n```markdown\n---\nfenced: yes\n---\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\nNothing\n\n\u003c/td\u003e\n\u003ctd\u003e\n\nn/a\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003e 👉 **Note**: GFM prescribes that the obsolete `align` attribute on `td` and\n\u003e `th` elements is used.\n\u003e To use `style` attributes instead of obsolete features, combine this utility\n\u003e with [`@mapbox/hast-util-table-cell-style`][hast-util-table-cell-style].\n\n\u003e 🧑‍🏫 **Info**: this project is concerned with turning one syntax tree into\n\u003e another.\n\u003e It does not deal with markdown syntax or HTML syntax.\n\u003e The preceding examples are illustrative rather than authoritative or\n\u003e exhaustive.\n\n### Fields on nodes\n\nA frequent problem arises when having to turn one syntax tree into another.\nAs the original tree (in this case, mdast for markdown) is in some cases\nlimited compared to the destination (in this case, hast for HTML) tree,\nis it possible to provide more info in the original to define what the\nresult will be in the destination?\nThis is possible by defining data on mdast nodes, which this utility will read\nas instructions on what hast nodes to create.\n\nAn example is math, which is a nonstandard markdown extension, that this utility\ndoesn’t understand.\nTo solve this, `mdast-util-math` defines instructions on mdast nodes that this\nplugin does understand because they define a certain hast structure.\n\nThe following fields can be used:\n\n* `node.data.hName` — define the element’s tag name\n* `node.data.hProperties` — define extra properties to use\n* `node.data.hChildren` — define hast children to use\n\n###### `hName`\n\n`node.data.hName` sets the tag name of an element.\nThe following [mdast][]:\n\n```js\n{\n  type: 'strong',\n  data: {hName: 'b'},\n  children: [{type: 'text', value: 'Alpha'}]\n}\n```\n\n…yields ([hast][]):\n\n```js\n{\n  type: 'element',\n  tagName: 'b',\n  properties: {},\n  children: [{type: 'text', value: 'Alpha'}]\n}\n```\n\n###### `hProperties`\n\n`node.data.hProperties` sets the properties of an element.\nThe following [mdast][]:\n\n```js\n{\n  type: 'image',\n  src: 'circle.svg',\n  alt: 'Big red circle on a black background',\n  data: {hProperties: {className: ['responsive']}}\n}\n```\n\n…yields ([hast][]):\n\n```js\n{\n  type: 'element',\n  tagName: 'img',\n  properties: {\n    src: 'circle.svg',\n    alt: 'Big red circle on a black background',\n    className: ['responsive']\n  },\n  children: []\n}\n```\n\n###### `hChildren`\n\n`node.data.hChildren` sets the children of an element.\nThe following [mdast][]:\n\n```js\n{\n  type: 'code',\n  lang: 'js',\n  data: {\n    hChildren: [\n      {\n        type: 'element',\n        tagName: 'span',\n        properties: {className: ['hljs-meta']},\n        children: [{type: 'text', value: '\"use strict\"'}]\n      },\n      {type: 'text', value: ';'}\n    ]\n  },\n  value: '\"use strict\";'\n}\n```\n\n…yields ([hast][]):\n\n```js\n{\n  type: 'element',\n  tagName: 'pre',\n  properties: {},\n  children: [{\n    type: 'element',\n    tagName: 'code',\n    properties: {className: ['language-js']},\n    children: [\n      {\n        type: 'element',\n        tagName: 'span',\n        properties: {className: ['hljs-meta']},\n        children: [{type: 'text', value: '\"use strict\"'}]\n      },\n      {type: 'text', value: ';'}\n    ]\n  }]\n}\n```\n\n\u003e 👉 **Note**: the `pre` and `language-js` class are normal `mdast-util-to-hast`\n\u003e functionality.\n\n## CSS\n\nAssuming you know how to use (semantic) HTML and CSS, then it should generally\nbe straightforward to style the HTML produced by this plugin.\nWith CSS, you can get creative and style the results as you please.\n\nSome semistandard features, notably GFMs tasklists and footnotes, generate HTML\nthat be unintuitive, as it matches exactly what GitHub produces for their\nwebsite.\nThere is a project, [`sindresorhus/github-markdown-css`][github-markdown-css],\nthat exposes the stylesheet that GitHub uses for rendered markdown, which might\neither be inspirational for more complex features, or can be used as-is to\nexactly match how GitHub styles rendered markdown.\n\nThe following CSS is needed to make footnotes look a bit like GitHub:\n\n```css\n/* Style the footnotes section. */\n.footnotes {\n  font-size: smaller;\n  color: #8b949e;\n  border-top: 1px solid #30363d;\n}\n\n/* Hide the section label for visual users. */\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  word-wrap: normal;\n  border: 0;\n}\n\n/* Place `[` and `]` around footnote calls. */\n[data-footnote-ref]::before {\n  content: '[';\n}\n\n[data-footnote-ref]::after {\n  content: ']';\n}\n```\n\n## Syntax tree\n\nThe following interfaces are added to **[hast][]** by this utility.\n\n### Nodes\n\n#### `Raw`\n\n```idl\ninterface Raw \u003c: Literal {\n  type: 'raw'\n}\n```\n\n**Raw** (**[Literal][dfn-literal]**) represents a string if raw HTML inside\nhast.\nRaw nodes are typically ignored but are handled by\n[`hast-util-to-html`][hast-util-to-html] and [`hast-util-raw`][hast-util-raw].\n\n## Types\n\nThis package is fully typed with [TypeScript][].\nIt exports the\n[`FootnoteBackContentTemplate`][api-footnote-back-content-template],\n[`FootnoteBackLabelTemplate`][api-footnote-back-label-template],\n[`Handler`][api-handler],\n[`Handlers`][api-handlers],\n[`Options`][api-options],\n[`Raw`][api-raw], and\n[`State`][api-state] types.\n\nIt also registers the `Raw` node type with `@types/hast`.\nIf you’re working with the syntax tree (and you pass\n`allowDangerousHtml: true`), make sure to import this utility somewhere in your\ntypes, as that registers the new node type in the tree.\n\n```js\n/**\n * @typedef {import('mdast-util-to-hast')}\n */\n\nimport {visit} from 'unist-util-visit'\n\n/** @type {import('hast').Root} */\nconst tree = { /* … */ }\n\nvisit(tree, function (node) {\n  // `node` can now be `raw`.\n})\n```\n\nFinally, it also registers the `hChildren`, `hName`, and `hProperties` fields\non `Data` of `@types/mdast`.\nIf you’re working with the syntax tree, make sure to import this utility\nsomewhere in your types, as that registers the data fields in the tree.\n\n```js\n/**\n * @typedef {import('mdast-util-to-hast')}\n */\n\nimport {visit} from 'unist-util-visit'\n\n/** @type {import('hast').Root} */\nconst tree = { /* … */ }\n\nconsole.log(tree.data?.hName) // Types as `string | undefined`.\n```\n\n## Compatibility\n\nProjects maintained by the unified collective are compatible with maintained\nversions of Node.js.\n\nWhen we cut a new major release, we drop support for unmaintained versions of\nNode.\nThis means we try to keep the current release line, `mdast-util-to-hast@^13`,\ncompatible with Node.js 16.\n\n## Security\n\nUse of `mdast-util-to-hast` can open you up to a\n[cross-site scripting (XSS)][xss] attack.\nEmbedded hast properties (`hName`, `hProperties`, `hChildren`), custom handlers,\nand the `allowDangerousHtml` option all provide openings.\n\nThe following example shows how a script is injected where a benign code block\nis expected with embedded hast properties:\n\n```js\nconst code = {type: 'code', value: 'alert(1)'}\n\ncode.data = {hName: 'script'}\n```\n\nYields:\n\n```html\n\u003cscript\u003ealert(1)\u003c/script\u003e\n```\n\nThe following example shows how an image is changed to fail loading and\ntherefore run code in a browser.\n\n```js\nconst image = {type: 'image', url: 'existing.png'}\n\nimage.data = {hProperties: {src: 'missing', onError: 'alert(2)'}}\n```\n\nYields:\n\n```html\n\u003cimg src=\"missing\" onerror=\"alert(2)\"\u003e\n```\n\nThe following example shows the default handling of embedded HTML:\n\n```markdown\n# Hello\n\n\u003cscript\u003ealert(3)\u003c/script\u003e\n```\n\nYields:\n\n```html\n\u003ch1\u003eHello\u003c/h1\u003e\n```\n\nPassing `allowDangerousHtml: true` to `mdast-util-to-hast` is typically still\nnot enough to run unsafe code:\n\n```html\n\u003ch1\u003eHello\u003c/h1\u003e\n\u0026#x3C;script\u003ealert(3)\u0026#x3C;/script\u003e\n```\n\nIf `allowDangerousHtml: true` is also given to `hast-util-to-html` (or\n`rehype-stringify`), the unsafe code runs:\n\n```html\n\u003ch1\u003eHello\u003c/h1\u003e\n\u003cscript\u003ealert(3)\u003c/script\u003e\n```\n\nUse [`hast-util-sanitize`][hast-util-sanitize] to make the hast tree safe.\n\n## Related\n\n* [`hast-util-to-mdast`](https://github.com/syntax-tree/hast-util-to-mdast)\n  — transform hast to mdast\n* [`hast-util-to-xast`](https://github.com/syntax-tree/hast-util-to-xast)\n  — transform hast to xast\n* [`hast-util-sanitize`](https://github.com/syntax-tree/hast-util-sanitize)\n  — sanitize hast nodes\n\n## Contribute\n\nSee [`contributing.md` in `syntax-tree/.github`][contributing] for ways to get\nstarted.\nSee [`support.md`][support] for ways to get help.\n\nThis project has a [code of conduct][coc].\nBy interacting with this repository, organization, or community you agree to\nabide by its terms.\n\n## License\n\n[MIT][license] © [Titus Wormer][author]\n\n\u003c!-- Definitions --\u003e\n\n[build-badge]: https://github.com/syntax-tree/mdast-util-to-hast/workflows/main/badge.svg\n\n[build]: https://github.com/syntax-tree/mdast-util-to-hast/actions\n\n[coverage-badge]: https://img.shields.io/codecov/c/github/syntax-tree/mdast-util-to-hast.svg\n\n[coverage]: https://codecov.io/github/syntax-tree/mdast-util-to-hast\n\n[downloads-badge]: https://img.shields.io/npm/dm/mdast-util-to-hast.svg\n\n[downloads]: https://www.npmjs.com/package/mdast-util-to-hast\n\n[size-badge]: https://img.shields.io/badge/dynamic/json?label=minzipped%20size\u0026query=$.size.compressedSize\u0026url=https://deno.bundlejs.com/?q=mdast-util-to-hast\n\n[size]: https://bundlejs.com/?q=mdast-util-to-hast\n\n[sponsors-badge]: https://opencollective.com/unified/sponsors/badge.svg\n\n[backers-badge]: https://opencollective.com/unified/backers/badge.svg\n\n[collective]: https://opencollective.com/unified\n\n[chat-badge]: https://img.shields.io/badge/chat-discussions-success.svg\n\n[chat]: https://github.com/syntax-tree/unist/discussions\n\n[npm]: https://docs.npmjs.com/cli/install\n\n[license]: license\n\n[author]: https://wooorm.com\n\n[esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c\n\n[esmsh]: https://esm.sh\n\n[typescript]: https://www.typescriptlang.org\n\n[contributing]: https://github.com/syntax-tree/.github/blob/main/contributing.md\n\n[support]: https://github.com/syntax-tree/.github/blob/main/support.md\n\n[coc]: https://github.com/syntax-tree/.github/blob/main/code-of-conduct.md\n\n[mdast]: https://github.com/syntax-tree/mdast\n\n[mdast-node]: https://github.com/syntax-tree/mdast#nodes\n\n[mdast-html]: https://github.com/syntax-tree/mdast#html\n\n[mdast-util-gfm]: https://github.com/syntax-tree/mdast-util-gfm\n\n[hast]: https://github.com/syntax-tree/hast\n\n[hast-node]: https://github.com/syntax-tree/hast#nodes\n\n[properties]: https://github.com/syntax-tree/hast#properties\n\n[hast-util-table-cell-style]: https://github.com/mapbox/hast-util-table-cell-style\n\n[hast-util-to-mdast]: https://github.com/syntax-tree/hast-util-to-mdast\n\n[hast-util-to-html]: https://github.com/syntax-tree/hast-util-to-html\n\n[hast-util-raw]: https://github.com/syntax-tree/hast-util-raw\n\n[hast-util-sanitize]: https://github.com/syntax-tree/hast-util-sanitize\n\n[remark-rehype]: https://github.com/remarkjs/remark-rehype\n\n[vfile]: https://github.com/vfile/vfile\n\n[clobber-example]: https://github.com/rehypejs/rehype-sanitize#example-headings-dom-clobbering\n\n[github-markdown-css]: https://github.com/sindresorhus/github-markdown-css\n\n[xss]: https://en.wikipedia.org/wiki/Cross-site_scripting\n\n[dfn-literal]: https://github.com/syntax-tree/hast#literal\n\n[api-default-footnote-back-content]: #defaultfootnotebackcontentreferenceindex-rereferenceindex\n\n[api-default-footnote-back-label]: #defaultfootnotebacklabelreferenceindex-rereferenceindex\n\n[api-default-handlers]: #defaulthandlers\n\n[api-footnote-back-content-template]: #footnotebackcontenttemplate\n\n[api-footnote-back-label-template]: #footnotebacklabeltemplate\n\n[api-handler]: #handler\n\n[api-handlers]: #handlers\n\n[api-options]: #options\n\n[api-raw]: #raw\n\n[api-state]: #state\n\n[api-to-hast]: #tohasttree-options\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyntax-tree%2Fmdast-util-to-hast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyntax-tree%2Fmdast-util-to-hast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyntax-tree%2Fmdast-util-to-hast/lists"}