markdown-it-anchor - 锚点的自动 ID，可用于为页面的某些部分添加书签。markdown-it-footnote markdown...
$ npm i -S markdown-it-toc-done-right markdown-it-anchor 2、使用 # node.js 使用案例varmd=require("markdown-it")({html:false,xhtmlOut:true,typographer:true}).use(require("markdown-it-anchor"),{permalink:true,permalinkBefore:true,permalinkSymbol:'§'}).use(require("markdown-it-toc-do...
VuePress 使用 markdown-it (opens new window)来渲染 Markdown,上述大多数的拓展也都是通过自定义的插件实现的。想要进一步的话,你可以通过 .vuepress/config.js 的 markdown 选项,来对当前的 markdown-it 实例做一些自定义的配置: module.exports={markdown:{// markdown-it-anchor 的选项anchor:{permalink:f...
import markdownItEmoji from 'markdown-it-emoji'; import markdownItKatex from 'markdown-it-katex'; export default { data() { return { markdown: '# Hello, Vue Markdown!', plugins: [ markdownItAnchor, [markdownItToc, { includeLevel: [2, 3] }], markdownItEmoji, markdownItKatex ] ...
markdown-it-anchor is designed to reuse any existing id, making markdown-it-attrs a perfect fit for this use case. Make sure to load it before markdown-it-anchor!Then you can do something like this:# Your title {#your-custom-id}...
<script>import uslug from'uslug'import MarkdownIt from'markdown-it'import markdownItTocAndAnchor from'markdown-it-toc-and-anchor'data () {return{ mdStr:'相关md字符串', htmlStr:'',//渲染到页面tocArray: [], tocShow: [],//渲染到页面isFirstClickDir:true, ...
在这个示例中,我们使用了 markdown-it-highlightjs 插件来添加语法高亮,使用了 markdown-it-anchor 插件来添加锚点链接自动生成。你可以根据需要添加更多的插件和配置选项。 综上所述,通过以上步骤,你就可以在 Vue3 项目中成功使用 markdown-it 来解析和渲染 Markdown 文本了。
markdownItSetup(md) { mdConfig(md); // md.use(require('markdown-it-anchor')) // md.use(require('markdown-it-prism')) }, wrapperClasses:'markdown-container', }), Pages({ pagesDir:'pages', extensions: ['vue','md'], }), ...
plugin有markdown-it-for-inline、markdown-it-anchor等,以上例为例,如果你需要添加属性,可以在没有覆盖规则的情况下做一些事情。 接下来用markdown-it-for-inline插件来完成上例一样的功能。 constMarkdownIt=require('markdown-it');constiterator =require('markdown-it-for-inline');constmd =newMarkdownIt...