//加粗 addBold() { this.changeSelectedText("**","**") }, //斜体 addItalic() { this.changeSelectedText("***","***") }, //加下划线 addUnderline() { this.changeSelectedText("<u>","</u>") },
这三个函数都是调用了 changeSelectedText 函数
主要是对鼠标选中的内容进行改变，比如加粗效果，是在选中文本的两边分别添加 **
所以changeSelectedText函数的作用就是在选中的文本两边添加不同的md的符号
比如
this.changeSelectedText("","") ，就是在选中的文本左边和右边都添加**
然后再把最新的内容赋值给 this.$refs.ref_md_edit.value，同时也两会给markString
这样就可以做到选中文本加粗效果了
//监听markString变化 markString: function (value) { marked.setOptions({ renderer: new marked.Renderer(), gfm: true, tables: true, breaks: true, pedantic: false, sanitize: false, smartLists: true, smartypants: false }) this.htmlString = marked(value) },
此时是监听markString的变化
然后调用marked函数进行转换成html内容，并赋值给htmlString
marked.setOptions 是设置一些配置，有兴趣的可以查一下这些配置的作用
//监听htmlString并对其高亮 htmlString: function (value) { this.$nextTick(() => { const codes = document.querySelectorAll(".html_body pre code"); // elem 是一个 object codes.forEach(elem => { elem.innerHTML = "<ul><li>" + elem.innerHTML.replace(/\n/g, "\n</li><li>") + "\n</li></ul>" hljs.highlightBlock(elem); }); }); }
原本通过 highlight.js这个库在显示语法高亮的时候，是没有行号的。这里我进行了扩展
通过 document.querySelectorAll(".html_body pre code") 找到nodeList
然后对其循环，动态添加 ul , li, 这样就可以显示行号了
不过这需要对 highlight的css文件添加几个样式
源码里面我把highlight中的css文件全部copy到项目中了，使用的是github.css
具体位置是在项目中的 assets/markdown/styles/github.css
如果想使用其它的主题，可以自己修改其它的对应的css文件，这里使用了github的主题，所以只修改了github.css这一个文件
有兴趣的可以查看一下
github.css文件的提交记录
具体的思路就是这些，水平有限，难免有bug，如有发现，欢迎提出