refactor: renderer upgrade to ts (#379)

* refactor: renderer upgrade to ts * fix: options of katex * fix: render of katex * chore: update marked-katex-extension to version 5.1.2 * chore: build theme * chore: update renderer * feat: move build addition func * chore: styled content * chore: update renderer * chore: update packages * chore: update renderer * fix: logic of merged * chore: update renderer * chore: update * feat: add token type * feat: add styles func * chore: update renderer * fix: parse table cell * feat: horizontal table scrolling is supported * fix: strong tag * feat: parse strong and em label * fix: parse list * chore: update example docs * chore: update --------- Co-authored-by: Libin YANG <[email protected]>
doocs · Sep 4, 2024 · 2d40869 · 2d40869
1 parent 5ccdfd8
commit 2d40869
Show file tree

Hide file tree

Showing 10 changed files with 529 additions and 482 deletions.
diff --git a/README.md b/README.md
@@ -8,8 +8,7 @@
 
 <div align="center">
 
-[![status](https://img.shields.io/github/actions/workflow/status/doocs/md/build.yml?style=flat-square&labelColor=564341&color=42cc23
-)](https://github.com/doocs/md/actions) [![node](https://img.shields.io/badge/node-%3E%3D20-42cc23?style=flat-square&labelColor=564341)](https://nodejs.org/en/about/previous-releases) [![release](https://img.shields.io/github/v/release/doocs/md?style=flat-square&labelColor=564341&color=42cc23)](https://github.com/doocs/md/releases) [![license](https://img.shields.io/github/license/doocs/md?style=flat-square&labelColor=564341&color=42cc23)](./LICENSE) [![pr](https://img.shields.io/badge/prs-welcome-42cc23?style=flat-square&labelColor=564341)](https://github.com/doocs/md/pulls)<br>[![stars](https://img.shields.io/github/stars/doocs/md?style=flat-square&labelColor=564341&color=42cc23)](https://github.com/doocs/md/stargazers) [![forks](https://img.shields.io/github/forks/doocs/md?style=flat-square&labelColor=564341&color=42cc23)](https://github.com/doocs/md)
+[![status](https://img.shields.io/github/actions/workflow/status/doocs/md/build.yml?style=flat-square&labelColor=564341&color=42cc23)](https://github.com/doocs/md/actions) [![node](https://img.shields.io/badge/node-%3E%3D20-42cc23?style=flat-square&labelColor=564341)](https://nodejs.org/en/about/previous-releases) [![release](https://img.shields.io/github/v/release/doocs/md?style=flat-square&labelColor=564341&color=42cc23)](https://github.com/doocs/md/releases) [![license](https://img.shields.io/github/license/doocs/md?style=flat-square&labelColor=564341&color=42cc23)](./LICENSE) [![pr](https://img.shields.io/badge/prs-welcome-42cc23?style=flat-square&labelColor=564341)](https://github.com/doocs/md/pulls)<br>[![stars](https://img.shields.io/github/stars/doocs/md?style=flat-square&labelColor=564341&color=42cc23)](https://github.com/doocs/md/stargazers) [![forks](https://img.shields.io/github/forks/doocs/md?style=flat-square&labelColor=564341&color=42cc23)](https://github.com/doocs/md)
 
 </div>
 
@@ -29,7 +28,7 @@ Markdown 文档自动即时渲染为微信图文，让你不再为微信文章
 
 欢迎各位朋友随时提交 PR，让这款微信 Markdown 编辑器变得更好！如果你有新的想法，也欢迎在 [Discussions 讨论区](https://github.com/doocs/md/discussions)反馈。
 
-> 我们项目最新版本基于 Vue3 开发，基于 Vue2 的旧版本已经不再维护，如果你需要 Vue2 版本，请切换到 [1.x 分支](https://github.com/doocs/md/tree/1.x)。
+注：我们项目最新版本基于 Vue3 开发，基于 Vue2 的旧版本已经不再维护，如果你需要 Vue2 版本，请切换到 [1.x](https://github.com/doocs/md/tree/1.x) 分支。
 
 ## 功能特性
 

diff --git a/index.html b/index.html
@@ -15,15 +15,10 @@
       rel="apple-touch-icon-precomposed"
       href="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/gh/doocs/md/images/1648303220922-7e14aefa-816e-44c1-8604-ade709ca1c69.png"
     />
-    <!-- <link
-      rel="stylesheet"
-      href="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/gh/wechatsync/article-syncjs@latest/dist/styles.css"
-    /> -->
-    <!-- KaTeX CSS -->
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/[email protected].9/dist/katex.min.css"
-      integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV"
+      href="https://cdn.jsdelivr.net/npm/[email protected].11/dist/katex.min.css"
+      integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+"
       crossorigin="anonymous"
     />
     <style>
@@ -104,7 +99,6 @@
       }
     </script>
     <script type="module" src="/src/main.js"></script>
-    <!-- built files will be auto injected -->
   </body>
   <script src="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/gh/wechatsync/article-syncjs@latest/dist/main.js"></script>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "katex": "^0.16.11",
     "lucide-vue-next": "^0.428.0",
     "marked": "^14.1.0",
-    "marked-katex-extension": "^5.1.1",
+    "marked-katex-extension": "^5.1.2",
     "mermaid": "^11.0.2",
     "minio": "7.1.3",
     "node-fetch": "^3.3.2",

diff --git a/src/assets/example/markdown.md b/src/assets/example/markdown.md
@@ -12,8 +12,11 @@ Markdown 是一种轻量级标记语言，用于格式化纯文本。它以简
 
 ```markdown
 # 一级标题
+
 ## 二级标题
+
 ### 三级标题
+
 #### 四级标题
 ```
 
@@ -23,12 +26,12 @@ Markdown 是一种轻量级标记语言，用于格式化纯文本。它以简
 
 ### 2. 段落与换行：自然流畅
 
-Markdown 中的段落就是一行接一行的文本。要创建新段落，只需在两行文本之间空一行。  
+Markdown 中的段落就是一行接一行的文本。要创建新段落，只需在两行文本之间空一行。
 
 ### 3. 字体样式：强调你的文字
 
 - **粗体**：用两个星号或下划线包裹文字，如 `**粗体**` 或 `__粗体__`。
-- *斜体*：用一个星号或下划线包裹文字，如 `*斜体*` 或 `_斜体_`。
+- _斜体_：用一个星号或下划线包裹文字，如 `*斜体*` 或 `_斜体_`。
 - ~~删除线~~：用两个波浪线包裹文字，如 `~~删除线~~`。
 
 这些简单的标记可以让你的内容更有层次感和重点突出。
@@ -41,8 +44,8 @@ Markdown 中的段落就是一行接一行的文本。要创建新段落，只
 在列表中嵌套其他内容？只需缩进即可实现嵌套效果。
 
 - 无序列表项 1
-    1. 嵌套有序列表项 1
-    2. 嵌套有序列表项 2
+  1. 嵌套有序列表项 1
+  2. 嵌套有序列表项 2
 - 无序列表项 2
 
 1. 有序列表项 1
@@ -53,9 +56,9 @@ Markdown 中的段落就是一行接一行的文本。要创建新段落，只
 - **链接**：用方括号和圆括号创建链接 `[显示文本](链接地址)`。
 - **图片**：和链接类似，只需在前面加上 `!`，如 `![描述文本](图片链接)`。
 
-[访问 Google](https://www.google.com)
+[访问 Doocs](https://github.com/doocs)
 
-![Markdown Logo](https://markdown-here.com/img/icon256.png)
+![doocs](https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/gh/doocs/md/images/logo-2.png)
 
 轻松实现富媒体内容展示！
 
@@ -68,7 +71,8 @@ Markdown 中的段落就是一行接一行的文本。要创建新段落，只
 使用 `>` 来创建引用，只需在文本前面加上它。多层引用？在前一层 `>` 后再加一个就行。
 
 > 这是一个引用
->> 这是一个嵌套引用
+>
+> > 这是一个嵌套引用
 
 这让你的引用更加富有层次感。
 
@@ -78,7 +82,7 @@ Markdown 中的段落就是一行接一行的文本。要创建新段落，只
 - **代码块**：用三个反引号包裹，并指定语言，如：
 
 ```js
-console.log("Hello, Markdown!");
+console.log("Hello, Doocs!");
 ```
 
 语法高亮让你的代码更易读。
@@ -95,10 +99,11 @@ console.log("Hello, Markdown!");
 
 Markdown 支持简单的表格，用 `|` 和 `-` 分隔单元格和表头。
 
-| 名称   | 年龄 | 职业   |
-| ------ | ---- | ------ |
-| 小明   | 25   | 开发者 |
-| 小红   | 24   | 设计师 |
+| 项目人员                                    | 邮箱                   | 微信号       |
+| ------------------------------------------- | ---------------------- | ------------ |
+| [yanglbme](https://github.com/yanglbme)     | [email protected] | YLB0109      |
+| [YangFong](https://github.com/YangFong)     | [email protected] | yq2419731931 |
+| [thinkasany](https://github.com/thinkasany) | [email protected]   | thinkasany   |
 
 这样的表格让数据展示更为清爽！
 
@@ -129,10 +134,10 @@ $$
 Mermaid 是强大的可视化工具，可以在 Markdown 中创建流程图、时序图等。
 
 ```mermaid
-graph TD;  
-  A-->B;  
-  A-->C;  
-  B-->D;  
+graph TD;
+  A-->B;
+  A-->C;
+  B-->D;
   C-->D;
 ```
 
@@ -173,8 +178,6 @@ Markdown 是一种简单、强大且易于掌握的标记语言，通过学习
 
 ---
 
-欢迎关注我的公众号“**Doocs**”，原创技术文章第一时间推送。
-
 <center>
     <img src="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/gh/doocs/md/images/1648303220922-7e14aefa-816e-44c1-8604-ade709ca1c69.png" style="width: 100px;">
 </center>
diff --git a/src/config/theme.ts b/src/config/theme.ts
@@ -157,6 +157,11 @@ const defaultTheme: Theme = {
       // 'word-break': `break-all`,
     },
 
+    em: {
+      'font-style': `italic`,
+      'font-size': `inherit`,
+    },
+
     link: {
       color: `#576b95`,
     },
@@ -170,6 +175,7 @@ const defaultTheme: Theme = {
     strong: {
       'color': `var(--md-primary-color)`,
       'font-weight': `bold`,
+      'font-size': `inherit`,
     },
 
     table: {
@@ -186,9 +192,10 @@ const defaultTheme: Theme = {
     },
 
     td: {
-      border: `1px solid #dfdfdf`,
-      padding: `0.25em 0.5em`,
-      color: `#3f3f3f`,
+      'border': `1px solid #dfdfdf`,
+      'padding': `0.25em 0.5em`,
+      'color': `#3f3f3f`,
+      'word-break': `keep-all`,
     },
 
     footnote: {
@@ -295,6 +302,9 @@ const graceTheme = toMerged(defaultTheme, {
     codespan: {
     },
 
+    em: {
+    },
+
     link: {
     },
 

diff --git a/src/stores/index.js b/src/stores/index.js
@@ -6,7 +6,7 @@ import { useDark, useStorage, useToggle } from '@vueuse/core'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 import { altKey, codeBlockThemeOptions, colorOptions, fontFamilyOptions, fontSizeOptions, legendOptions, shiftKey, themeMap, themeOptions } from '@/config'
-import WxRenderer from '@/utils/renderer'
+import { initRenderer } from '@/utils/renderer'
 import DEFAULT_CONTENT from '@/assets/example/markdown.md?raw'
 import DEFAULT_CSS_CONTENT from '@/assets/example/theme-css.txt?raw'
 import { addPrefix, css2json, customCssWithTemplate, customizeTheme, downloadMD, exportHTML, formatDoc } from '@/utils'
@@ -45,7 +45,7 @@ export const useStore = defineStore(`store`, () => {
 
   const fontSizeNumber = fontSize.value.replace(`px`, ``)
 
-  const wxRenderer = new WxRenderer({
+  const renderer = initRenderer({
     theme: customizeTheme(themeMap[theme.value], { fontSize: fontSizeNumber, color: fontColor.value }),
     fonts: fontFamily.value,
     size: fontSize.value,
@@ -84,19 +84,16 @@ export const useStore = defineStore(`store`, () => {
   // 更新编辑器
   const editorRefresh = () => {
     codeThemeChange()
-    const renderer = wxRenderer
-    renderer.reset()
-    renderer.setOptions({ status: isCiteStatus.value, legend: legend.value })
-    marked.setOptions({ renderer })
+    renderer.reset({ status: isCiteStatus.value, legend: legend.value })
     let outputTemp = marked.parse(editor.value.getValue(0))
 
     // 去除第一行的 margin-top
     outputTemp = outputTemp.replace(/(style=".*?)"/, `$1;margin-top: 0"`)
     if (isCiteStatus.value) {
       // 引用脚注
-      outputTemp += wxRenderer.buildFootnotes()
+      outputTemp += renderer.buildFootnotes()
       // 附加的一些 style
-      outputTemp += wxRenderer.buildAddition()
+      outputTemp += renderer.buildAddition()
     }
 
     if (isMacCodeBlock.value) {
@@ -189,7 +186,7 @@ export const useStore = defineStore(`store`, () => {
   const updateCss = () => {
     const json = css2json(cssEditor.value.getValue())
     const newTheme = customCssWithTemplate(json, fontColor.value, customizeTheme(themeMap[theme.value], { fontSize: fontSizeNumber, color: fontColor.value }))
-    wxRenderer.setOptions({
+    renderer.setOptions({
       theme: newTheme,
     })
     editorRefresh()
@@ -276,14 +273,14 @@ export const useStore = defineStore(`store`, () => {
   }
 
   const themeChanged = withAfterRefresh((newTheme) => {
-    wxRenderer.setOptions({
+    renderer.setOptions({
       theme: customizeTheme(themeMap[newTheme], { fontSize: fontSizeNumber, color: fontColor.value }),
     })
     theme.value = newTheme
   })
 
   const fontChanged = withAfterRefresh((fonts) => {
-    wxRenderer.setOptions({
+    renderer.setOptions({
       fonts,
     })
 
@@ -292,7 +289,7 @@ export const useStore = defineStore(`store`, () => {
 
   const sizeChanged = withAfterRefresh((size) => {
     const theme = getTheme(size, fontColor.value)
-    wxRenderer.setOptions({
+    renderer.setOptions({
       size,
       theme,
     })
@@ -302,7 +299,7 @@ export const useStore = defineStore(`store`, () => {
 
   const colorChanged = withAfterRefresh((newColor) => {
     const theme = getTheme(fontSize.value, newColor)
-    wxRenderer.setOptions({
+    renderer.setOptions({
       theme,
     })
 

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -1,14 +1,31 @@
 import type { PropertiesHyphen } from 'csstype'
 
 type Block = `h1` | `h2` | `h3` | `h4` | `p` | `blockquote` | `blockquote_p` | `code_pre` | `code` | `image` | `ol` | `ul` | `footnotes` | `figure` | `hr`
-type Inline = `listitem` | `codespan` | `link` | `wx_link` | `strong` | `table` | `thead` | `td` | `footnote` | `figcaption`
+type Inline = `listitem` | `codespan` | `link` | `wx_link` | `strong` | `table` | `thead` | `td` | `footnote` | `figcaption` | `em`
+
+interface CustomCSSProperties {
+  [`--md-primary-color`]?: string
+  [key: `--${string}`]: string | undefined
+}
+
+export type ExtendedProperties = PropertiesHyphen & CustomCSSProperties
 
 export interface Theme {
-  base: PropertiesHyphen & { [`--md-primary-color`]?: string }
+  base: ExtendedProperties
   block: Record<Block, PropertiesHyphen>
   inline: Record<Inline, PropertiesHyphen>
 }
 
+export interface IOpts {
+  theme: Theme
+  fonts: string
+  size: string
+  legend: string
+  status: boolean
+}
+
+export type ThemeStyles = Record<Block | Inline, ExtendedProperties>
+
 export interface IConfigOption {
   label: string
   value: string