替换quartz代码高亮插件

index.md

@@ -1,7 +1,7 @@
 ---
 {
   "date": "2024-03-19 15:44:49",
-  "updated": "2024-11-25 16:02:59",
+  "updated": "2024-11-25 17:51:20",
   "dg-publish": true,
   "dg-path": "/",
   "title": "home",
@@ -31,4 +31,4 @@
 ### Bonus
 - 阅读模式，点击右侧图标 👓 ，可以进入阅读模式
 - 长文阅读进度提示
-- 已集成giscus评论插件, 刷新页面可见
+- 已集成giscus评论插件, 刷新页面可见

others/index.md

@@ -5,9 +5,153 @@
   "dg-publish": true,
   "dg-path": null,
   "date": "2024-03-21 16:58:13",
-  "updated": "2024-11-25 15:01:33",
+  "updated": "2024-11-27 16:09:25",
   "pin": false
 }
 ---
 
-- 本站搭建相关的过程记录
+> 本站搭建和迭代的过程记录
+# 2024-11-27 16:09:57
+
+## 代码高亮插件
+- 替换为 [expressive-code](https://github.com/expressive-code/expressive-code) 代码语法高亮插件
+	- 暂不支持ignore某些language, 使用中会和mermaid语法冲突，导致mermaid无法渲染
+- 该高亮插件语法相比quartz内置的`rehype-pretty-code`更为丰富, 可以实现和obsidian中的 [shiki-highlighter](https://github.com/mProjectsCode/obsidian-shiki-plugin) 插件一致的高亮效果
+
+### demo
+
+```js showLineNumbers /am/
+// This code block will show line numbers
+console.log('Greetings from line 2!')
+console.log('I am on line 3')
+```
+
+```js showLineNumbers=false
+// Line numbers are disabled for this block
+console.log('Hello?')
+console.log('Sorry, do you know what line I am on?')
+```
+
+```js collapse={1-5, 12-14} title="Collapsible Block" {7}
+// All this boilerplate setup code will be collapsed
+import { someBoilerplateEngine } from '@example/some-boilerplate'
+import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
+
+const engine = someBoilerplateEngine(evenMoreBoilerplate())
+
+// This part of the code will be visible by default
+engine.doSomething(1, 2, 3, calcFn)
+
+function calcFn() {
+  // You can have multiple collapsed sections
+  const a = 1
+  const b = 2
+  return a + b
+}
+```
+
+Here is a code sample:
+
+```bash
+pwd
+
+---
+After pressing enter, the `pwd` command will output the current directory
+your terminal is in.
+---
+```
+
+```js wrap
+// Example with wrap
+function getLongString() {
+  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
+}
+```
+
+```js wrap=false
+// Example with wrap=false
+function getLongString() {
+  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
+}
+```
+
+```js {1, 4, 7-8}
+// Line 1 - targeted by line number
+// Line 2
+// Line 3
+// Line 4 - targeted by line number
+// Line 5
+// Line 6
+// Line 7 - targeted by range "7-8"
+// Line 8 - targeted by range "7-8"
+```
+
+```js title="line-markers.js" del={2} ins={3-4} {6}
+function demo() {
+  console.log('this line is marked as deleted')
+  // This line and the next one are marked as inserted
+  console.log('this is the second inserted line')
+
+  return 'this line uses the neutral default marker type'
+}
+```
+
+```jsx {"1":5} del={"2":7-8} ins={"3":10-12}
+// labeled-line-markers.jsx
+<button
+  role="button"
+  {...props}
+  value={value}
+  className={buttonClassName}
+  disabled={disabled}
+  active={active}
+>
+  {children &&
+    !active &&
+    (typeof children === 'string' ? <span>{children}</span> : children)}
+</button>
+```
+
+```jsx {"1. Provide the value prop here:":5-6} del={"2. Remove the disabled and active states:":8-10} ins={"3. Add this to render the children inside the button:":12-15}
+// labeled-line-markers.jsx
+<button
+  role="button"
+  {...props}
+
+  value={value}
+  className={buttonClassName}
+
+  disabled={disabled}
+  active={active}
+>
+
+  {children &&
+    !active &&
+    (typeof children === 'string' ? <span>{children}</span> : children)}
+</button>
+```
+
+```diff lang="js"
+  function thisIsJavaScript() {
+    // This entire block gets highlighted as JavaScript,
+    // and we can still add diff markers to it!
+-   console.log('Old code to be removed')
++   console.log('New and shiny code!')
+  }
+```
+
+
+```diff
++ this line will be marked as inserted
+- this line will be marked as deleted
+  this is a regular line
+```
+
+
+````mermaid
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+
+````