为什么用 Markdown？

一套通用的文本编辑语法，可以在各大网站上统一标准、渲染出统一的样式，比较简单易学。

推荐的 Md 编辑器：https://github.com/bytedance/bytemd
阅读官方文档，下载编辑器主体、以及 gfm（表格支持）插件、highlight 代码高亮插件

1
2
3
4
5
6
7
// vue3-li 用这个下载
npm i @bytemd/vue-next
// 代码高亮插件 和 表格插件
npm i @bytemd/plugin-highlight @bytemd/plugin-gfm
// 掘金主题
npm i juejin-markdown-themes

新建MdEditor.vue组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<template>
  <Editor
    :value="value"
    :plugins="plugins"
    :mode="mode"
    :locale="zhHans"
    @change="handleChange"
  />
</template>

<script setup lang="ts">
import gfm from "@bytemd/plugin-gfm";
import highlight from "@bytemd/plugin-highlight";
import "highlight.js/styles/vs.css"; // 代码块高亮
import "juejin-markdown-themes/dist/juejin.min.css"; // 掘金主题
import "@/styles/bytemd/index.css"; // 自定义样式 复制官方的来自己进行修改
import { Editor, Viewer } from "@bytemd/vue-next";
import { ref, withDefaults, defineProps } from "vue";
import zhHans from "bytemd/locales/zh_Hans.json"; //汉化
/**
 * 定义组件属性类型 父组件 --> 传给该组件的接收类型
 */
interface Props {
  value: string;
  mode?: string; // 这个是md 模式 是分割还是左右编辑区和视图
  handleChange: (v: string) => void;
}
const plugins = [
  gfm(),
  highlight(),
];
/**
 * 给组件指定初始值
 */
const props = withDefaults(defineProps<Props>(), {
  value: () => "",
  mode: () => "split",
  handleChange: (v: string) => {
    console.log(v);
  },
});
</script>
<style>
// 消除 github 图标
.bytemd-toolbar-icon.bytemd-tippy.bytemd-tippy-right:last-child {
  display: none;
}
// 如果编辑区有左间距 那么可以用这个
.bytemd-editor .CodeMirror .CodeMirror-lines {
  margin: 0 !important;
}
// 如果视图区有左间距 那么可以用这个
.bytemd-preview .markdown-body {
  margin: 0 !important;
}
// 自定义样式里面改高度
.bytemd {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji;
  color: #24292e;
  border: 1px solid #e1e4e8;
  background-color: #fff;
  height: 580px !important;
}
// 如果扩大后他不是层级最高的可以去自定义的里面改z-index
.bytemd-fullscreen.bytemd {
  z-index: 888;
  position: fixed;
  inset: 0;
  border: none;
  height: 100vh !important;
}
</style>

父组件引用MdEditor.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <MdEditor :value="mdValue" :handle-change="mdHandleChange" />
</template>

<script setup lang="ts">
import MdEditor from "@/components/MdEditor.vue";
import { ref } from "vue";
// md
const mdValue = ref("");
const mdHandleChange = (v: string) => {
  mdValue.value = v;
};
</script>
<style scoped></style>

引入掘金主题后，他有许多的其他主题供我们选择

掘金主题官网

主题