uni-app 根据markdown类型注释生成文档结构，形成大纲视图，可以快速跳转

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app 根据markdown类型注释生成文档结构，形成大纲视图，可以快速跳转

hbuilderX自带的文档结构图，定位某个模块其实不容易，特别是html很大的时候，因为要看到里面的ID或class才能确定

其实我们的注释才是最清晰明了的，特别是块注释，可以很明确的快速定位，如果说html本身结果层次分明还好， js 或css就太依赖于注释了

希望可以基于markdown或其他规则将注释生成文档结构大纲，比如注释块中用markdown的一级标题二级标题之类的(注释前有# 或##)，全部提取出来按顺序排就好，并链接位置跳转，当然能折叠最好

其于这种模式的好处是不管你文档本身是html 还是 php 或其他任何语言都可以生成

目前好像没有哪个编辑器有这个功能，也许会成为HbuilderX的特色。。。期待大神们


Harmonyos Next教程
1 回复

在uni-app中，通过解析Markdown类型的注释来生成文档结构并形成大纲视图，你可以借助一些第三方库，比如marked和markdown-it，来解析Markdown内容，然后结合Vue或uni-app的组件和路由功能实现大纲视图的快速跳转。以下是一个简单的示例，展示如何解析Markdown注释并生成大纲视图。

首先，你需要安装markdown-it库，用于解析Markdown内容：

npm install markdown-it

然后，在你的uni-app项目中创建一个页面，用于显示解析后的Markdown内容和大纲视图。

main.js（或你的入口文件）：

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

MarkdownParser.js（创建一个工具文件，用于解析Markdown）：

import MarkdownIt from 'markdown-it'

const md = new MarkdownIt({
    html: true,
    xhtmlOut: true,
    breaks: true,
    linkify: true,
    typographer: true,
    quotes: '“”‘’',
})

export function parseMarkdown(content) {
    const html = md.render(content)
    const tokens = md.parse(content, {})
    const toc = generateToc(tokens)
    return { html, toc }
}

function generateToc(tokens) {
    // 简单的TOC生成逻辑，仅处理标题（h1-h6）
    const toc = []
    let levelStack = []
    tokens.forEach(token => {
        if (token.type === 'heading_open') {
            const level = parseInt(token.tag.slice(1), 10)
            const title = md.renderer.renderToken(token, 'inline', [])
            if (!levelStack.length) {
                levelStack.push(level)
                toc.push({ level, title, id: createId(title) })
            } else {
                while (levelStack[levelStack.length - 1] > level) {
                    levelStack.pop()
                }
                if (levelStack[levelStack.length - 1] !== level) {
                    levelStack.push(level)
                }
                toc.push({ level, title, id: createId(title), parentId: toc[toc.length - 1]?.id })
            }
        }
    })
    return toc
}

function createId(title) {
    // 生成唯一的ID，这里简单处理为标题的小写形式并替换空格为下划线
    return title.toLowerCase().replace(/\s+/g, '_')
}

你的页面组件（比如MarkdownView.vue）：

<template>
    <!-- 省略了部分模板代码 -->
</template>

<script>
import { parseMarkdown } from '@/utils/MarkdownParser'

export default {
    data() {
        return {
            content: `
# 标题1
## 子标题1.1
### 子子标题1.1.1
# 标题2
`,
            html: '',
            toc: []
        }
    },
    mounted() {
        const { html, toc } = parseMarkdown(this.content)
        this.html = html
        this.toc = toc
    },
    methods: {
        // 省略了跳转到指定标题的方法
    }
}
</script>

上述代码展示了如何使用markdown-it解析Markdown内容，并生成一个简单的大纲视图（TOC）。你可以根据实际需要扩展和完善此功能，比如添加锚点跳转功能，处理更复杂的Markdown语法等。

回到顶部