vue 将markdown字符串转html、修改主题、生成目录
前言
将 markdown 字符串转成 html 显示出来，同时把目录也提取出来一起显示。可以使用 marked 来读取 markdown 字符串解析成 html
marked官网：https://marked.js.org/
marked
安装
使用 marked 前需要对其进行安装
npm install marked -s
使用
安装好后，在使用到的页面引入使用即可。
<template>
<div>
<div v-html="content"></div>
</div>
</template>
<script>
import { marked } from 'marked'
export default {
data(){
return {
textData: "# JavaScript高级程序设计\n## 内容简介\n 本书是JavaScript经典图书的新版。第4版全面、深入地介绍了JavaScript开发者必须掌握的前端开发技术，涉及JavaScript的基础特性和高级特性。书中详尽讨论了JavaScript的各个方面，从JavaScript的起源开始，逐步讲解到新出现的技术，其中重点介绍ECMAScript和DOM标准。在此基础上，接下来的各章揭示了JavaScript的基本概念，包括类、期约、迭代器、代理，等等。另外，书中深入探讨了客户端检测、事件、动画、表单、错误处理及JSON。本书同时也介绍了近几年来涌现的重要新规范，包括Fetch API、模块、工作者线程、服务线程以及大量新API。\n## 作者简介\n马特·弗里斯比（Matt Frisbie），Stealth Startup公司CTO，曾担任谷歌公司软件工程师，精通前端技术，拥有十余年Web开发经验，除本书外另著有AngularJS等前端主题图书。毕业于伊利诺伊大学厄巴纳-尚佩恩分校。\n## 目录\n### 第 1章 什么是JavaScript 1\n#### 1.1 简短的历史回顾 1\n#### 1.2 JavaScript实现 2\n#### 1.3 JavaScript版本 9\n#### 1.4 小结 10\n### 第 2章 HTML中的JavaScript 11\n#### 2.1 script元素 11\n#### 2.2 行内代码与外部文件 18\n#### 2.3 文档模式 18\n#### 2.4 noscript元素 19\n测试代码\n```language\nvar a = 1;\n\nfunction fun(){\n console.log(11111)\n}\nfun()\nconosole.log(a)\n```\n\n#### 2.5 小结 20\n### 第3章 语言基础 21\n#### 3.1 语法 21\n#### 3.2 关键字与保留字 23\n#### 3.3 变量 24\n#### 3.4 数据类型 30\n#### 3.5 操作符 56\n#### 3.6 语句 73\n#### 3.7 函数 80\n#### 3.8 小结 82\n### 第4章 变量、作用域与内存 83\n#### 4.1 原始值与引用值 83\n#### 4.2 执行上下文与作用域 87\n#### 4.3 垃圾回收 94\n#### 4.4 小结 101"
}
},
computed:{
content(){
return marked(this.textData)
}
}
}
</script>
效果展示
markdown-css
marked 转 html已实现，但是整体的样式效果看起来和在markerdown文档里看的有差别，那是因为还没有引入 markerdown 的样式，接下来需要引入样式
安装
npm install github-markdown-css
使用
导入 github-markdown-css 样式，并绑定样式
import "github-markdown-css"
<div v-html="content" class="markdown-body"></div>
绑定样式后，实现效果：
修改主题
如果还是觉得默认的效果不满意，可以去这里：https://theme.typoraio.cn/ 选择你想要的主题换上去。使用也很简单，选择自己想要的模板，点击下载样式就好了。
以上就是 markdown 字符串转成 html 并显示了，接下来就是获取目录。获取目录视项目情况而定，因为项目需求中需要使用到目录，所以需要生成目录。
生成目录
找资料时，恰好看到了这个博主的文章，生成目录就是借鉴了这个博主，使用到了里面的一些源码：https://segmentfault.com/a/1190000040462508
获取目录
获取文章中 h1-h6 标题，这里我选择使用 jq 获取，速度快
getCatalog() {
const h = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
var elements = $(':header')
let hElements = []
for (const key of elements) {
if (h.indexOf(key.localName) > -1) {
let text
if (key.children && key.children.length) {
text = this.getText(key.children)
} else {
text = key.innerHTML
}
hElements.push({
hLevel: parseInt(key.localName[1]),
text,
id: key.localName,
uuid: key.id,
})
}
}
console.log('hElements:', hElements)
},
getText() {
let result = null
if (!arr.length) return
for (let i = 0; i < arr.length; i++) {
if (arr[i].children && arr[i].children.length) {
result = this.getText(arr[i].children)
} else {
result = arr[i].innerHTML
}
}
return result
},
获取到的数据是这样子的：
完成以上操作后，拿到 hElements 数组，处理数据，方便树形插件显示
toTree(flatArr) {
var tree = []
var copyArr = flatArr.map(function (item) {
return item
})
// 根据指定级别查找该级别的子孙级，并删除掉已经查找到的子孙级
var getChildrenByLevel = function (currentLevelItem, arr, level) {
if (!currentLevelItem) {
return
}
// 将level值转成负数，再进行比较
var minusCurrentLevel = -currentLevelItem.hLevel
var children = []
for (var i = 0, len = arr.length; i < len; i++) {
var levelItem = arr[i]
if (-levelItem.hLevel < minusCurrentLevel) {
children.push(levelItem)
} else {
// 只找最近那些子孙级
break
}
}
// 从数组中删除已经找到的那些子孙级，以免影响到其他子孙级的查找
if (children.length > 0) {
arr.splice(0, children.length)
}
return children
}
var getTree = function (result, arr, level) {
// 首先将数组第一位移除掉，并添加到结果集中
var currentItem = arr.shift()
currentItem.level = level
result.push(currentItem)
while (arr.length > 0) {
if (!currentItem) {
return
}
// 根据当前级别获取它的子孙级
var children = getChildrenByLevel(currentItem, arr, level)
// 如果当前级别没有子孙级则开始下一个
if (children.length == 0) {
currentItem = arr.shift()
currentItem.level = level
if (currentItem) {
result.push(currentItem)
}
continue
}
currentItem.children = []
// 查找到的子孙级继续查找子孙级
getTree(currentItem.children, children, level + 1)
}
}
getTree(tree, copyArr, 1)
return tree
},
最终的实现效果：
代码高亮
文档中的代码部分是没有高亮的，需添加代码高亮。
这里使用到 highlight.js 插件
highlight.js官网地址：https://highlightjs.org/
安装 highlight.js
npm install highlight.js -S
使用
import hljs from 'highlight.js'
//引入一种语法的高亮 【注意】要引入这个css 不然可能会失效
import 'highlight.js/styles/atom-one-light.css'
// 高亮语法
hljs.highlightAll()
效果展示：
点击目录跳转
这里有两种方式：a标签的锚点定位 和 scrollIntoView() 方法
锚点定位
点击后跳转到指定标题，没有动画效果
<a class="anchor" :href="`#${data.uuid}`">
{{ data.text }}
</a>
scrollIntoView() 方法
点击跳转后有平滑效果
<div @click="toDiv(data.uuid)">{{ data.text }}</div>
...
toDiv(uuid) {
document.getElementById(uuid).scrollIntoView({
behavior: 'smooth',
})
},
源码
<template>
<div class="content">
<el-tree class="tree" ref="tree" node-key="uuid" :data="treeData" :props="defaultProps" default-expand-all>
<div class="custom-tree-node" slot-scope="{ node, data }">
<div @click="toDiv(data.uuid)">{{ data.text }}</div>
<!-- <a class="anchor" :href="`#${data.uuid}`">
{{ data.text }}
</a> -->
</div>
</el-tree>
<div v-html="content" class="markdown-body html-content"></div>
</div>
</template>
<script>
import "github-markdown-css"
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-light.css' //引入一种语法的高亮
import {
marked
} from 'marked'
export default {
data() {
return {
treeData: [],
defaultProps: {
label: 'text',
children: 'children',
},
textData: "# JavaScript高级程序设计\n## 内容简介\n 本书是JavaScript经典图书的新版。第4版全面、深入地介绍了JavaScript开发者必须掌握的前端开发技术，涉及JavaScript的基础特性和高级特性。书中详尽讨论了JavaScript的各个方面，从JavaScript的起源开始，逐步讲解到新出现的技术，其中重点介绍ECMAScript和DOM标准。在此基础上，接下来的各章揭示了JavaScript的基本概念，包括类、期约、迭代器、代理，等等。另外，书中深入探讨了客户端检测、事件、动画、表单、错误处理及JSON。本书同时也介绍了近几年来涌现的重要新规范，包括Fetch API、模块、工作者线程、服务线程以及大量新API。\n## 作者简介\n马特·弗里斯比（Matt Frisbie），Stealth Startup公司CTO，曾担任谷歌公司软件工程师，精通前端技术，拥有十余年Web开发经验，除本书外另著有AngularJS等前端主题图书。毕业于伊利诺伊大学厄巴纳-尚佩恩分校。\n## 目录\n### 第 1章 什么是JavaScript 1\n#### 1.1 简短的历史回顾 1\n#### 1.2 JavaScript实现 2\n#### 1.3 JavaScript版本 9\n#### 1.4 小结 10\n### 第 2章 HTML中的JavaScript 11\n#### 2.1 script元素 11\n#### 2.2 行内代码与外部文件 18\n#### 2.3 文档模式 18\n#### 2.4 noscript元素 19\n测试代码\n``` javascript\nvar a = 1;\n\nfunction fun(){\n console.log(11111)\n}\nfun()\nconosole.log(a)\n```\n\n#### 2.5 小结 20\n### 第3章 语言基础 21\n#### 3.1 语法 21\n#### 3.2 关键字与保留字 23\n#### 3.3 变量 24\n#### 3.4 数据类型 30\n#### 3.5 操作符 56\n#### 3.6 语句 73\n#### 3.7 函数 80\n#### 3.8 小结 82\n### 第4章 变量、作用域与内存 83\n#### 4.1 原始值与引用值 83\n#### 4.2 执行上下文与作用域 87\n#### 4.3 垃圾回收 94\n#### 4.4 小结 101"
}
},
created() {
this.$nextTick(() => {
this.getCatalog()
hljs.highlightAll()
})
},
computed: {
content() {
return marked(this.textData)
}
},
methods: {
// 根据内容获取目录
getCatalog() {
const h = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
var elements = $(':header')
let hElements = []
for (const key of elements) {
if (h.indexOf(key.localName) > -1) {
let text
if (key.children && key.children.length) {
text = this.getText(key.children)
} else {
text = key.innerHTML
}
hElements.push({
hLevel: parseInt(key.localName[1]),
text,
id: key.localName,
uuid: key.id,
})
}
}
// console.log('hElements:', hElements)
let result = this.toTree(hElements)
this.treeData = result
// 目录默认选中第一个
this.$nextTick(() => {
if (!result) return
this.$refs.tree.setCurrentKey(result[0].uuid)
})
// console.log('result:', result)
},
toTree(flatArr) {
var tree = []
var copyArr = flatArr.map(function(item) {
return item
})
// 根据指定级别查找该级别的子孙级，并删除掉已经查找到的子孙级
var getChildrenByLevel = function(currentLevelItem, arr, level) {
if (!currentLevelItem) {
return
}
// 将level值转成负数，再进行比较
var minusCurrentLevel = -currentLevelItem.hLevel
var children = []
for (var i = 0, len = arr.length; i < len; i++) {
var levelItem = arr[i]
if (-levelItem.hLevel < minusCurrentLevel) {
children.push(levelItem)
} else {
// 只找最近那些子孙级
break
}
}
// 从数组中删除已经找到的那些子孙级，以免影响到其他子孙级的查找
if (children.length > 0) {
arr.splice(0, children.length)
}
return children
}
var getTree = function(result, arr, level) {
// 首先将数组第一位移除掉，并添加到结果集中
var currentItem = arr.shift()
currentItem.level = level
result.push(currentItem)
while (arr.length > 0) {
if (!currentItem) {
return
}
// 根据当前级别获取它的子孙级
var children = getChildrenByLevel(currentItem, arr, level)
// 如果当前级别没有子孙级则开始下一个
if (children.length == 0) {
currentItem = arr.shift()
currentItem.level = level
if (currentItem) {
result.push(currentItem)
}
continue
}
currentItem.children = []
// 查找到的子孙级继续查找子孙级
getTree(currentItem.children, children, level + 1)
}
}
getTree(tree, copyArr, 1)
return tree
},
getText() {
let result = null
if (!arr.length) return
for (let i = 0; i < arr.length; i++) {
if (arr[i].children && arr[i].children.length) {
result = this.getText(arr[i].children)
} else {
result = arr[i].innerHTML
}
}
return result
},
toDiv(uuid) {
document.getElementById(uuid).scrollIntoView({
behavior: 'smooth',
})
},
}
}
</script>
<style>
.content {
display: flex;
/* padding: 30px; */
overflow: hidden;
height: 100vh;
}
.tree {
margin-right: 15px;
overflow-y: auto;
width: 280px;
flex-shrink: 0;
}
.html-content {
overflow-y: auto;
}
</style>
最终效果
