说实话，这些开源项目也很难满足需求公司项目的需求，与其实现一个大而全的项目，倒不如实现一个简单的，易于在源码上修改的项目，核心功能都有的，以供修改使用
本文的源码地址如下：https://github.com/jiulu313/HelloMarkDown（本地下载）
喜欢的朋友可以帮忙star一下，欢迎交流学习
先看一下本项目的效果图（图片经过压缩）
本文的目的就是实现一个有核心功能的，简单，易于修改的项目
话不多说，来看思路
1 markdown内容如何转换成 html？
网上有一个开源的库叫 marked，地址如下：https://github.com/markedjs/marked.git
我们可以安装这个库，使用很简单，就一个函数，传进去markdown内容，就返回了html内容
2 markdown内容转换成了html，如何进行语法高亮？
网上也有一个开源的库，地址如下 ：https://highlightjs.org/
我们可以使用这两个库
先把markdown内容解析成html内容
把html内容进行语法高亮
下面我们来一步一步实现代码
3 代码实现
默认你已经创建好了vue的项目 ， 创建vue项目 vue init webpack demo
这里面不多讲。
3.1 安装两个库，分别执行下面两条命令
npm install marked --save npm install highlight.js --save
3.2 首先创建一个 HelloMarkDown 的 Vue组件
布局文件的代码如下：
<template> <div v-bind:style="{width:this.width,height: this.height}"> <!--功能按钮区--> <div> <span v-on:click="addBold"><B>B</B></span> <span v-on:click="addUnderline"><B>U</B></span> <span v-on:click="addItalic"><B>I</B></span> </div> <!--主要内容区--> <div> <!--markdown编辑器区--> <div> <textarea ref="ref_md_edit" v-model="markString"> </textarea> </div> <!--解析成html区--> <div> <p v-html="htmlString"></p> </div> </div> </div> </template>
主要分为上下两块，上面是功能区的布局
下面一块，分左右两部分，左边是markdown，右边是显示html部分
对应的样式代码如下：
<style scoped> .md_root_content { display: flex; display: -webkit-flex; flex-direction: column; } .button_bar { width: 100%; height: 40px; background-color: #d4d4d4; display: flex; display: -webkit-flex; align-items: center; } div.button_bar span { width: 30px; line-height: 40px; text-align: center; color: orange; cursor: pointer; } .content_bar { display: flex; display: -webkit-flex; width: 100%; height: 100%; } .markdown_body { width: 50%; height: 100%; display: flex; display: -webkit-flex; } .html_body { width: 50%; height: 100%; display: flex; display: -webkit-flex; background-color: #dfe9f1; } .md_textarea_content { flex: 1; height: 100%; padding: 12px; overflow: auto; box-sizing: border-box; resize: none; outline: none; border: none; background-color: #f4f4f4; font-size: 14px; color: #232323; line-height: 24px; } </style>
业务逻辑部分的代码如下：
<script> import marked from 'marked' //解析mardown语法的库 import hljs from 'highlight.js' //对代码进行语法高亮的库 import testData from '../testData' //测试数据 export default { name: "HelloMarkDown", props: { width: { type: String, default: '1000px' }, height: { type: String, default: '600px' } }, data() { return { markString: '', htmlString: '', } }, mounted(){ this.markString = testData }, methods: { //加粗 addBold() { this.changeSelectedText("**","**") }, //斜体 addItalic() { this.changeSelectedText("***","***") }, addUnderline() { this.changeSelectedText("<u>","</u>") }, changeSelectedText(startString,endString){ let t = this.$refs.ref_md_edit if (window.getSelection) { if (t.selectionStart != undefined && t.selectionEnd != undefined) { let str1 = t.value.substring(0, t.selectionStart) let str2 = t.value.substring(t.selectionStart, t.selectionEnd) let str3 = t.value.substring(t.selectionEnd) let result = str1 + startString + str2 + endString + str3 t.value = result this.markString = t.value } } } }, watch: { //监听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) }, //监听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); }); }); } } } </script>
script中的代码解释
props: { width: { type: String, default: '1000px' }, height: { type: String, default: '600px' } },
width: 组件的宽度
height:组件的高度
data() { return { markString: '', htmlString: '', } },
markString：保存我们输入的markdown内容
htmlString：保存markdown内容转换成的html内容，也就是通过marked函数转换过来的
mounted(){ this.markString = testData },
显示默认数据