# Documentation Style Guide
This guide will provide an overview of different design elements that are available for your use in creating documentation.
# Alerts
VuePress provides a custom container plugin to create alert boxes. There are four types:
- Info: Provide information that is neutral
- Tip: Provide information that is positive and encouraged
- Warning: Provide information that users should be aware of as there is a low to moderate
- Danger: Provide information that is negative and has a high risk to the user
Markdown Examples
::: info
You can find more information at this site.
:::
::: tip
This is a great tip to remember!
:::
::: warning
This is something to be cautious of.
:::
::: danger DANGER
This is something we do not recommend. Use at your own risk.
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Rendered Markdown
INFO
You can find more information at this site.
TIP
This is a great tip to remember!
WARNING
This is something to be cautious of.
DANGER
This is something we do not recommend. Use at your own risk.
# Code Blocks
VuePress uses Prism to provide language syntax highlighting by appending the language to the beginning backticks of a code block:
Markdown Example
```js
export default {
name: 'MyComponent'
}
```
1
2
3
4
5
2
3
4
5
Rendered Output
export default {
name: 'MyComponent'
}
1
2
3
2
3
# Line Highlighting
To add line highlighting to your code blocks, you need to append the line number in curly braces.
# Single Line
Markdown Example
```js{2}
export default {
name: 'MyComponent',
props: {
type: String,
item: Object
}
}
```
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Rendered Markdown
export default {
name: 'MyComponent',
props: {
type: String,
item: Object
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# Group of Lines
```js{4-5}
export default {
name: 'MyComponent',
props: {
type: String,
item: Object
}
}
```
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
export default {
name: 'MyComponent',
props: {
type: String,
item: Object
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# Multiple Sections
```js{2,4-5}
export default {
name: 'MyComponent',
props: {
type: String,
item: Object
}
}
```
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
export default {
name: 'MyComponent',
props: {
type: String,
item: Object
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7