【示例】New features

Support Remixicon

1
:i{class="ri-poker-hearts-fill"}
2
:i{class="ri-poker-clubs-fill"}

Support Button

1
:btn[Google]{href="https://www.google.com"}

Google

1
:::btn{href="#"}
2
:i{class="ri-share-box-line"} Open in new tab
3
:::

Support Github Card

1
::github{repo="cirry/astro-yi"}

cirry

/

astro-yi

Waiting for api.github.com...

Waiting

Waiting

Waiting

Support collapse

1
:::collapse
2
Hello World!
3
:::

Support admonitions

1
:::tip[Customized Title]
2
hello world
3
:::
4

5
:::note
6
note
7
:::
8

9
:::caution
10
caution
11
:::
12

13
:::danger
14
danger
15
:::

Support mermaid

Use:

• start with ```mermaid
• end with ```
• set markdown frontmatter mermaid: true.

Mermaid Code:

1
classDiagram
2
note "From Duck till Zebra"
3
Animal <|-- Duck
4
note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
5
Animal <|-- Fish
6
Animal <|-- Zebra
7
Animal : +int age
8
Animal : +String gender
9
Animal: +isMammal()
10
Animal: +mate()
11
class Duck{
12
+String beakColor
13
+swim()
14
+quack()
15
}
8 collapsed lines
16
class Fish{
17
-int sizeInFeet
18
-canEat()
19
}
20
class Zebra{
21
+bool is_wild
22
+run()
23
}

Result:

classDiagram
    note "From Duck till Zebra"
    Animal <|-- Duck
    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }

Support mathjax

• set markdown frontmatter mathjax: true.

Block Mode

1
---
2
mathjax: true
3
---
4
hello!
5
$$ \sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t $$
6
hello!

hello! $$ \sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t $$ hello!

Inline Mode

1
---
2
mathjax: true
3
---
4
hello! $ \sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t $ hello!

hello! $ \sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t $ hello!

Integration with Expressive Code

For more usage, please refer to the official website expressive-code.

1
function demo() {
2
  console.log('this line is marked as deleted')
3
  // This line and the next one are marked as inserted
4
  console.log('this is the second inserted line')
5

6
  return 'this line uses the neutral default marker type'
7
}

Code folding is supported by default

1
var myArr = [1, 2]
2
console.log(myArr)
3

4
var myObj = {a: 1, b: 2}
5

6
for (let key of myArr) {
7
  console.log(key)
8
}
9

10
var it = myArr[Symbol.iterator]()
11
it.next() // {value: 1, done: false}
12

13
// VM704:12 Uncaught TypeError: myObj is not iterable
14
for (let key of myObj) {
15
  console.log(key)
1 collapsed line
16
}