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

::: tip
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.
:::

Rendered Markdown

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'
}
```

Rendered Output

export default {
  name: 'MyComponent'
}

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
  }
}
```

Rendered Markdown

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

Group of Lines #

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

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

Multiple Sections #

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

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