vue使用marked.js实现markdown转html并提取标题生成目录-优快云博客

本文介绍如何在Vue项目中使用marked.js库将Markdown内容转换为HTML，并展示如何提取文章标题生成目录。通过结合JavaScript，可以方便地处理Markdown格式的文本，提升阅读体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html：

<template>
    <div class="wrapper">
        <div class="container">
            <div class="menu">
                <ul class="menu-list">
                    <li v-for="(nav, index) in navList" 
　　　　　　　　　　　　　　:key="index" 
　　　　　　　　　　　　　　:class="{on: activeIndex === index}" 
　　　　　　　　　　　　　　@click="currentClick(index)">
                        <a href="javascript:;" @click="pageJump(nav.index)">{
    {nav.title}}</a>
                        <div v-if="nav.children.length > 0 && activeIndex === index" 
　　　　　　　　　　　　　　　　class="menu-children-list">
                            <ul class="nav-list">
                                <li v-for="(item, idx) in nav.children" 
　　　　　　　　　　　　　　　　　　　　　:key="idx" 
　　　　　　　　　　　　　　　　　　　　　:class="{on: childrenActiveIndex === idx}" 
　　　　　　　　　　　　　　　　　　　　　@click.stop="childrenCurrentClick(idx)">
                                    <a href="javascript:;" @click="pageJump(item.index)">
　　　　　　　　　　　　　　　　　　　　　　　　{
    {item.title}}
　　　　　　　　　　　　　　　　　　　　　 </a>