这是我参与「第四届青训营 」笔记创作活动的的第6天
一 前言
写了这么多文章，不知道大家有没有注意到文章编辑页面右上角这个Github图标，鼠标放置上方还有源代码的字样。既然是源代码，那毫无疑问指的就是掘金写文章的markdown编辑器，点击就会跳转Github展示代码。
你也可以点击这里查看：bytedance/bytemd: Hackable Markdown Editor and Viewer (github.com)
(本项目基于Vue2开发，相关代码呈现的语法为Vue)
仿掘金项目github地址 (github.com/IamTrust/ju…)
二 如何使用
2.1 下载（安装vue里使用）
这里下载的是vue版本，其他版本在源代码readme里有介绍。
npm install @bytemd/vue -S
yarn add @bytemd/vue -S
2.2 文件结构
<template>
<div>
<Editor class="editos" :value="value" /> //文章编辑区域
<Viewer class="viewer" :tabindex="2" :value="value" ></Viewer> //文章预览区域
</div>
</template>
<script>
import { Editor, Viewer } from '@bytemd/vue'
import zhHans from 'bytemd/lib/locales/zh_Hans.json'
export default {
data () {
return {
value: '', // 获取的markdow文档内容
}
},
components: { Editor, Viewer }, // 组件注册 }
</script>
在获取掘金文章数据时，我们知道了掘金文章样式其实是放在前端进行渲染的，因此我们只要取用markdown编辑器的一小部分，Viewer标签就可以完成工作。很显然，我们只需要把请求到的数据放入数据源的value即可。
2.3 文章数据处理
在后端发来的数据中，有些数据非常的奇怪，连markdown编辑器都转换不了，就需要我们用正则进行字符匹配进行一一转换，可能会有些慢，而且还可能存在我们没有察觉到的字符错误。
result = result.replace(/\\n/g, '\n').replace(/\\u002F/g,'/').replace(/\\u003E/g,'>');
这样我们便得到了整理好的数据，仔细看看，其格式是不是特别像我们在编辑器写的内容。
然后就可以将数据放入数据源的value中。
2.4 文章样式渲染
如果是这样放到页面上渲染的话，我们就会发现你输入的theme: fancy也会出现在页面上，这其实是我们告诉编辑器想要的Markdown主题，不应该出现在页面上。并且你输入了这个主题，文章样式并没有发生改变。这时候我们就需要借助bytemd插件的功能。
npm i # @bytemd/plugin-frontmatter //解析前沿
npm i juejin-markdown-themes -S //配置主题
在readme中还有一些其他的插件介绍，目前我们需要的是解析前沿。
// 放入 :plugins="plugins" 属性
<Viewer class="viewer" :tabindex="2" :value="value" :plugins="plugins"></Viewer>
import frontmatter from '@bytemd/plugin-frontmatter'
const plugins = [frontmatter()]
export default {
data () {
return {
plugins, // 插件
}
},
这样文章里就不会出现markdown前沿等字样。
但不知道是我使用的原因，还是该插件功能就是如此，解析了前沿，但是并没有返回给我前沿的内容（😅这叫个什么事儿~），以至于还需要我将整篇文章获取进行提取主题字样，这样就显得这个插件很鸡肋。
// 设置文章的风格
articleStyle(arr){ //形参为文章数据
for(let i=0; i<arr.length; i++){
if(/theme/g.test(arr[i])){
let fg = arr[i].split(':')[1].trim();
import(`juejin-markdown-themes/dist/${fg}.min.css`) // 动态引入样式
break;
}
if(i>10){ // 认为没有使用前沿，启用默认主题
import(`juejin-markdown-themes/dist/juejin.min.css`)
break;
}
}
}
总结
至此，文章的样式也算是圆满竣工。
但是还是想吐槽一下官方文档，真的一言难尽，看得我真的云里雾里😇，浪费了很多时间。
既然自家的markdown编辑器都开源了，也是欢迎大家使用的嘛，希望文档人性化些，提几点建议：
- 插件如何使用的介绍真的太少了，很容易让人产生歧义错误使用。
- 来个中文文档 求求！
