markdown-it-container vue
时间: 2024-01-11 18:03:29 浏览: 115
Markdown-it-container是一个用于在Markdown文档中添加自定义容器的插件,而Vue是一个流行的JavaScript框架,用于构建交互式UI界面。在Vue项目中使用Markdown-it-container可以让我们更方便地添加自定义容器,比如在Markdown文档中添加代码块、提示框、警告框等。我们可以将Markdown文本解析为HTML,并将HTML嵌入到Vue组件中,从而实现更丰富的UI效果。
相关问题
vue markdown-it 左边文档内容右边基于标题导航,点击标题导航跳转到对应的文档内容
实现这个功能可以分为两个步骤:
1. 使用markdown-it解析Markdown文本,并将解析后的HTML嵌入到Vue组件中显示文档内容。
```
<template>
<div class="markdown-it-container">
<div class="markdown-it-content" v-html="html"></div>
</div>
</template>
<script>
import MarkdownIt from 'markdown-it'
export default {
data () {
return {
text: '## 标题2\n\n这是文档内容'
}
},
computed: {
html () {
const md = new MarkdownIt()
return md.render(this.text)
}
}
}
</script>
```
2. 根据文档内容生成基于标题的导航,并实现点击标题导航跳转到对应的文档内容。
```
<template>
<div class="markdown-it-container">
<div class="markdown-it-nav">
<ul>
<li v-for="(item, index) in toc" :key="index">
<a :href="`#heading-${index}`">{{ item.text }}</a>
</li>
</ul>
</div>
<div class="markdown-it-content" v-html="html"></div>
</div>
</template>
<script>
import MarkdownIt from 'markdown-it'
export default {
data () {
return {
text: '## 标题2\n\n这是文档内容'
}
},
computed: {
html () {
const md = new MarkdownIt()
const toc = []
const result = md.render(this.text, {
// 添加anchor插件,用于生成标题锚点
plugins: [
require('markdown-it-anchor')
],
// 生成目录
toc: true,
tocCallback: (tocMarkdown, tocArray, tocHtml) => {
toc.splice(0, toc.length)
toc.push(...tocArray)
}
})
// 将目录保存到data中
this.toc = toc
return result
}
}
}
</script>
<style scoped>
.markdown-it-nav {
position: fixed;
top: 0;
right: 0;
width: 20%;
max-height: 100vh;
overflow-y: auto;
border-left: 1px solid #ccc;
padding: 20px;
}
.markdown-it-content h2,
.markdown-it-content h3,
.markdown-it-content h4,
.markdown-it-content h5,
.markdown-it-content h6 {
margin-top: 80px;
}
</style>
```
在上面的代码中,我们使用了`markdown-it-anchor`插件来生成标题锚点,并通过`toc`选项生成目录,然后将目录保存到data中。在导航中,我们遍历目录生成导航列表,并将每个标题的锚点设置为对应的跳转链接,然后在文档内容中给每个标题添加唯一的id,用于实现跳转。同时,在样式中为导航和文档内容设置样式,使其呈现出左右两栏的效果。
vue markdown 如何生成导航目录
你可以使用 `markdown-it` 和 `markdown-it-toc-done-right` 插件来生成导航目录。
首先,在 Vue 项目中安装这两个插件:
```
npm install markdown-it markdown-it-toc-done-right --save
```
然后在需要生成导航目录的组件中引入插件并配置:
```javascript
import MarkdownIt from 'markdown-it'
import MdToc from 'markdown-it-toc-done-right'
export default {
data() {
return {
markdown: '# Hello\n\n## Subheading\n\n### Subsubheading\n\n## Another subheading'
}
},
computed: {
toc() {
const md = new MarkdownIt()
md.use(MdToc, {
level: [2, 3],
containerClass: 'toc'
})
return md.render(this.markdown).toc
}
}
}
```
在模板中使用 `v-html` 渲染 Markdown,并使用 `v-html` 渲染生成的导航目录:
```html
<template>
<div>
<div v-html="toc"></div>
<div v-html="$options.filters.markdown(markdown)"></div>
</div>
</template>
```
最后,你还需要在 CSS 中定义 `.toc` 类的样式,用于设置导航目录的样式。
以上就是在 Vue 中生成 Markdown 导航目录的步骤。