{"id":19848127,"url":"https://github.com/shunnnet/vue-markdown","last_synced_at":"2025-09-18T13:31:42.444Z","repository":{"id":197000591,"uuid":"697782499","full_name":"shunnNet/vue-markdown","owner":"shunnNet","description":"Vue component that render markdown using unified","archived":false,"fork":false,"pushed_at":"2024-12-07T17:49:47.000Z","size":150,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-08T12:26:48.076Z","etag":null,"topics":["markdown","runtime","typescript","unified","vue","vue3"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@crazydos/vue-markdown","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/shunnNet.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2023-09-28T13:17:30.000Z","updated_at":"2024-12-18T03:36:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"5f97920c-d909-4b13-b79f-415aead851dd","html_url":"https://github.com/shunnNet/vue-markdown","commit_stats":null,"previous_names":["shunnnet/vue-markdown"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shunnNet%2Fvue-markdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shunnNet%2Fvue-markdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shunnNet%2Fvue-markdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shunnNet%2Fvue-markdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shunnNet","download_url":"https://codeload.github.com/shunnNet/vue-markdown/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233484484,"owners_count":18683099,"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":["markdown","runtime","typescript","unified","vue","vue3"],"created_at":"2024-11-12T13:16:13.283Z","updated_at":"2025-09-18T13:31:42.431Z","avatar_url":"https://github.com/shunnNet.png","language":"TypeScript","funding_links":["https://buymeacoffee.com/shunnnet"],"categories":[],"sub_categories":[],"readme":"# @crazydos/vue-markdown\n[![npm version](https://img.shields.io/npm/v/@crazydos/vue-markdown.svg)](https://www.npmjs.com/package/@crazydos/vue-markdown)\n[![npm downloads](https://img.shields.io/npm/dm/@crazydos/vue-markdown.svg)](https://www.npmjs.com/package/@crazydos/vue-markdown)\n[![network dependents](https://dependents.info/shunnNet/vue-markdown/badge)](https://dependents.info/shunnNet/vue-markdown)\n[![License](https://img.shields.io/github/license/nuxt/nuxt.svg)](https://github.com/shunnNet/vue-markdown/blob/main/LICENSE)\n\nThis is a package that provide Vue 3+ component to render markdown content with [`unified`](https://github.com/unifiedjs/unified) pipeline.\n\nAnd is referenced from [`react-markdown`](https://github.com/remarkjs/react-markdown).\n\n- [@crazydos/vue-markdown](#crazydosvue-markdown)\n  - [Features](#features)\n  - [Used by](#used-by)\n  - [Online example \\\u0026 playground](#online-example--playground)\n  - [Migration: for `v0.x` users:](#migration-for-v0x-users)\n    - [Use named import](#use-named-import)\n    - [Slot prefix](#slot-prefix)\n  - [Install](#install)\n  - [Unified plugins version](#unified-plugins-version)\n  - [Usages](#usages)\n    - [Basic](#basic)\n    - [Add unified plugin](#add-unified-plugin)\n    - [Rendering `GFM`](#rendering-gfm)\n    - [Rendering html](#rendering-html)\n    - [Async Plugin](#async-plugin)\n    - [Custom attributes](#custom-attributes)\n    - [Customize tag rendering with scoped slot](#customize-tag-rendering-with-scoped-slot)\n      - [re-render issue](#re-render-issue)\n    - [Use `\u003cslot\u003e` in markdown](#use-slot-in-markdown)\n    - [Security](#security)\n  - [Documentation](#documentation)\n    - [`\u003cVueMarkdown\u003e` \\\u0026 `\u003cVueMarkdownAsync\u003e` Props](#vuemarkdown--vuemarkdownasync-props)\n    - [`scoped slot` and `custom attrs`](#scoped-slot-and-custom-attrs)\n    - [Attributes aliases](#attributes-aliases)\n    - [Code content example](#code-content-example)\n  - [Reference](#reference)\n  - [License](#license)\n\n## Features\n- 🌴 Use [unified](https://github.com/unifiedjs/unified) to render Markdown (CommonMark)\n- 🪑 Supports rendering of additional elements (i.e: GFM: `tables`, `footnotes`, `task lists` etc.) through [remark](https://github.com/remarkjs/remark) and [rehype](https://github.com/rehypejs/rehype) plugins.\n- :hammer_and_wrench: Allows customization of tag attributes for markdown elements. (i.e: `class`, `target`, `rel` etc.)\n- 🛃 Enables customization of markdown element rendering through Vue `scoped slot`.\n- 🚀 Support rendering Vue component in markdown (need `rehype-raw`)\n- 🛡️ Safely renders markdown to prevent harmful content by `rehype-sanitize`\n- 📝 Fully typed with TypeScript for better developer experience and type safety.\n\n\u003e [!TIP]\n\u003e If this package has been helpful to you, feel free to [support me on Buy Me a Coffee](https://buymeacoffee.com/shunnnet) ~\n\n\u003ca href=\"https://buymeacoffee.com/shunnnet\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n  \u003cimg width=\"150\" src=\"https://cdn.buymeacoffee.com/buttons/v2/default-green.png\" alt=\"Buy Me A Coffee\" /\u003e\n\u003c/a\u003e\n\n## Used by\n[![network dependents](https://dependents.info/shunnNet/vue-markdown/image)](https://dependents.info/shunnNet/vue-markdown)\n\n## Online example \u0026 playground\nFor more usage examples and detailed plugin configuration, please refer to the [usage examples on Stackblitz](https://stackblitz.com/edit/nuxt-starter-xvieezcs?file=pages%2Findex.vue).\n\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/nuxt-starter-xvieezcs?file=pages%2Findex.vue)\n\n## Migration: for `v0.x` users:\nThank you to the users of `v0.x` for motivating me to continue this project.\n\nIt is now recommended to upgrade to version `v1.x`. There are no significant differences between `v1.x` and `v0.x`, but `v1.x` has upgraded `unified` and enhanced TypeScript support.\n\nTo migrate to v1.x, please make the following adjustments:\n\n### Use named import\nv0.x:\n```ts\nimport VueMarkdown from '@crazydos/vue-markdown'\n```\n\nv1.x\n```ts\nimport { VueMarkdown } from '@crazydos/vue-markdown'\n```\n\n### Slot prefix\nThe syntax for the `\u003cslot\u003e` tag has changed.\n\nSlot name now need add prefix `s-` as follows:\n\nv0.x:\n```html\n\u003c!-- in Markdown --\u003e\n\u003cslot slot-name=\"header\" /\u003e\n\n\u003c!-- Customize in Vue --\u003e\n\u003ctemplate #header\u003e\n  \u003cCusomHeader\u003e\u003c/CusomHeader\u003e\n\u003c/header\u003e\n```\n\nv1.x:\n```html\n\u003c!-- in Markdown --\u003e\n\u003cslot slot-name=\"header\" /\u003e\n\n\u003c!-- Customize in Vue --\u003e\n\u003ctemplate #s-header\u003e\n  \u003cCusomHeader\u003e\u003c/CusomHeader\u003e\n\u003c/header\u003e\n```\n\n## Install\n```sh\nnpm install @crazydos/vue-markdown\n```\n\n## Unified plugins version\n`vue-markdown` uses `unified 11`. so please ensure that the unified plugin you intend to use corresponds to `unified 11`.\n\nHere are the recommended versions for the plugins:\n\n- `rehype-raw`: `^7.0.0`\n- `remark-gfm`: `^4.0.0`\n- `remark-math`: `^6.0.0`\n- `rehype-katex`: `^7.0.1`\n- `remark-toc`: `^9.0.0`\n- ...\n\n## Usages\n\n### Basic\nYou can pass markdown content through the `markdown` prop.\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { VueMarkdown } from '@crazydos/vue-markdown'\nimport { ref } from 'vue'\n\nconst markdown = ref('## Hello World')\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cVueMarkdown :markdown=\"markdown\" /\u003e\n\u003c/template\u003e\n```\n\n### Add unified plugin\n`vue-markdown` supports extension through [`unified`](https://github.com/unifiedjs/unified) plugins. To insert a `unified` plugin, you can use the corresponding options. `vue-markdown` also exports helper type to support this.\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { type PluggableList, VueMarkdown } from '@crazydos/vue-markdown'\nimport { ref } from 'vue'\n\nconst markdown = ref(`...`)\n\nconst remarkPlugins: PluggableList = [\n  // ...\n]\nconst rehypePlugins: PluggableList = [\n  // ...\n]\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003c!-- Example 1 --\u003e\n  \u003cVueMarkdown\n    :markdown=\"markdown\"\n    :remark-plugins=\"remarkPlugins\"\n    :rehype-plugins=\"rehypePlugins\"\n  /\u003e\n  \u003c!-- Example 2: Directly add plugins --\u003e\n  \u003cVueMarkdown\n    :markdown=\"markdown\"\n    :remark-plugins=\"[\n      // ...\n    ]\"\n    :rehype-plugins=\"[\n      // ...\n    ]\"\n  /\u003e\n\u003c/template\u003e\n```\n\n### Rendering `GFM`\nBy default, `vue-markdown` only supports basic Markdown syntax (CommonMark). If you need support for other Markdown syntax, you'll need to insert the corresponding `unified` plugin.\n\nFor features like `tables`, `footnotes`, `task lists`, etc., you need to include the `remark-gfm` plugin. (If you need support for other Markdown syntax like math, please use plugins as well.)\n\nYou can use the `remark-plugins` prop to pass in remark plugins.\n\n```sh\nnpm install remark-gfm\n```\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { VueMarkdown } from '@crazydos/vue-markdown'\nimport remarkGfm from 'remark-gfm'\nimport { ref } from 'vue'\n\nconst markdown = ref(`## Hello World\n\n- [x] Add some task\n- [ ] Do some task\n`)\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003c!-- simple usage --\u003e\n  \u003cVueMarkdown :markdown=\"markdown\" :remark-plugins=\"[remarkGfm]\" /\u003e\n\u003c/template\u003e\n```\n\n### Rendering html\nBy default, `vue-markdown` outputs HTML as plain text.\nIf you want to render HTML tags, you need to use the `rehype-raw` plugin.\n\n```sh\nnpm install rehype-raw\n```\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { VueMarkdown } from '@crazydos/vue-markdown'\nimport rehypeRaw from 'rehype-raw'\nimport { ref } from 'vue'\n\nconst markdown = ref(`\n\u003cdetails\u003e\n  \u003csummary\u003eDetails\u003c/summary\u003e\n  Something small enough to escape casual notice.\n\u003c/details\u003e\n\n`)\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cVueMarkdown :markdown=\"markdown\" :rehype-plugins=\"[rehypeRaw]\" /\u003e\n\u003c/template\u003e\n```\n\n### Async Plugin\n\u003e [!NOTE]\n\u003e Support from v2+\n\n`@crazydos/vue-markdown` supports using Unified async plugins (e.g. [@shiki/rehype](https://shiki.matsu.io/packages/rehype)). When using an async plugin, you must use `\u003cVueMarkdownAsync\u003e` and wrap it with `\u003cSuspense\u003e` to correctly render the content. `\u003cVueMarkdownAsync\u003e` shares the same interface as `\u003cVueMarkdown\u003e`, including the same props and slots.\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport rehypeShiki from '@shikijs/rehype'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cSuspense\u003e\n    \u003cVueMarkdownAsync\n      :markdown=\"markdown\"\n      :rehype-plugins=\"[rehypeShiki, { theme: 'github-light' }]\"\n    /\u003e\n  \u003c/Suspense\u003e\n\u003c/template\u003e\n```\n\n### Custom attributes\nYou can customize tags for individual HTML elements, for example, by adding default classes or setting attributes like `target`, `rel`, `lazyload`, etc. The customAttrs will be passed into Vue's `h` function, so it will have the same effect as passing attributes to a `h`. Please refer to [Vue's official documentation](https://vuejs.org/guide/extras/render-function.html) to understand the effects of different data types when passed to the `h` function.\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { type CustomAttrs, VueMarkdown } from '@crazydos/vue-markdown'\nimport { ref } from 'vue'\n\nconst markdown = ref(`\n# Hello world\n\n## Hello World 2\n\n[Google](https://www.google.com)\n\n`)\n\nconst customAttrs: CustomAttrs = {\n  // use html tag name as key\n  h1: { class: ['heading'] },\n  h2: { class: ['heading'] },\n  a: { target: '_blank', rel: 'noopener noreferrer' }\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cVueMarkdown :markdown=\"markdown\" :custom-attrs=\"customAttrs\" /\u003e\n\u003c/template\u003e\n```\n\n`customAttrs` provides some advanced functionalities: pass in a function for more flexible configurations.\n\n```ts\nconst customAttrs: CustomAttrs = {\n  h1: { class: ['heading'] },\n  h2: { class: ['heading'] },\n  a: (node, combinedAttrs) =\u003e {\n    if (\n      typeof node.properties.href === 'string'\n      \u0026\u0026 node.properties.href.startsWith('https://www.google.com')\n    ) {\n      return { target: '_blank', rel: 'noopener noreferrer' }\n    }\n    else {\n      return {}\n    }\n  }\n}\n```\n\n- Some tags also have aliases, for example, the `heading` alias can be used for `h1` through `h6` tags.\n\nFor example, if we want to configure it as follows:\n\n```ts\nconst customAttrs: CustomAttrs = {\n  h1: { class: ['heading'] },\n  h2: { class: ['heading'] },\n}\n```\n\nThis is equivalent to:\n```ts\nconst customAttrs: CustomAttrs = {\n  heading: { class: ['heading'] }\n}\n```\n\nIt can also receive a function for configuration.\n```ts\n// will set\n// class=\"heading heading-1\" for h1\n// class=\"heading heading-2\" for h2\n// .......\nconst customAttrs: CustomAttrs = {\n  heading: (node, combinedAttrs) =\u003e {\n    return { class: ['heading', `heading-${combinedAttrs.level}`] }\n  }\n}\n```\n\nPlease refer to the [doc](#doc-scoped-slot-and-custom-attrs), check parameter the function can accept.\n\n### Customize tag rendering with scoped slot\nThis feature is a bit more cumbersome in `Vue`. If `customAttrs` doesn't meet your needs, you can customize tags through a `scoped slot`.\n\n```html\n\u003cVueMarkdown\n  markdown=\"## hello world\"\n\u003e\n  \u003ctemplate #h2=\"{ children, ...props }\"\u003e\n    \u003ch1 v-bind=\"props\"\u003e\n      \u003cComponent :is=\"children\" /\u003e\n    \u003c/h1\u003e\n  \u003c/template\u003e\n\n\u003c/VueMarkdown\u003e\n```\n\nIf you want to display the text \"hello world\" in the example, you need to render the `children`. You can obtain the `children` from slot props, and it represents the `children` of the `h1`. Since I've turned it into a functional component, you must render it using `\u003cComponent\u003e`. You can also render `children` wherever you want.\n\nThe parameters received by the scoped slot are essentially the same. However, some slots may receive special parameters; for example, in the `ul` element, it might receive `depth`, indicating the nesting level in a list and specifying which level it is.\n\n```html\n\u003cVueMarkdown\n  :markdown=\"`## title\n\n- list 1\n  - list 2\n    - list 3\n`\"\n\u003e\n  \u003ctemplate #ul=\"{ children, depth, ...props }\"\u003e\n    \u003cul :class=\"['unordered-list', `list-depth-${depth}`]\"\u003e\n      \u003cComponent :is=\"children\" /\u003e\n    \u003c/ul\u003e\n  \u003c/template\u003e\n\n\u003c/VueMarkdown\u003e\n```\n\nAdditionally, similarly, the scoped slot also provides the same HTML tag alias as `customAttrs`. You can use the alias to insert into the slot.\n\n```vue\n\u003ctemplate\u003e\n  \u003cVueMarkdown\n    markdown=\"\n  # hello world\n\n  ## hello world\n\n  ### hello world\n\n  #### hello world\n\n  ##### hello world\n\n  ###### hello world\n  \"\n  \u003e\n    \u003ctemplate\n      #heading=\"{\n        children,\n        level,\n        key,\n      // ...props\n      }\"\n    \u003e\n      \u003cMyCustomHeading :key=\"key\" :level=\"level\"\u003e\n        \u003cComponent :is=\"children\" /\u003e\n      \u003c/MyCustomHeading\u003e\n    \u003c/template\u003e\n  \u003c/VueMarkdown\u003e\n\u003c/template\u003e\n```\n\nFor more, please refer to [scoped slot](#doc-scoped-slot-and-custom-attrs)\n\n#### re-render issue\nI would recommend keeping the state in the parent component and then passing it down to the Custom Component. When your Markdown changes, especially when implementing an editor feature, the position of elements in the tree nodes can frequently change, causing the components within to be remounted intermittently, resetting their states (even with keys added).\n\n### Use `\u003cslot\u003e` in markdown\nYou can use the `\u003cslot\u003e` syntax in Markdown, but you need to configure the following:\n\n1. setup `rehype-raw` plugins\n2. set `:sanitize=\"false\"`\n\n```sh\nnpm install rehype-raw\n```\n\nIn the following example, we write Vue-like slot syntax in Markdown and can insert this slot from the parent component. At the same time, you can obtain slot props.\n\nCurrently, it does not support Vue template syntax like `v-bind` (supporting this would be a bit more challenging).\n\n\u003e [!WARNING]\n\u003e Before `v0.2.0`,please use `\u003cslot name=\"custom\" /\u003e` to specify slot name\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { VueMarkdown } from '@crazydos/vue-markdown'\nimport remarkRaw from 'rehype-raw'\nimport { ref } from 'vue'\n\nconst markdown = ref(`\n## Hello Slot\n\n\u003cslot slot-name=\"custom\" msg=\"Insert from vue component\"\u003e\u003c/slot\u003e\n`)\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003c!-- simple usage --\u003e\n  \u003cVueMarkdown :markdown=\"markdown\" :rehype-plugins=\"[remarkRaw]\" :sanitize=\"false\"\u003e\n    \u003c!-- use 's-' + 'slot-name' --\u003e\n    \u003ctemplate #s-custom=\"{ msg }\"\u003e\n      \u003cspan\u003e {{ msg }} \u003c/span\u003e\n    \u003c/template\u003e\n  \u003c/VueMarkdown\u003e\n\u003c/template\u003e\n```\n\n### Security\nTo defend against various attacks (e.g., XSS), we use the `rehype-sanitize` unified plugin internally. To enable it, please add `:sanitize=\"true\"`.\n\nRefer to the [`rehype-sanitize`](https://github.com/rehypejs/rehype-sanitize) documentation for configuration details.\n\nHere's an example configuration that prevents the rendering of all HTML tags, displaying only text:\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { type SanitizeOptions, VueMarkdown } from '@crazydos/vue-markdown'\nimport { ref } from 'vue'\n\nconst sanitizeOption: SanitizeOptions = {\n  // Please pass the parameters of rehype-sanitize into the sanitizeOptions:\n  sanitizeOptions: {\n    tagNames: [],\n  },\n\n  // mergeOptions: Optional. Internally, we use the `deepmerge` package to combine `defaultSchema` and `sanitizeOptions`. You can adjust the merging behavior in `mergeOptions`.\n  mergeOptions: {\n    arrayMerge: (target, source) =\u003e {\n      return source\n    },\n  },\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cVueMarkdown\n    :markdown=\"content\"\n    :custom-attrs=\"customAttrs\"\n    :remark-plugins=\"[remarkGfm]\"\n    :rehype-plugins=\"[rehypeRaw]\"\n    :sanitize-options=\"sanitizeOption\"\n    sanitize\n  /\u003e\n\u003c/template\u003e\n```\n\n## Documentation\n### `\u003cVueMarkdown\u003e` \u0026 `\u003cVueMarkdownAsync\u003e` Props\n\n| Prop              | Description                                                                                                                                                                                                                                                                                                                              | Type                           | Default                        | Example                                                                                                                     |\n| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------- |\n| `markdown`        | Markdown content                                                                                                                                                                                                                                                                                                                         | `string`                       | `''`                           |                                                                                                                             |\n| `customAttrs`     | You can set custom attributes for each element, such as `href`, `target`, `rel`, `lazyload`, etc. The key is the HTML tag name, and the value can either be an object or a function that returns an object. The value will be passed to Vue's `h` function. You can refer to Vue's official documentation to learn how to configure `h`. | `CustomAttrs`                  | `{}`                           | ``` { img: { lazyload: true } } ```\u003cbr /\u003e \u003cbr /\u003e `{ h1: (node, combinedAttrs) =\u003e { return { class: ['title', 'mb-2'] } }} ` |\n| `remarkPlugins`   | Remark plugins. These plugins will be used between `remark-parse` and `remark-rehype`. See https://github.com/remarkjs/remark?tab=readme-ov-file#plugins                                                                                                                                                                                 | `PluggableList`                | `[]`                           |                                                                                                                             |\n| `rehypePlugins`   | rehype plugins. These plugins will be used after `remark-rehype` but before `rehype-sanitize`. See https://github.com/remarkjs/remark-rehype?tab=readme-ov-file#related                                                                                                                                                                  | ` PluggableList`               | `[]`                           |                                                                                                                             |\n| `sanitize`        | Whether to sanitize the HTML content. (use `rehype-sanitize`). You need to disable this option if you want to render `\u003cslot\u003e` in markdown content.                                                                                                                                                                                       | `boolean`                      | `false`                        |                                                                                                                             |\n| `sanitizeOptions` | Options for `rehype-sanitize`. see: https://github.com/syntax-tree/hast-util-sanitize#schema                                                                                                                                                                                                                                             | `SanitizeOptions`              | `{ allowDangerousHtml: true }` |                                                                                                                             |\n| `rehypeOptions`   | Options for `rehype-parse`. see: https://github.com/remarkjs/remark-rehype?tab=readme-ov-file#options                                                                                                                                                                                                                                    | `Omit\u003cTRehypeOptions, 'file'\u003e` | `{}`                           |                                                                                                                             |\n\n### `scoped slot` and `custom attrs`\nIn both scoped slots and `customAttrs`, you can receive additional parameters. Besides the HTML attributes that can be set in Markdown, `vue-markdown` also provides additional parameters.\n\n| Tag                                 | Parameter                          | Type      | Description                                                                                                                                                                                  |\n| ----------------------------------- | ---------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| All Elements                        | Any HTML attributes on the element | string    | `alt`, `title`, etc...                                                                                                                                                                       |\n| `h1` ~ `h6`, `heading`              | `level`                            | `number`  | Represents heading level                                                                                                                                                                     |\n| `h1` ~ `h6`, `heading`              | `level`                            | `number`  | Represents heading level                                                                                                                                                                     |\n| `code`, `inline-code`, `block-code` | `language`                         | `string`  | Represents language. e.g: `js`, `sh`, `md` ....                                                                                                                                              |\n|                                     | `languageOriginal`                 | `string`  | Typically in the form of `language-` followed by the language, for example, `language-js`, `language-sh`. Similar to the language parameter, but language provides a simpler representation. |\n|                                     | `inline`                           | `boolean` | inline code or block code                                                                                                                                                                    |\n|                                     | `content`                          | `string`  | A string which is text content of the code. (**v0.3.0+**). [see code example](#doc-code-content-example)                                                                                     |\n| `th`, `td`, `tr`                    | `isHead`                           | `boolean` | Indicates if it is in `thead`.                                                                                                                                                               |\n| `list`, `ol`, `ul`                  | `ordered`                          | `boolean` | Indicates if it is an `ordered-list` or not.                                                                                                                                                 |\n|                                     | `depth`                            | `number`  | In nested lists, it indicates the level at which the list is positioned. The first level is 0.                                                                                               |\n| `list-item`, `li`                   | `ordered`                          | `boolean` | Indicates if it is in an `ordered-list` or not.                                                                                                                                              |\n|                                     | `depth`                            | `number`  | In nested lists, it indicates the level at which the list is positioned. The first level is 0.                                                                                               |\n|                                     | `index`                            | `number`  | Represents the position of the list item within its current level. The first item at any level is considered 0.                                                                              |\n\n### Attributes aliases\nAttribute aliases can be used in the configuration of both `scoped slot` and `customAttrs`. Generally, if you are using aliases for configuration or inserting slots, the alias configuration will take precedence over its corresponding HTML tag.\n\n| Alias         | HTML Tags                          |\n| ------------- | ---------------------------------- |\n| `heading`     | `h1`, `h2`, `h3`, `h4`, `h5`, `h6` |\n| `list`        | `ol`, `ul`                         |\n| `list-item`   | `li`                               |\n| `inline-code` | `code` (inline)                    |\n| `block-code`  | `code` (block in `pre` tag)        |\n\n### Code content example\n```vue\n\u003c!-- For example --\u003e\n\u003ctemplate\u003e\n  \u003cVueMarkdown :markdown=\"markdown\"\u003e\n    \u003ctemplate #code=\"{ children, ...props }\"\u003e\n      \u003cMyCustomCodeBlock :code=\"props.content\" :lang=\"props.language\" /\u003e\n      \u003c!-- Or --\u003e\n      \u003ccode\u003e\n        \u003ccomponent :is=\"children\" /\u003e\n      \u003c/code\u003e\n    \u003c/template\u003e\n  \u003c/VueMarkdown\u003e\n\u003c/template\u003e\n```\n\n## Reference\n[react-markdown](https://github.com/remarkjs/react-markdown).\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshunnnet%2Fvue-markdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshunnnet%2Fvue-markdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshunnnet%2Fvue-markdown/lists"}