Skip to content

feature (#85): add basic style guide for design elements #100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 6, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/.vuepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ const sidebar = {
{
title: 'Contribute to the Docs',
collapsable: true,
children: ['writing-guide']
children: ['writing-guide', 'doc-style-guide']
}
],
api: [
Expand Down
151 changes: 151 additions & 0 deletions src/guide/doc-style-guide.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
# 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.
:::
```

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

**Rendered Output**
```js
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**

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

#### Group of Lines

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

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

#### Multiple Sections

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

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