{"id":15414875,"url":"https://github.com/lxsmnsyc/solid-marked","last_synced_at":"2025-08-10T03:10:10.699Z","repository":{"id":49333344,"uuid":"445710306","full_name":"lxsmnsyc/solid-marked","owner":"lxsmnsyc","description":"MDX Compiler for SolidJS","archived":false,"fork":false,"pushed_at":"2024-01-28T06:10:10.000Z","size":846,"stargazers_count":67,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-09T18:17:55.791Z","etag":null,"topics":["markdown","solid-js"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/lxsmnsyc.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}},"created_at":"2022-01-08T03:03:46.000Z","updated_at":"2025-03-18T03:19:26.000Z","dependencies_parsed_at":"2024-06-20T22:00:11.349Z","dependency_job_id":"72bb88e9-dbe0-4705-bc89-ba6f304f05bd","html_url":"https://github.com/lxsmnsyc/solid-marked","commit_stats":{"total_commits":41,"total_committers":1,"mean_commits":41.0,"dds":0.0,"last_synced_commit":"cd239a13442de1d9a07a3294675c334bc619532e"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/lxsmnsyc/solid-marked","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-marked","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-marked/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-marked/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-marked/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lxsmnsyc","download_url":"https://codeload.github.com/lxsmnsyc/solid-marked/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-marked/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269669213,"owners_count":24456620,"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","status":"online","status_checked_at":"2025-08-10T02:00:08.965Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["markdown","solid-js"],"created_at":"2024-10-01T17:05:08.271Z","updated_at":"2025-08-10T03:10:10.572Z","avatar_url":"https://github.com/lxsmnsyc.png","language":"TypeScript","readme":"# solid-marked\n\n\u003e MDX/Markdown compiler for SolidJS\n\n[![NPM](https://img.shields.io/npm/v/solid-marked.svg)](https://www.npmjs.com/package/solid-marked) [![JavaScript Style Guide](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)[![Open in StackBlitz](https://img.shields.io/badge/Open%20in-StackBlitz-blue?style=flat-square\u0026logo=stackblitz)](https://stackblitz.com/github/LXSMNSYC/solid-marked/tree/main/examples/vite-demo)\n\n## Install\n\n```bash\nnpm i solid-js solid-marked\n```\n\n```bash\nyarn add solid-js solid-marked\n```\n\n```bash\npnpm add solid-js solid-marked\n```\n\n## Integrations\n\n- [Unplugin](https://github.com/LXSMNSYC/solid-marked/tree/main/packages/unplugin)\n- [Vite](https://github.com/LXSMNSYC/solid-marked/tree/main/packages/vite)\n\n### Using the compiler\n\n```js\nimport { compile } from 'solid-marked/compiler';\n\nconst { map, code } = await compile(\n  'my-file.md',    // Name of the file\n  '# Hello World', // Markdown code\n  {\n    // Where to import the builtin components\n    // Default: solid-marked\n    mdxImportSource: 'mdx-provider', \n    // If solid-marked should use the Dynamic component\n    // or not.\n    // Possible values:\n    // - true: completely disables Dynamic component\n    // - false: enables Dynamic component\n    // - 'only-mdx': Dynamic component is only enabled for MDX\n    noDynamicComponents: 'only-mdx',\n  }\n);\n\nconsole.log(code);\n```\n\n### `useMDX` and `MDXProvider`\n\nComponents generated by `solid-marked` uses the fundamental components from an MDX provider, this is through the use of `useMDX` which is imported from the module. By default, `useMDX` comes from `solid-marked` and needs to be used in conjunction with `\u003cMDXProvider\u003e`\n\n```js\nimport { MDXProvider } from 'solid-marked';\n\n// ...\n\u003cMDXProvider\n  builtins={{\n    Heading(props) {\n      return (\n        \u003cDynamic component={`h${props.depth}`}\u003e\n          {props.children}\n        \u003c/Dynamic\u003e\n      );\n    },\n  }}\n\u003e\n  \u003cApp /\u003e\n\u003c/MDXProvider\u003e\n```\n\nExample custom module\n\n```js\nexport function useMDX() {\n  return {\n    builtins: {\n      Link(props) {\n        return (\n          \u003ca href={props.url} title={props.title}\u003e\n            {props.children}\n          \u003c/a\u003e\n        );\n      },\n    },\n  };\n}\n```\n\n## Features\n\n### `\u003cRoot\u003e`\n\n`\u003cRoot\u003e` is the top-most component in a Markdown component. It serves as the container for the markdown content.\n\n### Markdown\n\nThe following components (and their prop definitions) are derived from [`mdast`](https://github.com/syntax-tree/mdast#nodes)\n\n#### `\u003cParagraph\u003e`\n\n```md\nLorem ipsum dolor.\n```\n\n```js\nimport { useMDX as _useMDX$ } from 'solid-marked';\n\nexport default function Component(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.Root}\u003e\n      \u003cDynamic component={_ctx$.builtins.Paragraph}\u003e\n        Lorem ipsum dolor.\n      \u003c/Dynamic\u003e\n    \u003c/Dynamic\u003e\n  );\n}\n```\n\n#### `\u003cHeading\u003e`\n\n\u003e [!INFO]\n\u003e Presence of a `\u003cHeading\u003e` allows the Markdown component to generate a `\u003cTableOfContents\u003e`.\n\n```md\n# Heading 1\n## Heading 2\n### Heading 3\n#### Heading 4\n##### Heading 5\n###### Heading 6\n```\n\n```js\nimport { useMDX as _useMDX$ } from 'solid-marked';\n\nexport default function Component(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.Root}\u003e\n      \u003cDynamic component={_ctx$.builtins.Heading} depth={1} id={\"heading-1\"}\u003eHeading 1\u003c/Dynamic\u003e\n      \u003cDynamic component={_ctx$.builtins.Heading} depth={2} id={\"heading-2\"}\u003eHeading 2\u003c/Dynamic\u003e\n      \u003cDynamic component={_ctx$.builtins.Heading} depth={3} id={\"heading-3\"}\u003eHeading 3\u003c/Dynamic\u003e\n      \u003cDynamic component={_ctx$.builtins.Heading} depth={4} id={\"heading-4\"}\u003eHeading 4\u003c/Dynamic\u003e\n      \u003cDynamic component={_ctx$.builtins.Heading} depth={5} id={\"heading-5\"}\u003eHeading 5\u003c/Dynamic\u003e\n      \u003cDynamic component={_ctx$.builtins.Heading} depth={6} id={\"heading-6\"}\u003eHeading 6\u003c/Dynamic\u003e\n    \u003c/Dynamic\u003e   \n  );\n}\n```\n\n#### `\u003cThematicBreak\u003e`\n\n```md\nLorem\n***\nIpsum\n***\nDolor\n```\n\n```js\nimport { useMDX as _useMDX$ } from 'solid-marked';\n\nexport default function Component(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.Root}\u003e\n      \u003cDynamic component={_ctx$.builtins.Paragraph}\u003eLorem\u003c/Dynamic\u003e\n      \u003cDynamic component={_ctx$.builtins.ThematicBreak} /\u003e\n      \u003cDynamic component={_ctx$.builtins.Paragraph}\u003eIpsum\u003c/Dynamic\u003e\n      \u003cDynamic component={_ctx$.builtins.ThematicBreak} /\u003e\n      \u003cDynamic component={_ctx$.builtins.Paragraph}\u003eDolor\u003c/Dynamic\u003e\n    \u003c/Dynamic\u003e\n  );\n}\n```\n\n#### `\u003cBlockquote\u003e`\n\n```md\n\u003e Lorem ipsum dolor.\n```\n\n```js\nimport { useMDX as _useMDX$ } from 'solid-marked';\n\nexport default function Component(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.Root}\u003e\n      \u003cDynamic component={_ctx$.builtins.Blockquote}\u003e\n        \u003cDynamic component={_ctx$.builtins.Paragraph}\u003e\n          Lorem ipsum dolor.\n        \u003c/Dynamic\u003e\n      \u003c/Dynamic\u003e\n    \u003c/Dynamic\u003e\n  );\n}\n```\n\n#### `\u003cList\u003e` and `\u003cListItem\u003e`\n\n##### Ordered lists\n\n```md\n1. Lorem\n2. Ipsum\n3. Dolor\n```\n\n```js\nimport { useMDX as _useMDX$ } from 'solid-marked';\n\nexport default function Component(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.Root}\u003e\n      \u003cDynamic component={_ctx$.builtins.List} ordered={true} spread={false} start={1}\u003e\n        \u003cDynamic component={_ctx$.builtins.ListItem} spread={false}\u003e\n          \u003cDynamic component={_ctx$.builtins.Paragraph}\u003eLorem\u003c/Dynamic\u003e\n        \u003c/Dynamic\u003e\n        \u003cDynamic component={_ctx$.builtins.ListItem} spread={false}\u003e\n          \u003cDynamic component={_ctx$.builtins.Paragraph}\u003eIpsum\u003c/Dynamic\u003e\n        \u003c/Dynamic\u003e\n        \u003cDynamic component={_ctx$.builtins.ListItem} spread={false}\u003e\n          \u003cDynamic component={_ctx$.builtins.Paragraph}\u003eDolor\u003c/Dynamic\u003e\n        \u003c/Dynamic\u003e\n      \u003c/Dynamic\u003e\n    \u003c/Dynamic\u003e\n  );\n}\n```\n\n##### Unordered lists\n\n```md\n- Lorem\n- Ipsum\n- Dolor\n```\n\n```js\nimport { useMDX as _useMDX$ } from 'solid-marked';\n\nexport default function Component(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.Root}\u003e\n      \u003cDynamic component={_ctx$.builtins.List} ordered={false} spread={false}\u003e\n        \u003cDynamic component={_ctx$.builtins.ListItem} spread={false}\u003e\n          \u003cDynamic component={_ctx$.builtins.Paragraph}\u003eLorem\u003c/Dynamic\u003e\n        \u003c/Dynamic\u003e\n        \u003cDynamic component={_ctx$.builtins.ListItem} spread={false}\u003e\n          \u003cDynamic component={_ctx$.builtins.Paragraph}\u003eIpsum\u003c/Dynamic\u003e\n        \u003c/Dynamic\u003e\n        \u003cDynamic component={_ctx$.builtins.ListItem} spread={false}\u003e\n          \u003cDynamic component={_ctx$.builtins.Paragraph}\u003eDolor\u003c/Dynamic\u003e\n        \u003c/Dynamic\u003e\n      \u003c/Dynamic\u003e\n    \u003c/Dynamic\u003e\n  );\n}\n```\n\n#### `\u003cCode\u003e`\n\n````md\n```js highlight-line=\"2\"\nfoo()\nbar()\nbaz()\n```\n````\n\n```js\nimport { useMDX as _useMDX$ } from 'solid-marked';\n\nexport default function Component(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.Root}\u003e\n      \u003cDynamic component={_ctx$.builtins.Code} lang={\"js\"} meta={\"highlight-line=\\\"2\\\"\"}\u003e\n        {\"foo()\\nbar()\\nbaz()\"}\n      \u003c/Dynamic\u003e\n    \u003c/Dynamic\u003e\n  );\n}\n```\n\n#### `\u003cDefinition\u003e`\n\n```md\n[Github]: https://github.com\n```\n\n```js\nimport { useMDX as _useMDX$ } from 'solid-marked';\n\nexport default function Component(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.Root}\u003e\n      \u003cDynamic component={_ctx$.builtins.Definition}\n        url={\"https://github.com\"}\n        identifier={\"github\"}\n        label={\"Github\"}\n      /\u003e\n    \u003c/Dynamic\u003e\n  );\n}\n```\n\n#### `\u003cEmphasis\u003e`\n\n```md\n*alpha* _bravo_\n```\n\n```js\nimport { useMDX as _useMDX$ } from 'solid-marked';\n\nexport default function Component(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.Root}\u003e\n      \u003cDynamic component={_ctx$.builtins.Paragraph}\u003e\n        \u003cDynamic component={_ctx$.builtins.Emphasis}\u003ealpha\u003c/Dynamic\u003e \u003cDynamic component={_ctx$.builtins.Emphasis}\u003ebravo\u003c/Dynamic\u003e\n      \u003c/Dynamic\u003e\n    \u003c/Dynamic\u003e\n  );\n}\n```\n\n#### `\u003cStrong\u003e`\n\n```md\n**alpha** __bravo__\n```\n\n```js\nimport { useMDX as _useMDX$ } from 'solid-marked';\n\nexport default function Component(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.Root}\u003e\n      \u003cDynamic component={_ctx$.builtins.Paragraph}\u003e\n        \u003cDynamic component={_ctx$.builtins.Strong}\u003ealpha\u003c/Dynamic\u003e \u003cDynamic component={_ctx$.builtins.Strong}\u003ebravo\u003c/Dynamic\u003e\n      \u003c/Dynamic\u003e\n    \u003c/Dynamic\u003e\n  );\n}\n```\n\n#### `\u003cInlineCode\u003e`\n\n```md\n`foo()`\n```\n\n```js\nimport { useMDX as _useMDX$ } from 'solid-marked';\n\nexport default function Component(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.Root}\u003e\n      \u003cDynamic component={_ctx$.builtins.Paragraph}\u003e\n        \u003cDynamic component={_ctx$.builtins.InlineCode}\u003e{\"foo()\"}\u003c/Dynamic\u003e\n      \u003c/Dynamic\u003e\n    \u003c/Dynamic\u003e\n  );\n}\n```\n\n#### `\u003cBreak\u003e`\n\n```md\na  \nb\n```\n\n```js\nimport { useMDX as _useMDX$ } from 'solid-marked';\n\nexport default function Component(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.Root}\u003e\n      \u003cDynamic component={_ctx$.builtins.Paragraph}\u003e\n        a\u003cDynamic component={_ctx$.builtins.Break} /\u003eb\n      \u003c/Dynamic\u003e\n    \u003c/Dynamic\u003e\n  );\n}\n```\n\n#### `\u003cLink\u003e`\n\n```md\n[alpha](https://example.com \"bravo\")\n```\n\n```js\nimport { useMDX as _useMDX$ } from 'solid-marked';\n\nexport default function Component(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.Root}\u003e\n      \u003cDynamic component={_ctx$.builtins.Paragraph}\u003e\n        \u003cDynamic\n          component={_ctx$.builtins.Link}\n          url={\"https://example.com\"}\n          title={\"bravo\"}\n        \u003e\n          alpha\n        \u003c/Dynamic\u003e\n      \u003c/Dynamic\u003e\n    \u003c/Dynamic\u003e\n  );\n}\n```\n\n#### `\u003cImage\u003e`\n\n```md\n![alpha](https://example.com/favicon.ico \"bravo\")\n```\n\n```js\nimport { useMDX as _useMDX$ } from 'solid-marked';\n\nexport default function Component(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.Root}\u003e\n      \u003cDynamic component={_ctx$.builtins.Paragraph}\u003e\n        \u003cDynamic\n          component={_ctx$.builtins.Image}\n          url={\"https://example.com/favicon.ico\"}\n          title={\"bravo\"}\n          alt={\"alpha\"}\n        /\u003e\n      \u003c/Dynamic\u003e\n    \u003c/Dynamic\u003e\n  );\n}\n```\n\n#### `\u003cLinkReference\u003e`\n\nMust be have an associated `\u003cDefinition\u003e`.\n\n```md\n[This is an example][alpha]\n\n[alpha]: bravo\n```\n\n```js\nimport { useMDX as _useMDX$ } from 'solid-marked';\n\nexport default function Component(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.Root}\u003e\n      \u003cDynamic component={_ctx$.builtins.Paragraph}\u003e\n        \u003cDynamic \n          component={_ctx$.builtins.LinkReference}\n          identifier={\"alpha\"}\n          label={\"alpha\"}\n          referenceType={\"full\"}\n        \u003e\n          This is an example\n        \u003c/Dynamic\u003e\n      \u003c/Dynamic\u003e\n      \u003cDynamic\n        component={_ctx$.builtins.Definition}\n        url={\"bravo\"}\n        identifier={\"alpha\"}\n        label={\"alpha\"}\n      /\u003e\n    \u003c/Dynamic\u003e\n  );\n}\n```\n\n#### `\u003cImageReference\u003e`\n\nMust be have an associated `\u003cDefinition\u003e`.\n\n```md\n![This is an example][alpha]\n\n[alpha]: bravo\n```\n\n```js\nimport { useMDX as _useMDX$ } from 'solid-marked';\n\nexport default function Component(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.Root}\u003e\n      \u003cDynamic component={_ctx$.builtins.Paragraph}\u003e\n        \u003cDynamic\n          component={_ctx$.builtins.ImageReference}\n          identifier={\"alpha\"}\n          label={\"alpha\"}\n          referenceType={\"full\"} \n          alt={\"This is an example\"}\n        /\u003e\n      \u003c/Dynamic\u003e\n      \u003cDynamic\n        component={_ctx$.builtins.Definition}\n        url={\"bravo\"}\n        identifier={\"alpha\"}\n        label={\"alpha\"}\n      /\u003e\n    \u003c/Dynamic\u003e\n  );\n}\n```\n\n### Github-flavored Markdown\n\nBased on [Github-flavored Markdown](https://github.github.com/gfm/)\n\n#### `\u003cFootnoteDefinition\u003e`\n\n```md\n[^alpha]: bravo and charlie.\n```\n\n```js\nimport { useMDX as _useMDX$ } from 'solid-marked';\n\nexport default function Component(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.Root}\u003e\n      \u003cDynamic component={_ctx$.builtins.FootnoteDefinition} identifier={\"alpha\"} label={\"alpha\"}\u003e\n        \u003cDynamic component={_ctx$.builtins.Paragraph}\u003ebravo and charlie.\u003c/Dynamic\u003e\n      \u003c/Dynamic\u003e\n    \u003c/Dynamic\u003e\n  );\n}\n```\n\n#### `\u003cFootnoteReference\u003e`\n\nMust have an associated `\u003cFootnoteDefinition\u003e`\n\n```md\n[^alpha]\n\n[^alpha]: bravo and charlie.\n```\n\n```js\nimport { useMDX as _useMDX$ } from 'solid-marked';\n\nexport default function Component(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.Root}\u003e\n      \u003cDynamic component={_ctx$.builtins.Paragraph}\u003e\n        \u003cDynamic\n          component={_ctx$.builtins.FootnoteReference}\n          identifier={\"alpha\"}\n          label={\"alpha\"}\n        /\u003e\n      \u003c/Dynamic\u003e\n      \u003cDynamic component={_ctx$.builtins.FootnoteDefinition} identifier={\"alpha\"} label={\"alpha\"}\u003e\n        \u003cDynamic component={_ctx$.builtins.Paragraph}\u003ebravo and charlie.\u003c/Dynamic\u003e\n      \u003c/Dynamic\u003e\n    \u003c/Dynamic\u003e\n  );\n}\n```\n\n#### `\u003cTable\u003e`, `\u003cTableRow\u003e` and `\u003cTableCell\u003e`\n\n```md\n| first | second | third |\n| :---- | :----: | ----: |\n| foo   |  bar   |   baz |\n```\n\n```js\nimport { useMDX as _useMDX$ } from 'solid-marked';\n\nexport default function Component(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.Root}\u003e\n      \u003cDynamic component={_ctx$.builtins.Table} align={[\"left\",\"center\",\"right\"]}\u003e\n        \u003cDynamic component={_ctx$.builtins.TableRow} isHead={true}\u003e\n          \u003cDynamic component={_ctx$.builtins.TableCell}\u003efirst\u003c/Dynamic\u003e\n          \u003cDynamic component={_ctx$.builtins.TableCell}\u003esecond\u003c/Dynamic\u003e\n          \u003cDynamic component={_ctx$.builtins.TableCell}\u003ethird\u003c/Dynamic\u003e\n        \u003c/Dynamic\u003e\n        \u003cDynamic component={_ctx$.builtins.TableRow}\u003e\n          \u003cDynamic component={_ctx$.builtins.TableCell}\u003efoo\u003c/Dynamic\u003e\n          \u003cDynamic component={_ctx$.builtins.TableCell}\u003ebar\u003c/Dynamic\u003e\n          \u003cDynamic component={_ctx$.builtins.TableCell}\u003ebaz\u003c/Dynamic\u003e\n        \u003c/Dynamic\u003e\n      \u003c/Dynamic\u003e\n    \u003c/Dynamic\u003e\n  );\n}\n```\n\n#### `\u003cDelete\u003e`\n\n```md\n~~alpha~~\n```\n\n```js\nimport { useMDX as _useMDX$ } from 'solid-marked';\n\nexport default function Component(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.Root}\u003e\n      \u003cDynamic component={_ctx$.builtins.Paragraph}\u003e\n        \u003cDynamic component={_ctx$.builtins.Delete}\u003ealpha\u003c/Dynamic\u003e\n      \u003c/Dynamic\u003e\n    \u003c/Dynamic\u003e\n  );\n}\n```\n\n### MDX\n\n`solid-marked` supports [MDX](https://mdxjs.com/), with three compilation modes for the HTML/JSX expressions based on the `noDynamicImports` option for the compiler.\n\nLet's take this example code:\n\n```js\n\u003cExample\u003eHello World\u003c/Example\u003e\n```\n\n- if set to `true`, the output JSX will not use SolidJS' `\u003cDynamic\u003e` component and instead outputs the target JSX component directly to the markup.\n  ```js\n  import { useMDX as _useMDX$ } from 'solid-marked';\n\n  export default function Component(props) {\n    const _ctx$ = _useMDX$();\n    return (\n      \u003c_ctx$.builtins.Root\u003e\n        \u003c_ctx$.builtins.Paragraph\u003e\n          \u003cExample\u003eHello World\u003c/Example\u003e\n        \u003c/_ctx$.builtins.Paragraph\u003e\n      \u003c/_ctx$.builtins.Root\u003e\n    );\n  }\n  ```\n- if set to `false`, the output will use `\u003cDynamic\u003e`. If an HTML or JSX expression is encountered, the element will be checked if it's not declared, in which it will use its counterpart component from `useMDX`, otherwise it will use the component/element directly.\n  ```js\n  import { useMDX as _useMDX$ } from 'solid-marked';\n\n  export default function Component(props) {\n    const _ctx$ = _useMDX$();\n    return (\n      \u003cDynamic component={_ctx$.builtins.Root}\u003e\n        \u003cDynamic component={_ctx$.builtins.Paragraph}\u003e\n          \u003cDynamic component={typeof Example === 'undefined' ? _ctx$.components.Example : Example}\u003e\n            Hello World\n          \u003c/Dynamic\u003e\n        \u003c/Dynamic\u003e\n      \u003c/Dynamic\u003e\n    );\n  }\n  ```\n- if set to `only-mdx`, `\u003cDynamic\u003e` is only used for builtin components while HTML/JSX expressions will be used directly.\n  ```js\n  import { useMDX as _useMDX$ } from 'solid-marked';\n\n  export default function Component(props) {\n    const _ctx$ = _useMDX$();\n    return (\n      \u003cDynamic component={_ctx$.builtins.Root}\u003e\n        \u003cDynamic component={_ctx$.builtins.Paragraph}\u003e\n          \u003cExample\u003eHello World\u003c/Example\u003e\n        \u003c/Dynamic\u003e\n      \u003c/Dynamic\u003e\n    );\n  }\n  ```\n\n### `\u003cTableOfContents\u003e`\n\n`\u003cTableOfContents\u003e` is automatically generated when `\u003cHeading\u003e` elements are detected. It is automatically exported and can also be used in the Markdown/MDX.\n\n```md\n# foo\n## bar\n### baz\n# alpha\n## bravo\n### charlie\n```\n\n```js\nimport { useMDX as _useMDX$ } from 'solid-marked';\n\nexport function TableOfContents(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.List} ordered={false} spread={true}\u003e\n      \u003cDynamic component={_ctx$.builtins.ListItem} spread={true}\u003e\n        \u003cDynamic component={_ctx$.builtins.Paragraph}\u003e\n          \u003cDynamic component={_ctx$.builtins.Link} url={\"#foo\"}\u003efoo\u003c/Dynamic\u003e\n        \u003c/Dynamic\u003e\n        \u003cDynamic component={_ctx$.builtins.List} ordered={false} spread={true}\u003e\n          \u003cDynamic component={_ctx$.builtins.ListItem} spread={true}\u003e\n            \u003cDynamic component={_ctx$.builtins.Paragraph}\u003e\n              \u003cDynamic component={_ctx$.builtins.Link} url={\"#bar\"}\u003ebar\u003c/Dynamic\u003e\n            \u003c/Dynamic\u003e\n            \u003cDynamic component={_ctx$.builtins.List} ordered={false} spread={false}\u003e\n              \u003cDynamic component={_ctx$.builtins.ListItem} spread={false}\u003e\n                \u003cDynamic component={_ctx$.builtins.Paragraph}\u003e\n                  \u003cDynamic component={_ctx$.builtins.Link} url={\"#baz\"}\u003ebaz\u003c/Dynamic\u003e\n                \u003c/Dynamic\u003e\n              \u003c/Dynamic\u003e\n            \u003c/Dynamic\u003e\n          \u003c/Dynamic\u003e\n        \u003c/Dynamic\u003e\n      \u003c/Dynamic\u003e\n      \u003cDynamic component={_ctx$.builtins.ListItem} spread={true}\u003e\n        \u003cDynamic component={_ctx$.builtins.Paragraph}\u003e\n          \u003cDynamic component={_ctx$.builtins.Link} url={\"#alpha\"}\u003ealpha\u003c/Dynamic\u003e\n        \u003c/Dynamic\u003e\n        \u003cDynamic component={_ctx$.builtins.List} ordered={false} spread={true}\u003e\n          \u003cDynamic component={_ctx$.builtins.ListItem} spread={true}\u003e\n            \u003cDynamic component={_ctx$.builtins.Paragraph}\u003e\n              \u003cDynamic component={_ctx$.builtins.Link} url={\"#bravo\"}\u003ebravo\u003c/Dynamic\u003e\n            \u003c/Dynamic\u003e\n            \u003cDynamic component={_ctx$.builtins.List} ordered={false} spread={false}\u003e\n              \u003cDynamic component={_ctx$.builtins.ListItem} spread={false}\u003e\n                \u003cDynamic component={_ctx$.builtins.Paragraph}\u003e\n                  \u003cDynamic component={_ctx$.builtins.Link} url={\"#charlie\"}\u003echarlie\u003c/Dynamic\u003e\n                \u003c/Dynamic\u003e\n              \u003c/Dynamic\u003e\n            \u003c/Dynamic\u003e\n          \u003c/Dynamic\u003e\n        \u003c/Dynamic\u003e\n      \u003c/Dynamic\u003e\n    \u003c/Dynamic\u003e       \n  );\n}\nexport default function Component(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.Root}\u003e\n      \u003cDynamic component={_ctx$.builtins.Heading} depth={1} id={\"foo\"}\u003efoo\u003c/Dynamic\u003e\n      \u003cDynamic component={_ctx$.builtins.Heading} depth={2} id={\"bar\"}\u003ebar\u003c/Dynamic\u003e\n      \u003cDynamic component={_ctx$.builtins.Heading} depth={3} id={\"baz\"}\u003ebaz\u003c/Dynamic\u003e\n      \u003cDynamic component={_ctx$.builtins.Heading} depth={1} id={\"alpha\"}\u003ealpha\u003c/Dynamic\u003e\n      \u003cDynamic component={_ctx$.builtins.Heading} depth={2} id={\"bravo\"}\u003ebravo\u003c/Dynamic\u003e\n      \u003cDynamic component={_ctx$.builtins.Heading} depth={3} id={\"charlie\"}\u003echarlie\u003c/Dynamic\u003e\n    \u003c/Dynamic\u003e\n  );\n}\n```\n\n### Frontmatter\n\n`solid-marked` supports YAML and TOML frontmatter for Markdown/MDX. The data can be accessed through the `frontmatter` variable and also exported automatically. Frontmatter can only be used directly at the first line of the file.\n\n#### YAML\n\n```mdx\n---\ntitle: Hi, World!\n---\n# {frontmatter.title}\n```\n\n```js\nexport const frontmatter = ({title:\"Hi, World!\"});\nimport { useMDX as _useMDX$ } from 'solid-marked';\n\nexport function TableOfContents(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.List} ordered={false} spread={false}\u003e\n      \u003cDynamic component={_ctx$.builtins.ListItem} spread={false}\u003e\n        \u003cDynamic component={_ctx$.builtins.Paragraph}\u003e\n          \u003cDynamic component={_ctx$.builtins.Link} url={\"#frontmattertitle\"}\u003e \n            {frontmatter.title}\n          \u003c/Dynamic\u003e\n        \u003c/Dynamic\u003e\n      \u003c/Dynamic\u003e\n    \u003c/Dynamic\u003e\n  );\n}\nexport default function Component(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.Root}\u003e\n      \u003cDynamic component={_ctx$.builtins.Heading} depth={1} id={\"frontmattertitle\"}\u003e\n        {frontmatter.title}\n      \u003c/Dynamic\u003e\n    \u003c/Dynamic\u003e\n  );\n}\n```\n\n#### TOML\n\n```md\n+++\ntitle = \"Hi, World!\"\n+++\n# {frontmatter.title}\n```\n\n```js\nexport const frontmatter = Object.assign(Object.create(null),{title:\"Hi, World!\"});\nimport { useMDX as _useMDX$ } from 'solid-marked';\n\nexport function TableOfContents(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.List} ordered={false} spread={false}\u003e\n      \u003cDynamic component={_ctx$.builtins.ListItem} spread={false}\u003e\n        \u003cDynamic component={_ctx$.builtins.Paragraph}\u003e\n          \u003cDynamic component={_ctx$.builtins.Link} url={\"#frontmattertitle\"}\u003e\n            {frontmatter.title}\n          \u003c/Dynamic\u003e\n        \u003c/Dynamic\u003e\n      \u003c/Dynamic\u003e\n    \u003c/Dynamic\u003e\n  );\n}\nexport default function Component(props) {\n  const _ctx$ = _useMDX$();\n  return (\n    \u003cDynamic component={_ctx$.builtins.Root}\u003e\n      \u003cDynamic component={_ctx$.builtins.Heading} depth={1} id={\"frontmattertitle\"}\u003e\n        {frontmatter.title}\n      \u003c/Dynamic\u003e\n    \u003c/Dynamic\u003e\n  );\n}\n```\n\n## Typescript\n\n```ts\n/// \u003creference types=\"solid-marked/env\"\u003e\n```\n\n## Component\n\nThe features above are compile-time Markdown rendering. For runtime rendering, `solid-marked` provides the `Markdown` component:\n\n```js\nimport Markdown from 'solid-marked/component';\n\nconst content = (\n  \u003cMarkdown\n    builtins={{\n      Root(props) {\n        return (\n          \u003cdiv\u003e\n            {props.children}\n          \u003c/div\u003e\n        );\n      },\n      Blockquote(props) {\n        return (\n          \u003cblockquote\u003e\n            {props.children}\n          \u003c/blockquote\u003e\n        );\n      },\n    }}\n  \u003e\n    {'\u003e This is a blockquote.'}\n  \u003c/Markdown\u003e\n);\n```\n\n\u003e [!INFO]\n\u003e Markdown component only supports CommonMark and GFM. MDX and Frontmatter are considered \"invalid\".\n\n## Sponsors\n\n![Sponsors](https://github.com/lxsmnsyc/sponsors/blob/main/sponsors.svg?raw=true)\n\n## License\n\nMIT © [lxsmnsyc](https://github.com/lxsmnsyc)\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flxsmnsyc%2Fsolid-marked","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flxsmnsyc%2Fsolid-marked","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flxsmnsyc%2Fsolid-marked/lists"}