docs: update docs

mdit-plugins · Apr 17, 2024 · 177a14e · 177a14e
1 parent b23d02a
commit 177a14e
Show file tree

Hide file tree

Showing 35 changed files with 121 additions and 486 deletions.
diff --git a/docs/src/.vuepress/config.ts b/docs/src/.vuepress/config.ts
@@ -1,6 +1,6 @@
 import { alert } from "@mdit/plugin-alert";
 import { container } from "@mdit/plugin-container";
-import { demo } from "@mdit/plugin-demo";
+// import { demo } from "@mdit/plugin-demo";
 import { snippet } from "@mdit/plugin-snippet";
 import { cut } from "nodejs-jieba";
 import { type UserConfig, defineUserConfig } from "vuepress";
@@ -38,7 +38,7 @@ export default <UserConfig>defineUserConfig({
 
   extendsMarkdown: (md) => {
     md.use(alert, { deep: true });
-    md.use(demo);
+    // md.use(demo);
 
     md.use(container, {
       name: "hint",

diff --git a/docs/src/.vuepress/theme.ts b/docs/src/.vuepress/theme.ts
@@ -47,6 +47,7 @@ export default hopeTheme(
         align: true,
         attrs: true,
         codetabs: true,
+        demo: true,
         figure: true,
         footnote: true,
         imgLazyload: true,

diff --git a/docs/src/alert.md b/docs/src/alert.md
@@ -151,6 +151,8 @@ interface MarkdownItAlertOptions {
 
 ## Demo
 
+::: md-demo Demo
+
 > [!note]
 > This is note text
 
@@ -166,6 +168,8 @@ interface MarkdownItAlertOptions {
 > [!caution]
 > This is caution text
 
+:::
+
 <!-- markdownlint-enable MD028 -->
 
 ::: details Styles

diff --git a/docs/src/align.md b/docs/src/align.md
@@ -111,61 +111,8 @@ Contents to align justify
 
 ## Demo
 
-:::: center
-
-### Twinkle, Twinkle, Little Star
-
-::: right
-
-——Jane Taylor
-
-:::
-
-Twinkle, twinkle, little star,
-
-How I wonder what you are!
-
-Up above the world so high,
-
-Like a diamond in the sky.
-
-When the blazing sun is gone,
-
-When he nothing shines upon,
-
-Then you show your little light,
-
-Twinkle, twinkle, all the night.
-
-Then the traveller in the dark,
+::::: md-demo Demo
 
-Thanks you for your tiny spark,
-
-He could not see which way to go,
-
-If you did not twinkle so.
-
-In the dark blue sky you keep,
-
-And often thro' my curtains peep,
-
-For you never shut your eye,
-
-Till the sun is in the sky.
-
-'Tis your bright and tiny spark,
-
-Lights the trav’ller in the dark,
-
-Tho' I know not what you are,
-
-Twinkle, twinkle, little star.
-
-::::
-
-::::: details Code
-
-```md
 :::: center
 
 ### Twinkle, Twinkle, Little Star
@@ -217,6 +164,5 @@ Tho' I know not what you are,
 Twinkle, twinkle, little star.
 
 ::::
-```
 
 :::::
diff --git a/docs/src/attrs.md b/docs/src/attrs.md
@@ -134,51 +134,37 @@ interface MarkdownItAttrsOptions {
 
 > ALl class are styled with `margin: 4px;padding: 4px;border: 1px solid red;` to show the effect.
 
-### Inline (inline)
+::: md-demo Inline
 
 Text with `inline code`{.inline-code} and ![favicon](/favicon.ico){.image}, also supporting _emphasis_{.inline-emphasis} and **bold**{.inline-bold}.
 
-```md
-Text with `inline code`{.inline-code} and ![favicon](/favicon.ico){.image}, also supporting _emphasis_{.inline-emphasis} and **bold**{.inline-bold}.
-```
+:::
 
-### Block (block)
+::: md-demo Block
 
 block content {.block}
 
-```md
-block content {.block}
-```
+:::
 
-### Fence (fence)
+::: md-demo Fence
 
 ```js {.fence}
 const a = 1;
 ```
 
-````md
-```js {.fence}
-const a = 1;
-```
-````
+:::
 
-### Table (table)
+::: md-demo Table
 
 | Table   |
 | ------- |
 | content |
 
 {.table}
 
-```md
-| Table   |
-| ------- |
-| content |
-
-{.table}
-```
+:::
 
-### List (list)
+::: md-demo List
 
 - list item{.list-item}
 
@@ -187,32 +173,20 @@ const a = 1;
 
 {.list-wrapper}
 
-```md
-- list item{.list-item}
-
-  - nested list item
-    {.nested}
-
-{.list-wrapper}
-```
+:::
 
-### Horizontal (hr)
+::: md-demo Horizontal Rule
 
 --- {.horizontal}
 
-```md
---- {.horizontal}
-```
+:::
 
-### Softbreak (softbreak)
+::: md-demo Softbreak
 
 A line with break  
 {.break}
 
-```md
-A line with break  
-{.break}
-```
+:::
 
 <style scope>
 .block,

diff --git a/docs/src/container.md b/docs/src/container.md
@@ -154,7 +154,7 @@ interface MarkdownItContainerOptions {
 
 ### Hint container
 
-With some styles and:
+With the following code and some styles:
 
 ```js
 md.use(container, {
@@ -169,9 +169,8 @@ md.use(container, {
 });
 ```
 
-You can write a hint like this:
+:::: md-demo You can write a hint like this:
 
-```md
 ::: hint Here is a Hint
 :::
 
@@ -185,19 +184,5 @@ Here is a **hint** for you!
 - Hint 2
 
 :::
-```
-
-::: hint Here is a hint
-
-:::
-
-::: hint
-
-Here is a **hint** for you!
-
-- Hint 1
-  - Hint 1.1
-  - Hint 1.2
-- Hint 2
 
-:::
+::::
diff --git a/docs/src/demo.md b/docs/src/demo.md
@@ -98,7 +98,7 @@ interface MarkdownItDemoOptions {
 
 ## Demo
 
-::: demo
+::: md-demo
 
 ## Heading 1
 
@@ -107,7 +107,7 @@ Text
 :::
 
 ```md
-::: demo
+::: md-demo
 
 ## Heading 1
 

diff --git a/docs/src/figure.md b/docs/src/figure.md
@@ -60,20 +60,14 @@ interface MarkdownItFigureOptions {
 
 ## Demo
 
-![Logo](/favicon.ico)
-
-[![Logo](/favicon.ico)](https://commonmark.org/)
-
-![Logo](/favicon.ico "Markdown")
+::: md-demo Demo
 
-[![Logo](/favicon.ico "Markdown")](https://commonmark.org/)
-
-```md
 ![Logo](/favicon.ico)
 
 [![Logo](/favicon.ico)](https://commonmark.org/)
 
 ![Logo](/favicon.ico "Markdown")
 
 [![Logo](/favicon.ico "Markdown")](https://commonmark.org/)
-```
+
+:::
diff --git a/docs/src/footnote.md b/docs/src/footnote.md
@@ -68,6 +68,8 @@ mdIt.render("Inline footnote^[Text of inline footnote] definition.");
 
 ## Demo
 
+::: md-demo Demo
+
 Footnote 1 link[^first].
 
 Footnote 2 link[^second].
@@ -82,18 +84,4 @@ Duplicated footnote reference.
 
 [^second]: Footnote text.
 
-```md
-Footnote 1 link[^first].
-
-Footnote 2 link[^second].
-
-Inline footnote^[Text of inline footnote] definition.
-
-Duplicated footnote reference[^second].
-
-[^first]: Footnote **can have markup**
-
-    and multiple paragraphs.
-
-[^second]: Footnote text.
-```
+:::
diff --git a/docs/src/img-mark.md b/docs/src/img-mark.md
@@ -105,21 +105,17 @@ interface MarkdownItImgMarkOptions {
 
 ## Demo
 
+::: md-demo Demo
+
 ![GitHub Light](/github-light.png#gh-dark-mode-only)
 ![GitHub Dark](/github-dark.png#gh-light-mode-only)
 
 ![GitHub Light](/github-light.png#dark)
 ![GitHub Dark](/github-dark.png#light)
 
-<AppearanceSwitch /> (Try to toggle theme mode)
-
-```md
-![GitHub Light](/github-light.png#gh-dark-mode-only)
-![GitHub Dark](/github-dark.png#gh-light-mode-only)
+:::
 
-![GitHub Light](/github-light.png#dark)
-![GitHub Dark](/github-dark.png#light)
-```
+<AppearanceSwitch /> (Try to toggle theme mode)
 
 <script setup lang="ts">
 import AppearanceSwitch from "@theme-hope/modules/outlook/components/AppearanceSwitch"

diff --git a/docs/src/img-size.md b/docs/src/img-size.md
@@ -58,12 +58,10 @@ will be parsed as:
 
 ## Demo
 
-![Logo](/logo.svg "Markdown" =200x200)
-![Logo](/logo.svg "Markdown" =150x)
-![Logo](/logo.svg "Markdown" =x100)
+::: md-demo Demo
 
-```md
 ![Logo](/logo.svg "Markdown" =200x200)
 ![Logo](/logo.svg "Markdown" =150x)
 ![Logo](/logo.svg "Markdown" =x100)
-```
+
+:::
diff --git a/docs/src/katex.md b/docs/src/katex.md
@@ -67,23 +67,16 @@ You should import `katex/dist/katex.min.css` from `katex` package or CDN yoursel
 
 ## Demo
 
-Euler’s identity $e^{i\pi}+1=0$ is a beautiful formula in $\mathbb{R}^2$.
+::: md-demo
 
-```md
 Euler’s identity $e^{i\pi}+1=0$ is a beautiful formula in $\mathbb{R}^2$.
-```
 
 $$
 \frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right)
 = \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^ Ir \cdots (r-i+1) (\log y)^{ri}} {\omega^i} \right\}
 $$
 
-```md
-$$
-\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right)
-= \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^ Ir \cdots (r-i+1) (\log y)^{ri}} {\omega^i} \right\}
-$$
-```
+:::
 
 ## Options