前言

前段时间做这个项目的时候，我需要一个Markdown编辑器，我在网上找到了一些开源的实现，但是没有一个能满足需求

说实话，这些开源项目也很难满足需求公司项目的需求。与其实现一个大而全面的项目，不如实现一个简单的项目，这个项目在源代码上很容易修改，并且有修改的核心功能

本文来源地址如下：https://github.com/jiulu313/HelloMarkDown(本地下载)

喜欢的朋友可以帮星，欢迎交流学习

先看看这个项目的效果图(图片是压缩的)

本文的目的是实现一个具有核心功能的简单易修改的项目

话不多说，看看思路

1如何将降价内容转换成html？

网上有一个开源的图书馆叫marked，地址如下：https://github.com/markedjs/marked.git

我们可以安装这个库，它使用起来非常简单，只是一个函数，传入标记内容，并返回html内容

Markdown内容转换成html，如何突出语法？

互联网上还有一个开源图书馆。地址如下：https://highlightjs.org/

我们可以使用这两个库

首先将降价内容解析为html内容

语法上突出显示html内容

让我们一步一步地实现代码

3代码实现

默认情况下，您已经创建了vue的项目，关于创建vue init web pack演示的项目，没有太多要说的。

3.1安装两个库，分别执行以下两个命令

NPM安装标记-保存NPM安装亮点. js-保存3.2首先，创建一个HelloMarkDown的Vue组件

布局文件包含以下代码：

模板div class=' MD _ root _ content ' v-bind : style=' { width : this . width，height: this.height} '！-功能按钮区域-div class=' button _ bar ' span v-: click=' add bold ' bb/b/span v-3360 click=' add下划线' bu/b/span v-3360 click=' add italic ' bi/b/span/div-主内容区域-div class=' content _ bar '！- markdown编辑器区域-div class=' markdown _ body ' text area ref=' ref _ MD _ edit ' class=' MD _ text area _ content ' v-model=' markstring '/text area/div！-解析成html区域-div class=' html _ body ' PV-html=' html string '/p/div/div/div/template主要分为上下两部分，是功能区的布局

下一部分分为两部分，左边是标记，右边是html部分

对应的样式代码如下：

样式范围。MD _ root _ content { display : flex；display :-web kit-flex；flex-direction:柱；} .button _ bar { width : 100%；高度： 40px；背景-color : # d4d 4d 4；display: flexdisplay :-web kit-flex；align-items:居中；} div . button _ bar span { width : 30px；线高： 40px；文本对齐：中心；颜色：橙色；cursor:指针；} .content _ bar { display: flexdisplay :-web kit-flex；宽度： 100%；高度： 100%；} .markdown _ body { width : 50%；高度： 100%；display: flexdisplay :-web kit-flex；} .html _ body { width : 50%；高度： 100%；display: flexdisplay :-web kit-flex；背景-color : # dfe 9 f1；} .MD _ text area _ content { flex : 1；高度： 100%；padding: 12px飞越：汽车；盒子尺寸：边框盒子；resize:无；outline:无；border:无；背景-color : # F4 F4；font-size : 14px；color: # 232323线高： 24px；}/style业务逻辑部分的代码如下：

从"标记的"//标记的脚本导入解析马尔敦语法的库从highlight . js‘/导入hljs对代码进行语法高亮的库从导入测试数据'./testData' //测试数据导出默认值{ name: 'HelloMarkDown '，prop : { width : { type : String，default: '1000px' }，height: { type: String，default: ' 600px ' }，data(){ return { markstring g 3360 ' '，htmlString: ' '，}，mounted(){ this。markstring=testData }，methods:加粗addBold(){ this。changeselectedtext(' * * '，' **') }，//斜体addtalic(){ this。changesselectedtext(' * * * '，' ***') }，addUnderline(){ this。changesselectedtext(' u '，'/u') }，changesselectedtext(startString，endString){让t=this .参考文献。ref _ MD _ edit if(窗口。get selection){ if(t . selection start！=未定义的t.selectionEnd！=未定义){ 0让str1=t.value.substring(0，t.selectionStart)让字符串2=t值。子字符串(t . selectionstart，t . selectionned)让str 3=t值。子串(t . selectionned)让结果=str 1 startString str 2 endString str 3t。值=结果。markstring=t . value } } }，watch: { //监听标记字符串变化markString:函数（值){已标记。setoptions({ render : new mark .Renderer()，gfm: true，tables: true，breaks: true，迂腐：假，迂腐：假，smartLists:真，smartypants 3360假})这个。html字符串=标记(值)}，//监听htmlString并对其高亮htmlString:函数（值){这个.$ NextTick(()={ const codes=document。queryselectorall(' .html_body预编码');//elem是一个目标代码。foreach(elem={ elem。innerhtml=' ulli ' elem。innerhtml。替换(/ n/g '， n/Lili ')' n/Li/ul ' hljs。高亮块(elem)；});});} } }/scriptscript中的代码解释

道具： {宽度： {类型：字符串，默认值： '1000px' }，高度： {类型：字符串，默认值： '600px' }，宽度：组件的宽度

高度：组件的高度

data() { return { markString: ' '，htmlString: ' '，} }，markString:保存我们输入的减价内容

htmlString:保存减价内容转换成的超文本标记语言内容，也就是通过显著的函数转换过来的

mounted(){ this。MarkString=TestDATa }，显示默认数据

//加粗addBold(){ this。changeselectedtext(' * * '，' **') }，//斜体addItalic(){ this。changeselectedtext(“* * *”、“* * *”)}、//加下划线增加下划线(){ this.changeSelectedText('u '，'/u') }，这三个函数都是调用了变更选择文本函数

主要是对鼠标选中的内容进行改变，比如加粗效果，是在选中文本的两边分别添加**

所以变更选择文本函数的作用就是在选中的文本两边添加不同的钔的符号

比如

this.changeSelectedText(“”、“”)，就是在选中的文本左边和右边都添加**

然后再把最新的内容赋值给这个$refs.ref_md_edit.value，同时也两会给标记字符串

这样就可以做到选中文本加粗效果了

//监听标记字符串变化markString:函数（值){已标记。setoptions({ render : new mark .Renderer()，gfm: true，tables: true，breaks: true，迂腐：假，迂腐：假，smartLists:真，smartypants 3360假})这个。html字符串=标记(值)}，此时是监听标记字符串的变化

然后调用显著的函数进行转换成超文本标记语言内容，并赋值给htmlString

标记。设置选项是设置一些配置，有兴趣的可以查一下这些配置的作用

//监听htmlString并对其高亮htmlString:函数（值){这个.$ NextTick(()={ const codes=document。queryselectorall(' .html_body预编码');//elem是一个目标代码。foreach(elem={ elem。innerhtml=' ulli ' elem。innerhtml。替换(/ n/g '， n/Lili ')' n/Li/ul ' hljs。高亮块(elem)；});});}原本通过highlight.js这个库在显示语法高亮的时候，是没有行号的。这里我进行了扩展

通过document.querySelectorAll(' .html_body预编码)找到节点列表

然后循环，动态添加、李，显示行号

但是，这需要添加几种样式来突出显示的css文件

在源副本中，我使用github.css将高亮显示的所有css文件复制到项目中

具体位置是资产/降价/款式/github。项目中的CSS

如果想使用其他主题，可以自己修改其他对应的css文件。这里使用了github的主题，所以只修改了github.css文件

如果你感兴趣，你可以看看

github.css文件提交记录

具体思路就是这些，水平有限，难免会有bug。如果你发现什么，欢迎询问

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。