Documentation Style Guide

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

Rendered Markdown

INFO

You can find more information at this site.

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

Markdown Example

export default {
  name: 'MyComponent'
}
```

Rendered Output

export default {
}

To add line highlighting to your code blocks, you need to append the line number in curly braces.

Single Line

Markdown Example

Rendered Markdown

export default {
  name: 'MyComponent',
  props: {
    type: String,
    item: Object
}

Group of Lines

```js{4-7}
export default {
  name: 'MyComponent',
  props: {
    type: String,
    item: Object
  }
}

Multiple Sections

```js{2,4-5}
export default {
  props: {
    type: String,
    item: Object
  }
}
```

export default {
  name: 'MyComponent',
  props: {
    type: String,
    item: Object
  }