feat: mermaid support

ifyun · ifyun · commit e61621cf01ad · 2024-03-04T19:03:06.000+08:00
- fix link render
- add mermaid support
- change menu/nav style
diff --git a/README.md b/README.md
@@ -8,3 +8,6 @@ Markdown 渲染引擎为 [markdown-it](https://github.com/markdown-it/)，可引
 
 - 代码高亮：[highlight.js](https://highlightjs.org/)
 - 数学公式：[katex](https://katex.org/)
+- 图表：[mermaid](https://mermaid.js.org/)
+
+文档：[GitHub Pages](https://ifyun.github.io/jian-doc/)
diff --git a/index.html b/index.html
@@ -13,6 +13,10 @@
       rel="stylesheet"
       href="https://unpkg.com/katex@0.16.9/dist/katex.min.css" />
     <script src="https://unpkg.com/katex@0.16.9/dist/katex.min.js"></script>
+    <script type="module">
+      import mermaid from "https://unpkg.com/mermaid@10/dist/mermaid.esm.min.mjs"
+      window.mermaid = mermaid
+    </script>
     <script>
       window.$config = {
         prefix: "docs",
diff --git a/public/docs/README.md b/public/docs/README.md
@@ -6,6 +6,8 @@
 - 创建一个 `<div id="app"></div>` 元素
 - 引入 `jian-doc.umd.js`
 
+可以从此处获取：[jian-doc.umd.js](https://ifyun.github.io/jian-doc/jian-doc.umd.js)
+
 ```html
 <!doctype html>
 <html lang="en">
@@ -102,6 +104,19 @@
 <script src="https://unpkg.com/katex@0.16.9/dist/katex.min.js"></script>
 ```
 
+### 图表
+
+引入 `mermaid`，挂载到 `window` 对象：
+
+```html
+<script type="module">
+  import mermaid from "https://unpkg.com/mermaid@10/dist/mermaid.esm.min.mjs"
+  window.mermaid = mermaid
+</script>
+```
+
+代码块语言为 `mermaid` 即可编写图表。
+
 ## 文档样式测试
 
 ### 段落
@@ -144,3 +159,47 @@ A_{m,n} =
   a_{m,1} & a_{m,2} & \cdots & a_{m,n}
  \end{pmatrix}
 $$
+
+### Mermaid
+
+序列图：
+
+```mermaid
+sequenceDiagram
+  participant C as Client
+  participant S as Server
+
+  Note right of S: LISTEN
+  C ->> S : SYN = 1, seq = x
+  Note left of C: SYN_SENT
+  S ->> C : SYN = 1, ACK = 1, seq = y, ack = x + 1
+  Note right of S: SYN_RECV
+  C ->> S : ACK = 1, seq = x + 1, ack = y + 1
+  Note left of C: ESTABLISHED
+  Note right of S: ESTABLISHED
+```
+
+状态图：
+
+```mermaid
+stateDiagram-v2
+  [*] --> NEW
+  NEW --> RUNNABLE: Thread.start()
+
+  state RUNNABLE {
+    RUNNING --> READY
+    READY --> RUNNING
+  }
+
+  RUNNABLE --> BLOCKED: 未获取到锁
+  BLOCKED --> RUNNABLE: 获取到锁
+
+  RUNNABLE --> TIMED_WAITING: Thread.sleep(long)\nObject.wait(long)
+  TIMED_WAITING --> RUNNABLE: Object.notify()
+
+  RUNNABLE --> WAITING: Thread.join()
+  WAITING --> RUNNABLE: Object.notify()
+
+  RUNNABLE --> TERMINATED: 执行完成
+  TERMINATED --> [*]
+```
diff --git a/src/core.ts b/src/core.ts
@@ -101,13 +101,26 @@ function renderMenu() {
     })
 }
 
-export function renderContent(path: string) {
+export function renderContent(path: string, rerender: boolean = false) {
+  const colorScheme = window.localStorage.getItem("color-scheme")
   const content = document.querySelector("#content .markdown-body")!
 
   getDoc(path)
     .then((val) => {
       content.innerHTML = md.render(val)
-      setTimeout(() => renderNav(path), 0)
+      setTimeout(() => {
+        if (!rerender) {
+          renderNav(path)
+        }
+
+        window.mermaid.initialize({
+          startOnLoad: false,
+          theme: colorScheme ?? "",
+          themeVariables: { fontSize: 14 }
+        })
+
+        window.mermaid.run()
+      }, 0)
     })
     .catch((err) => {
       content.innerHTML = err
diff --git a/src/event.ts b/src/event.ts
@@ -8,9 +8,9 @@ export function initUI() {
 
   if (colorScheme === "dark") {
     document.documentElement.setAttribute("color-scheme", colorScheme)
-    document.getElementById("theme-btn")!.innerHTML = darkMode
-  } else {
     document.getElementById("theme-btn")!.innerHTML = lightMode
+  } else {
+    document.getElementById("theme-btn")!.innerHTML = darkMode
   }
 
   if (window.$config.logoRound) {
@@ -34,16 +34,22 @@ export function toggleMenu() {
 }
 
 export function toggleTheme() {
-  const themeButton = document.getElementById("theme-btn")
   const root = document.documentElement
   const colorScheme = root.getAttribute("color-scheme") == "dark" ? "" : "dark"
+  const themeButton = document.getElementById("theme-btn")
+
   root.setAttribute("color-scheme", colorScheme)
   window.localStorage.setItem("color-scheme", colorScheme)
 
   if (colorScheme === "dark") {
-    themeButton!.innerHTML = darkMode
-  } else {
     themeButton!.innerHTML = lightMode
+  } else {
+    themeButton!.innerHTML = darkMode
+  }
+
+  if (document.querySelector(".mermaid")) {
+    // Rerender for mermaid
+    renderContent(window.location.hash.split("#")[1], true)
   }
 }
 
@@ -87,12 +93,6 @@ export function hashChange(e: HashChangeEvent) {
   const url = e.newURL.split("#")[1]
   const docAndId = url.split("?id=")
 
-  const paddingTop = parseInt(
-    getComputedStyle(document.documentElement).getPropertyValue(
-      "--content-padding"
-    )
-  )
-
   if (oldDoc !== docAndId[0] && docAndId[0].trim().length > 0) {
     menuActive({ doc: docAndId[0] })
     renderContent(docAndId[0])
@@ -101,10 +101,12 @@ export function hashChange(e: HashChangeEvent) {
     const anchor = document.getElementById(id)
 
     if (anchor) {
+      const marginTop = getComputedStyle(anchor)["marginTop"]
+
       document.getElementById("content")!.scrollTop =
         anchor.offsetTop -
         (anchor.parentNode as HTMLElement).offsetTop +
-        paddingTop / 2
+        parseInt(marginTop)
     }
 
     menuActive({ doc: docAndId[0], id })
diff --git a/src/plugins/fence-plugin.ts b/src/plugins/fence-plugin.ts
@@ -10,8 +10,8 @@ export const FencePlugin = (md: MarkdownIt) => {
     let content = tokens[index].content
     let info = tokens[index].info
 
-    if (info.trim() === "") {
-      info = "text"
+    if (info === "mermaid") {
+      return `<pre class="mermaid">${content}</pre>`
     }
 
     // Render code and line number
diff --git a/src/plugins/link-plugin.ts b/src/plugins/link-plugin.ts
@@ -14,7 +14,7 @@ export const LinkPlugin = (md: MarkdownIt) => {
     const title = tokens[index + 1].content
     const href = tokens[index].attrGet("href")!
 
-    if (!href.startsWith("http://") || !href.startsWith("https://")) {
+    if (!href.startsWith("http://") && !href.startsWith("https://")) {
       tokens[index].attrSet("data-title", title)
       tokens[index].attrSet("data-doc", href)
       tokens[index].attrSet("href", `./#${href}`)
diff --git a/src/style/global.scss b/src/style/global.scss
@@ -1,5 +1,6 @@
 :root {
   font-size: 14px;
+  --markdown-font-size: 16px;
   --font: "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
   --background: #ffffff;
   --content-padding: 28px;
@@ -11,7 +12,7 @@
   /* element color */
   --side-color-back: #f8f8fa;
   --active-color: #f7ab1d;
-  --link-color: #2f81f7;
+  --link-color: #5bae50;
   --inline-code-color: #61aeee;
   --inline-code-back: #f8f8fa;
   --block-code-back: #f8f8fa;
@@ -147,8 +148,9 @@ strong {
 
         &.active,
         &:hover {
+          font-weight: var(--font-weight-bold);
           color: var(--active-color);
-          transition: all 300ms linear;
+          transition: all 200ms linear;
         }
       }
     }
@@ -252,8 +254,9 @@ strong {
 
               &.active,
               &:hover {
+                font-weight: var(--font-weight-bold);
                 color: var(--font-color);
-                transition: all 300ms linear;
+                transition: all 200ms linear;
               }
             }
           }
diff --git a/src/style/markdown.scss b/src/style/markdown.scss
@@ -1,4 +1,5 @@
 .markdown-body {
+  font-size: var(--markdown-font-size);
   line-height: 1.5em;
   padding: 0 2.5em;
 
@@ -47,11 +48,17 @@
     padding-left: 24px;
   }
 
+  pre.mermaid {
+    display: flex;
+    align-items: center;
+    background: transparent;
+  }
+
   pre {
-    font-family: "JetBrains Mono", "Consolas", monospace;
-    background: var(--block-code-back);
     display: flex;
     flex-direction: column;
+    font-family: "JetBrains Mono", "Consolas", monospace;
+    background: var(--block-code-back);
 
     > .code-title {
       display: flex;
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -10,4 +10,5 @@ declare interface Window {
 
   hljs: any
   katex: any
+  mermaid: any
 }

Original file line number	Diff line number	Diff line change
`@@ -10,8 +10,8 @@ export const FencePlugin = (md: MarkdownIt) => {`
`10`	`10`	`let content = tokens[index].content`
`11`	`11`	`let info = tokens[index].info`
`12`	`12`
`13`		`- if (info.trim() === "") {`
`14`		`- info = "text"`
	`13`	`+ if (info === "mermaid") {`
	`14`	+ return `<pre class="mermaid">${content}</pre>`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`// Render code and line number`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`:root {`
`2`	`2`	`font-size: 14px;`
	`3`	`+ --markdown-font-size: 16px;`
`3`	`4`	`--font: "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;`
`4`	`5`	`--background: #ffffff;`
`5`	`6`	`--content-padding: 28px;`
`@@ -11,7 +12,7 @@`
`11`	`12`	`/* element color */`
`12`	`13`	`--side-color-back: #f8f8fa;`
`13`	`14`	`--active-color: #f7ab1d;`
`14`		`- --link-color: #2f81f7;`
	`15`	`+ --link-color: #5bae50;`
`15`	`16`	`--inline-code-color: #61aeee;`
`16`	`17`	`--inline-code-back: #f8f8fa;`
`17`	`18`	`--block-code-back: #f8f8fa;`
`@@ -147,8 +148,9 @@ strong {`
`147`	`148`
`148`	`149`	`&.active,`
`149`	`150`	`&:hover {`
	`151`	`+ font-weight: var(--font-weight-bold);`
`150`	`152`	`color: var(--active-color);`
`151`		`- transition: all 300ms linear;`
	`153`	`+ transition: all 200ms linear;`
`152`	`154`	`}`
`153`	`155`	`}`
`154`	`156`	`}`
`@@ -252,8 +254,9 @@ strong {`
`252`	`254`
`253`	`255`	`&.active,`
`254`	`256`	`&:hover {`
	`257`	`+ font-weight: var(--font-weight-bold);`
`255`	`258`	`color: var(--font-color);`
`256`		`- transition: all 300ms linear;`
	`259`	`+ transition: all 200ms linear;`
`257`	`260`	`}`
`258`	`261`	`}`
`259`	`262`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,4 +10,5 @@ declare interface Window {`
`10`	`10`
`11`	`11`	`hljs: any`
`12`	`12`	`katex: any`
	`13`	`+ mermaid: any`
`13`	`14`	`}`