Style Guide

Here's a reference guide for markdown styling for VuePress projects in action!

Badges

Markdown Syntax:

VuePress - <Badge type="tip" text="v2.x.x" vertical="top" />

VuePress - <Badge type="warning" text="v2.x.x" vertical="middle" />

VuePress - <Badge type="danger" text="v2.x.x" vertical="bottom" />

Output:

VuePress - v2.x.x

VuePress - v2.x.x

VuePress - v2.x.x

Blockquotes

Markdown Syntax:

> This is a simple blockquote.

> **Blockquotes**  
> Can span multiple lines  
> (if _two spaces_ are added to the END of each non-ending line!)

Output:

This is a simple blockquote.

Blockquotes
Can span multiple lines
(if two spaces are added to the END of each non-ending line!)

Code: Block

Markdown Syntax:

• Markdown code blocks can be done with 3 opening and closing backticks (```)
• Or by using indent 4 spaces prior to the conten on each line
• Code blocks can specify languages immediately after the opening 3 backticks
  • Examples: ```js, ```html, ```php, ```css, ```scss, etc.
• Lines in code blocks can be highlighted singulary or in ranges
  • Syntax Examples: ```js{1}, ```js{1,3}, ```js{2-3}, ```js{1,2-3}

Code: Inline

Markdown Syntax:

`Inline code` with backticks

Output:

Inline code with backticks

Code: Tabbed Group Blocks

Markdown Syntax:

:::: code-group

::: code-group-item NPM
# code block here...
:::

::: code-group-item YARN
# code block here...
:::

::::

Output:

npm install

yarn add

Custom Containers: Basic

Markdown Syntax:

::: tip
This is a tip
:::

::: warning
This is a warning
:::

::: danger
This is a dangerous warning
:::

::: details
This is a details block
:::

Output:

TIP

This is a tip

WARNING

This is a warning

DANGER

This is a dangerous warning

This is a details block

Custom Containers: With Heading

Markdown Syntax:

::: tip TIP HEADING
This is a tip
:::

::: warning WARNING HEADING
This is a warning
:::

::: danger DANGER HEADING
This is a dangerous warning
:::

::: details Details Heading
This is a details block
:::

Output:

TIP HEADING

This is a tip

WARNING HEADING

This is a warning

DANGER HEADING

This is a dangerous warning

Details Heading

This is a details block

Headings

Markdown Syntax:

# Heading Level 1

## Heading Level 2

### Heading Level 3

#### Heading Level 4

##### Heading Level 5

###### Heading Level 6

Horizontal Rule

Markdown Syntax:

---

Output:

---

Images

Markdown Syntax:

![Image](/images/obe-wds-logo-vert-dark-ground.png)

Output:

Links: External

Markdown Syntax:

[OBE:WDS](https://obewds.com)

Output:

OBE:WDSopen in new window

Links: Internal

Markdown Syntax:

[Relative Home Link](index.html)

Output:

Relative Home Link

Lists: Bulleted

Markdown Syntax:

* Bullet One
* Bullet Two
* Bullet Three
  * Sub-Bullet One
    * Sub-Sub-Bullet One

Output:

• Bullet One
• Bullet Two
• Bullet Three
  • Sub-Bullet One
    • Sub-Sub-Bullet One

Lists: Numbered

Markdown Syntax:

1. Numbered One
1. Numbered Two
1. Numbered Three

Output:

1. Numbered One
2. Numbered Two
3. Numbered Three

Text: Bold

Markdown Syntax:

**Bold Text**

__Bold Text__

Output:

Bold Text

Text: Italic

Markdown Syntax:

_Italic Text_

*Italic Text*

Output:

Italic Text