添加预览

package-lock.json

@@ -18,6 +18,7 @@
         "highlight.js": "^11.11.1",
         "marked": "^15.0.7",
         "marked-alert": "^2.1.2",
+        "marked-code-preview": "^1.3.7",
         "marked-highlight": "^2.2.1",
         "naive-ui": "^2.41.0",
         "normalize.css": "^8.0.1",
@@ -1184,6 +1185,15 @@
       "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
       "license": "MIT"
     },
+    "node_modules/attributes-parser": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/attributes-parser/-/attributes-parser-2.2.3.tgz",
+      "integrity": "sha512-zjOUWt95la8AdUO+kP1GBOonWrV5jy9NjJP+z9tva/DSA6FIzGKcN/gk3tdqQf/pOeB8dkyd3FCPrjhELMmrkg==",
+      "license": "MIT",
+      "dependencies": {
+        "json-loose": "^1.2.4"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -1787,6 +1797,15 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/json-loose": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/json-loose/-/json-loose-1.2.4.tgz",
+      "integrity": "sha512-lwMWNC5pvVI33rhYWmAsmtICWE2IH7euDY/iIPeMFE5AuzAifYgqQrjqSMzwbrFV6MWPs41XD+CajElHI4cZMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "moo": "^0.5.2"
+      }
+    },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -1870,6 +1889,18 @@
         "marked": ">=7.0.0"
       }
     },
+    "node_modules/marked-code-preview": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/marked-code-preview/-/marked-code-preview-1.3.7.tgz",
+      "integrity": "sha512-2XvsOKwunF0gWnAC2S4LijxhuKtfb8TpCuAboMs/6W+4lpkI7LgFQjcivUsActxMQbLuaaxOGIp8XkJJF3QmTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "attributes-parser": "^2.2.3"
+      },
+      "peerDependencies": {
+        "marked": ">=7.0.0"
+      }
+    },
     "node_modules/marked-highlight": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/marked-highlight/-/marked-highlight-2.2.1.tgz",
@@ -1922,6 +1953,12 @@
         "ufo": "^1.5.4"
       }
     },
+    "node_modules/moo": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
+      "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",

package.json

@@ -19,6 +19,7 @@
     "highlight.js": "^11.11.1",
     "marked": "^15.0.7",
     "marked-alert": "^2.1.2",
+    "marked-code-preview": "^1.3.7",
     "marked-highlight": "^2.2.1",
     "naive-ui": "^2.41.0",
     "normalize.css": "^8.0.1",

public/turtorial/01/README.md

@@ -1,4 +1,4 @@
-# HTML 基本标签
+# HTML 基本标签 —— 标题和段落
 
 > [!NOTE]
 > 这是测试的版本
@@ -16,7 +16,7 @@
 <h6>标题 6</h6>
 ```
 
-给六个标题字体颜色换一下，注意：`color` 表示字体颜色。
+给六个标题字体颜色换一下，注意：`color` 表示**字体颜色**。
 
 ```css
 h1 {
@@ -85,7 +85,7 @@ p {
 
 ### 要求
 
-完成《白鹭》散文的排版：
+完成下面《白鹭》散文（节选）的排版：
 
 - 标题：使用 `h1` 标签，设置字号 32px，颜色黑色;
 - 每个段落：设置字号 28px，颜色（#333），行间距 40px，首行缩进两字符；
@@ -103,3 +103,24 @@ p {
 然而白鹭却因为它的常见，而被人忘却了它的美。
 
 那雪白的蓑毛，那全身的流线型结构，那铁色的长喙，那青色的脚，增之一分则嫌长，减之一分则嫌短，素之一忽则嫌白，黛之一忽则嫌黑。
+
+### 效果
+```html preview
+<h1 style="font-size: 32px; color: black;">白鹭</h1>
+<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">白鹭是一首精巧的诗。</p>
+<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">色素的配合，身段的大小，一切都很适宜。</p>
+<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">白鹤太大而嫌生硬，即如粉红的朱鹭或灰色的苍鹭，也觉得大了一些，而且太不寻常了。</p>
+<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">然而白鹭却因为它的常见，而被人忘却了它的美。</p>
+<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">那雪白的蓑毛，那全身的流线型结构，那铁色的长喙，那青色的脚，增之一分则嫌长，减之一分则嫌短，素之一忽则嫌白，黛之一忽则嫌黑。</p>
+```
+
+## 总结
+### HTML
+标题：h1 到 h6  
+段落：p
+
+### CSS
+color 字体颜色  
+font-size 字体大小  
+line-height 行间距  
+text-indent: 2em; 表示首行缩进2字符  

src/main.ts

@@ -8,8 +8,9 @@ import "normalize.css"
 import "github-markdown-css/github-markdown-light.css"
 
 import { marked } from "marked"
-import markedAlert from "marked-alert"
+import alert from "marked-alert"
 import { markedHighlight } from "marked-highlight"
+import preview from "marked-code-preview"
 import { alertVariants } from "./utils"
 
 import hljs from "highlight.js/lib/core"
@@ -36,7 +37,10 @@ marked.use(
     },
   }),
 )
-marked.use(markedAlert({ variants: alertVariants }))
+marked.use(alert({ variants: alertVariants }))
+
+const template = `<div class="markedown-body-preview">{preview}</div>`
+marked.use(preview({template}))
 
 const app = createApp(App)
 const naive = create()