diff --git a/package-lock.json b/package-lock.json
index d81db1e..4497999 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 4adda00..9d3a0b8 100644
--- a/package.json
+++ b/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",
diff --git a/public/turtorial/01/README.md b/public/turtorial/01/README.md
index b314164..e00a615 100644
--- a/public/turtorial/01/README.md
+++ b/public/turtorial/01/README.md
@@ -1,4 +1,4 @@
-# HTML 基本标签
+# HTML 基本标签 —— 标题和段落
> [!NOTE]
> 这是测试的版本
@@ -16,7 +16,7 @@
标题 6
```
-给六个标题字体颜色换一下，注意：`color` 表示字体颜色。
+给六个标题字体颜色换一下，注意：`color` 表示**字体颜色**。
```css
h1 {
@@ -85,7 +85,7 @@ p {
### 要求
-完成《白鹭》散文的排版：
+完成下面《白鹭》散文（节选）的排版：
- 标题：使用 `h1` 标签，设置字号 32px，颜色黑色;
- 每个段落：设置字号 28px，颜色（#333），行间距 40px，首行缩进两字符；
@@ -103,3 +103,24 @@ p {
然而白鹭却因为它的常见，而被人忘却了它的美。
那雪白的蓑毛，那全身的流线型结构，那铁色的长喙，那青色的脚，增之一分则嫌长，减之一分则嫌短，素之一忽则嫌白，黛之一忽则嫌黑。
+
+### 效果
+```html preview
+白鹭
+白鹭是一首精巧的诗。
+色素的配合，身段的大小，一切都很适宜。
+白鹤太大而嫌生硬，即如粉红的朱鹭或灰色的苍鹭，也觉得大了一些，而且太不寻常了。
+然而白鹭却因为它的常见，而被人忘却了它的美。
+那雪白的蓑毛，那全身的流线型结构，那铁色的长喙，那青色的脚，增之一分则嫌长，减之一分则嫌短，素之一忽则嫌白，黛之一忽则嫌黑。
+```
+
+## 总结
+### HTML
+标题：h1 到 h6
+段落：p
+
+### CSS
+color 字体颜色
+font-size 字体大小
+line-height 行间距
+text-indent: 2em; 表示首行缩进2字符
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 06156bb..c28885a 100644
--- a/src/main.ts
+++ b/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 = `{preview}
`
+marked.use(preview({template}))
const app = createApp(App)
const naive = create()