Components

Mr.Hope ... February 26, 2021 16:10 Markdown
  • Components
  • Markdown
Less than 1 minute

# Badge

Badge available in Markdown

# Badge Props

# text

  • Type: string
  • Required: Yes

Text of the badge

# type

  • Type: "tip" | "warn" | "error"
  • Default: "tip"

Badge types:

  • tip
  • warn
  • error

# color

  • Type: string
  • Required: No

Badge color, please fill in CSS color strings

# vertical

  • Type: "top" | "middle"
  • Default: "top"

Vertical position of the badge

# Badge Usage

You can use it in Markdown to add some status for titles or links:

### Badge <Badge text="Building" type="warn"/> <Badge text="MrHope" color="grey" />
1

# CodeGroup, CodeGroupItem

CodeGroup available in Markdown

# CodeGroup Usage

Please use <CodeGroup /> to wrap <CodeGroupItem />

For each <CodeGroupItem />, you need to set title attribute as tab’s title,and only put a code block in the tab。You can also set active attribute on one of <CodeGroupItem /> to make it active by default.

Tips

You need to put a blank line between each <CodeGroupItem />, otherwise VuePress may not be able to parse them correctly.

# CodeGroup Demo

Input:

<CodeGroup>
<CodeGroupItem title="yarn">
```bash
<span class="token function">yarn</span> <span class="token function">add</span> -D vuepress-theme-hope
```
</CodeGroupItem>

<CodeGroupItem title="npm" active>
```bash
<span class="token function">npm</span> i -D vuepress-theme-hope
```
</CodeGroupItem>
</CodeGroup>
1
2
3
4
5
6
7
8
9
10
11
12
13

Output: