特色功能

本文将介绍 Sodesu 相较于 Waline 官方前端的一些特色功能。

评论样式

在博客中，我们有时会希望对用户的评论应用一些样式，Sodesu 提供了这个功能。

import Sodesu from 'sodesu-comment';
Sodesu.init({
  el: '#comment-container',
  serverURL: 'https://your.server.url/',
  dark: 'html.dark',
  pageview: true,
  commentClassName: 'prose prose-neutral dark:prose-invert min-w-0 max-w-none',
});

其中的 commentClassName 会被应用到每条评论的容器上。

自定义 Markdown 渲染器

Sodesu 默认使用 snarkdown 渲染 Markdown 预览。作为一个体积只有 1.15kB Gzipped 的 Markdown 渲染器，snarkdown 存在一些缺陷，例如不支持代码高亮。

Sodesu 提供了自定义 Markdown 渲染器的功能，你可以使用任何你喜欢的 Markdown 渲染器，例如 marked、markdown-it 和 remark 等。

你可以通过在 init 时传入自定义参数来自定义 Markdown 渲染器。

import Sodesu from 'sodesu-comment';
Sodesu.init({
  el: '#comment-container',
  // ...
  renderPreview: async (text) => myProcessor(text), // 需要返回 Promise
});

对于使用 remark 的情况，项目代码中提供了一个示例，你正在阅读的文档页面也使用了它。因此，你可以试着在评论框里键入如下内容，并点击“预览”图标：

| 114  | 514 |
| :--: | :-: |
| 1919 | 810 |

$$
\frac{\text d\rho}{\text dt}+\rho\bold\nabla\cdot\vec V=0
$$

它的渲染结果应该如下所示：

114	514
1919	810

$$\frac{\text d\rho}{\text dt}+\rho\bold\nabla\cdot\vec V=0$$

从一致性的角度出发，我会推荐 markdown-it，这是 waline 后端使用的渲染器。你可以参照它的代码，对渲染器进行配置。