虽然 Gridea 提供了对接 gitalk 和 Disqus 的选项，但是这两个国内访问有亿点困难，所以就想自己写一个评论系统。

都 2023 年了，评论如果还是纯文本那也太 low 了，得加上 markdown。

不用开源 vue 组件的原因

现成的 vue 组件有很多，但是用起来有点膈应人。

  • 首先就是 vue 版本的问题，有些不支持 vue3 也没写；
  • 其次，有些组件功能做的挺多，但我用不到啊，装个组件 node_modules 直接多了 150MB，安装卸载都巨折磨；
  • 还有在装依赖的时候明明 yarn 的 log 显示没问题，但 import 后 vite 总是提示 504 Bad Gateway，就是没找到这个依赖，换了几个组件才发现这玩意是 vite 的问题，得删 node_modules 重新装才能找到。

所以我就打算自己缝一个简单点的。

Marked + highlight.js

终于是让我找到了梦中情包 Marked，这个包提供了解析 markdown 文本的方法以及众多自定义选项，并且性能比 markdown-it 高一些（而且我没找到 markdown-it 的 ES 包，只能以 script src 的方式引入，一点也不优雅）。

Marked 虽然没有自带代码高亮，但是它提供了一个钩子函数，可以对接其他的代码高亮工具，例如 highlight.js 或 pygmentize.js。据 Marked 官网上说：

Unlike highlight.js the pygmentize.js library uses asynchronous highlighting.

pygmentize.js 是异步处理的，但是同样的，这原本是由 python 开发的代码高亮工具，我只找到了它的 Node 包，并且这个 Node 包还只是包装了一下 python 的工具。

言归正传，来用一个小项目来缝一缝这两玩意。

实践

首先建项目，用的是 vue3 + vite + TypeScript。

装依赖：yarn add marked highlight.js

为 highlight 选一个主题，我选的是 github 默认主题，在 main.ts 里加上一行：

import 'highlight.js/styles/github.css'

话不多说，直接上代码了，一般看注释就行。

<script setup lang="ts">
import { computed, ref } from "vue";
import { marked } from 'marked'
import hljs from "highlight.js";

const content = ref('# wow')

marked.setOptions({
  // 使用默认的渲染类
  renderer: new marked.Renderer,
  // GitHub Flavored Markdown, 生成 GitHub 格式。
  gfm: true,
  // 异步解析
  async: true,
  // 高亮函数，使用 highlight.js。本来还有第三个参数作为发生错误时的回调。
  highlight(code: string, language: string): string {
    return hljs.highlight(code, { language, ignoreIllegals: true }).value
  },
})
const result = computed(() => {
  return marked(content.value)
})
</script>

<template>
  <div class="main">
    <textarea v-model="content" style="font-size: 1.5rem;padding: 5px"></textarea>
    <div v-html="result"></div>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.main {
  display: flex;
  width: 100vw;
  height: 100vh;
}
.main > * {
  flex: 1;
  resize: none;
}
</style>

2023-01-17