标记
如果你想要Vue标记
vue1.X.X请退房 vue- markdown1. X.X。 。 。 .
威力和高速的Markdown Parser为Vue服务.
快速开始 : <vue-markdown>i am a ~~tast~~ **test**.</vue-markdown>
支持的马克下语法 :
- 自动目录
- 表格类自定义( c)
- *语法高亮
- 定义列表
- 击穿
- GFM 任务列表
- 缩略语
- 上标
- 下标
- 脚注
- 插入
- 爱莫吉
- 标记
- *卡特克语
*SyntaxHighlighter 与 棱镜 建议
*katex 需要添加 katex 密码。 。 。 .
示例
安装
浏览器全局
这个 数字 文件夹包含
vue-markdown.js中导出组件window.VueMarkdown对象.
<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>
国家预防机制
$ npm install --save @adapttive/vue-markdown
雅伦
$ 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
var VueMarkdown = require('@adapttive/vue-markdown');
new Vue({
components: {
'vue-markdown': VueMarkdown
}
})
ES6 (Vue-CLI 用户)
在通过Yarn或国家防范机制安装之后,请在您想要制作Markdown的Vue组件的脚本部分使用以下片段.
import VueMarkdown from '@adapttive/vue-markdown'
new Vue({
components: {
VueMarkdown
}
})
槽数
<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(中文(简体) ) |
| 朗语前缀 | 字符串 | 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
- 访问 下载页面
- 选择您项目的所有选项
- 在页面底部下载JS和CSS
- 把它们包含在您的
index.html确定在您之前包含棱镜app.js
插件
<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"
谢谢
捐款
许可证
版权(c)2016年