# @adapttive/vue-markdown 中文文档

规范地址：https://npmcn.com/package/%40adapttive/vue-markdown/

版本：4\.0\.2
npm 元数据更新时间：2022-08-28T09:39:32.709Z
中文译文更新时间：2026-11-06T00:25:06.193Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40adapttive/vue-markdown
原文对照：https://npmcn.com/package/%40adapttive/vue-markdown/?lang=original
项目主页：https://github.com/adapttive/vue-markdown#readme
源码仓库：https://github.com/adapttive/vue-markdown

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：458 kB，8 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：10 个
- 首次发布：2020-12-18T19:26:52.401Z
- 最新版本发布：2022-08-28T09:39:32.633Z
- 近 30 天下载量：8209（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：20（近 12 个月 0 个）

## 中文简介

用于 Vue 的强大和高速度标记

## 安装

```sh
npm install @adapttive/vue-markdown
```

也可以使用：`pnpm add @adapttive/vue-markdown`、`yarn add @adapttive/vue-markdown`、`bun add @adapttive/vue-markdown`

## README

# 标记

[![npm](https://img.shields.io/npm/v/@adapttive/vue-markdown.svg?style=flat)](https://www.npmjs.com/package/vue-markdown@adapttive/) [![npm](https://img.shields.io/npm/l/@adapttive/vue-markdown.svg?style=flat)](https://www.npmjs.com/package/vue-markdown@adapttive/) [![npm](https://img.shields.io/david/adapttive/vue-markdown)](https://www.npmjs.com/package/@adapttive/vue-markdown) [![npm](https://img.shields.io/bundlephobia/min/@adapttive/vue-markdown)](https://www.npmjs.com/package/@adapttive/vue-markdown) [![npm](https://img.shields.io/npm/dt/@adapttive/vue-markdown.svg?style=flat)](https://www.npmjs.com/package/@adapttive/vue-markdown)

> 如果你想要Vue标记 `vue1.X.X`请退房 [vue- markdown1. X.X](https://github.com/adapttive/vue-markdown/tree/v1)。 。 。 .

威力和高速的Markdown Parser为Vue服务.

快速开始 : `<vue-markdown>i am a ~~tast~~ **test**.</vue-markdown>`

支持的马克下语法 :

-   [x] 自动目录
-   [x] 表格类自定义( c)
-   [x] \*语法高亮
-   [x] 定义列表
-   [x] 击穿
-   [x] GFM 任务列表
-   [x] 缩略语
-   [x] 上标
-   [x] 下标
-   [x] 脚注
-   [x] 插入
-   [x] 爱莫吉
-   [x] 标记
-   [x] \*卡特克语

`*SyntaxHighlighter` 与 [棱镜](https://prismjs.com/) 建议

`*katex` 需要添加 [katex 密码](https://unpkg.com/katex/dist/katex.min.css)。 。 。 .

# 示例

[简单](https://github.com/adapttive/vue-markdown/blob/master/example/simple)

[网包简单](https://github.com/adapttive/vue-markdown/blob/master/example/webpack-simple)

[现场直播](https://adapttive.github.io/vue-markdown/)

# 安装

### 浏览器全局

> 这个 **数字** 文件夹包含 `vue-markdown.js` 中导出组件 `window.VueMarkdown` 对象.

```html
<body>
  <vue-markdown>i am a ~~tast~~ **test**.</vue-markdown>
</body>
<script src="path/to/vue.js"></script>
<script src="path/to/vue-markdown.js"></script>
<script>
    Vue.use(VueMarkdown);
    var vm = new Vue({
        el: "body"
    });
</script>
```

### 国家预防机制

```shell
$ npm install --save @adapttive/vue-markdown
```

### 雅伦

```shell
$ yarn add @adapttive/vue-markdown --save
```

### 从vue-markdown 2.3 移动

-   你只需要替换依赖性 `package.json`数字 :

```
{
  "dependencies": {
-  "vue-markdown": "^2.2.4
+  "vue-markdown": "npm:@adapttive/vue-markdown@^X.X.X"
  }
}
```

## 常见JS

```js
var VueMarkdown = require('@adapttive/vue-markdown');

new Vue({
  components: {
    'vue-markdown': VueMarkdown
  }
})
```

## ES6 (Vue-CLI 用户)

在通过Yarn或国家防范机制安装之后,请在您想要制作Markdown的Vue组件的脚本部分使用以下片段.

```js
import VueMarkdown from '@adapttive/vue-markdown'

new Vue({
  components: {
    VueMarkdown
  }
})
```

# 槽数

```html
<vue-markdown>this is the default slot</vue-markdown>
```

在您上面的 vue 组件中设置了中间软件后, 使用嵌入式的标记下, 和在中间写入一样容易 `vue-markdown` 标签.

VueMarkdown 有一个默认槽,用于写入 `markdown` 来源.

TIP: 默认槽仅使 **一次** 在开始, 它会覆盖道具 `source`来啊!

# 道具

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 手表 | 阵列 | `["source", "show", "toc"]` | 当此数组中的道具改变时 HTML 自动刷新 |
| 来源 | 字符串 | `null` | 标记下源代码 |
| 显示 | 布尔 | `true` | 启用自动渲染到默认位置 |
| (简体中文) | 布尔 | `true` | 启用源代码中的 HTML 语法 |
| xhtml 输出 | 布尔 | `true` | `<br></br>` => `<br />` |
| 间断 | 布尔 | `true` | `\n` => `<br>` |
| 链接 | 布尔 | `true` | 自动转换类似 URL 的文本以链接 |
| 爱莫吉 | 布尔 | `true` | `:)` => `😃` |
| 打字员 | 布尔 | `true` | 允许一些语言中性替换和引用美化 |
| 更新棱镜 | 布尔 | `true` | 如果为真, vue- markdown 将自动通过 Prism.js 调用所有代码块的重排([使用棱镜.js](https://npmcn.com/package/%40adapttive/vue-markdown/#readme-using-prism.js)(中文(简体) ) |
| 朗语前缀 | 字符串 | `language-` | 栅栏区块的 CSS 语言前缀 |
| 引用 | 字符串 | `“”‘’` | 使用情况 `“”‘’` 对于中文, `„“‚‘` 德语, `«»„“` 俄语 |
| 表格类 | 字符串 | `table` | 自定义 html 类 `<table>` |
| 任务列表 | 布尔 | `true` | 让GFM任务列表可变, `false` gFM 显示为只读的复选框 |
| 目标c | 布尔 | `false` | 启用自动目录 |
| 目标编号 | 字符串 | `undefined` | 要渲染 TOC 的 HTML ID |
| toc 类 | 字符串 | `table` | 自定义 html 类 `<ul>` 包装 TOC |
| 一级 | 数目 | `2` | 使用情况 `2` 如果你想跳过 `<h1>` 从技选中心 |
| 最后一级 | 数目 | `'toc-first-level' + 1` | 使用情况 `5` 如果你想跳过 `<h6>` 从技选中心 |
| 托克-锁定链接 | 布尔 | `true` | 启用标题中的自动锁定链接 |
| 托克-锁定级 | 字符串 | `toc-anchor` | 自定义锚类名称 |
| toc-anchor-link-同义词 | 字符串 | `#` | 自定义锁定链接符号 |
| 托克-锁定-链接-空间 | 布尔 | `true` | 允许在锁定链接和标题之间插入空格 |
| toc-anchor-link-class 分类 | 字符串 | `toc-anchor-link` | 自定义锁定链接符号类名 |
| 托克-锁定-链接-前 | 布尔 | `true` | 允许您在标题中预置/追加主机链接 |
| 锁定属性 | 对象 | `{}` | 锁定标签属性, 如 `target: '_blank'` 或者说 `rel: 'nofollow'` |
| 放弃 | 函数 (字符串) 字符串 | `null` | 在下标解析前过滤功能 |
| 离职后 | 函数 (字符串) 字符串 | `null` | 标出后过滤功能 |
| 内入 | 布尔 | `false` | 结果将不会被包入 `<p>` 标记 |

# 活动

| 名称 | 参数 \[类型\] | 说明 |
| --- | --- | --- |
| 已执行 | 出Httml \[结 | 完成时发送 |
| 已移交 | tocHtml \[结 | 当 TOC 完成时发送, 如果toc\[道具\] 是则永远不要发送 `false` |

# 使用棱镜.js

1.  访问 [下载页面](https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript)
2.  选择您项目的所有选项
3.  在页面底部下载JS和CSS
4.  把它们包含在您的 `index.html` **确定在您之前包含棱镜** `app.js`

# 插件

```html
 <template>
   <div>
     <vue3-markdown-it :source='source' :plugins='plugins' />
   </div>
 </template>

 <script>
 import katex from 'markdown-it-katex';
 import tasklists from 'markdown-it-task-lists';
 import externalPreview from 'markdown-it-external-preview';
 import VueMarkdown from 'vue-markdown';

 export default {
   components: {
     VueMarkdown
   },
   data() {
     return {
       plugins: [
         {
           plugin: katex,
           options: { throwOnError: false, errorColor: ' #cc0000' }
         },
         {
           plugin: tasklists,
           options: { enabled: this.taskLists }
         },
         {
           plugin: externalPreview
         }
       ]
     }
   }
 }
 </script>
```

-   确保您添加插件的依赖性 :
    -   `"highlight.js": "^10.4.0"`
    -   `"markdown-it-external-preview": "^1.0.4"`
    -   `"markdown-it-katex": "npm:@iktakahiro/markdown-it-katex@^4.0.1"`

# 谢谢

-   [缩放](https://github.com/markdown-it/markdown-it)
-   [转接](https://github.com/transtone)
-   [**白兰地**](https://github.com/brandonferens)

# 捐款

-   [miaolz123 维基月球](https://github.com/miaolz123)
-   [白兰地](https://github.com/brandonferens)
-   [布里亚班克罗夫特](https://github.com/brianbancroft)
-   [尼科拉斯语name](https://github.com/nikolasp)
-   [后卫](https://github.com/mbackonja)
-   [远足1](https://github.com/Endi1)
-   [打印屏幕](https://github.com/printscreen)
-   [杀死](https://github.com/killix)
-   [勒福尔](https://github.com/lefnord)
-   [弗洛里安·温德尔伯恩](https://github.com/FlorianWendelborn)
-   [诺亚卡多萨](https://github.com/NoahCardoza)
-   [米尔辛赫](https://github.com/milindsingh)

# 许可证

版权(c)2016年

-   [miaolz123 维基月球](https://github.com/miaolz123) 以 [麻省理工学院](https://opensource.org/licenses/MIT)
-   [米尔辛赫](https://github.com/milindsingh) 以 [麻省理工学院](https://opensource.org/licenses/MIT)

## 常见问题

### @adapttive/vue-markdown 是什么？

用于 Vue 的强大和高速度标记

### 如何安装 @adapttive/vue-markdown？

在项目目录运行 npm install @adapttive/vue-markdown，或使用 pnpm add / yarn add / bun add。

### @adapttive/vue-markdown 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @adapttive/vue-markdown 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @adapttive/vue-markdown 可以商用吗？

@adapttive/vue-markdown 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @adapttive/vue-markdown 的下载量有多少？

根据 npm 官方下载统计，@adapttive/vue-markdown 在 2026/10/05 – 2026/11/03 这 30 天内被下载 8,209 次，日均约 274 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @adapttive/vue-markdown 还在维护吗？

最新版本 4\.0\.2 发布于 2022/08/28（4 年前）；至今共发布 20 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/12/19。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。