Text Manipulation

This is a normal text.

Bold Text

**Bold text**
__Bold text__

Bold text Bold text

Italic Text

*Italic text*
_Italic text_

Italic text Italic text

Strikethrough Text

~~Strikethrough text~~

Strikethrough text

Masked link

[Something](/directory/README.md)

[Paladin Website](https://www.paladinbot.online/)

Something

Paladin Website (opens new window)

Inline Code

`npm install`
[`Inline code with a link`](/README.md)

npm install Inline code with a link

Item listing

+ Create a list by starting a line with `+`, `-`, or `*`
+ Sub-lists are made by indenting 2 spaces:
  - Marker character change forces new list start:
    * Ac tristique libero volutpat at
    + Facilisis in pretium nisl aliquet
    - Nulla volutpat aliquam velit

• Create a list by starting a line with +, -, or *
• Sub-lists are made by indenting 2 spaces:
  • Marker character change forces new list start:
    • Ac tristique libero volutpat at
    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit

Tables

## Tables

| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

Right aligned columns

| Option | Description |
| ------:| -----------:|
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

Right aligned columns

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

Links

[link text](https://dev.nodeca.com)

[link with title](https://nodeca.github.io/pica/demo/ "title text!")

link text (opens new window)

link with title (opens new window)

HEADERS

# h1

## h2

### h3

#### h4

##### h5

###### h6

h1

h2

h3

h4

h5

h6

Blockquotes

>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam

> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam

Blockquotes can also be nested...

...by using additional greater-than signs right next to each other...

...or with spaces between arrows.

Badges

Badge <Badge text="beta" type="warn" vertical="middle" /> <Badge text="0.10.1+" />

Props:
    text - string
    type - string, optional value: "tip"|"warn"|"error", defaults to "tip".
    vertical - string, optional value: "top"|"middle", defaults to "top".

Badge beta 0.10.1+

List of Badges (opens new window)

Code

```bash
# locally
npm install eslint

# globally
npm install --global eslint
```

# locally
npm install eslint

# globally
npm install --global eslint

Line Highlighting

```json{3,4,5,6}
{
	"extends": "eslint:recommended",
	"env": {
		"node": true,
		"es6": true
	},
	"parserOptions": {
		"ecmaVersion": 2017
	},
	"rules": {

	}
}
```

{
  "extends": "eslint:recommended",
  "env": {
    "node": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 2017
  },
  "rules": {}
}

- client.login(config.token);
+ client.login(token);

Line Numbers

You can enable line numbers for each code blocks via config:

module.exports = {
  markdown: {
    lineNumbers: true
  }
};

Advanced Configuration

VuePress uses markdown-it (opens new window) as the markdown renderer. A lot of the extensions above are implemented via custom plugins. You can further customize the markdown-it instance using the markdown option in .vuepress/config.js:

module.exports = {
  markdown: {
    // options for markdown-it-anchor
    anchor: { permalink: false },
    // options for markdown-it-toc
    toc: { includeLevel: [1, 2] },
    config: md => {
      // use more markdown-it plugins!
      md.use(require("markdown-it-xxx"));
    }
  }
};

Import Code Snippets beta 0.10.1+

You can import code snippets from existing files via following syntax:

<<< @/filepath

It also supports line highlighting:

TIP

Since the import of the code snippets will be executed before webpack compilation, you can't use the path alias in webpack. The default value of @ is process.cwd().

Image

> using URL

![Successfully created application](https://discordjs.guide/assets/img/create-app.cb14ef85.png)


> using local file
![Bot application](../images/created-bot.png "Title")

using URL

using local file

Emojis (opens new window)

> Classic markup: :wink: :cry: :laughing: :yum: :tada: :100:
>
> Shortcuts (emoticons): :-) :-( 8-) ;)

Classic markup: 😉 😢 😆 😋 🎉 💯

Shortcuts (emoticons): 😃 😦 😎 😉

See how to change output (opens new window) with twemoji.

A list of all emojis available can be found here (opens new window).

Plugins

BackToTop

Docs (opens new window)

Export - PDF

GitHub (opens new window)

Google Slides

1. Open your Google Slides
2. Click on File -> Publish to Web -> Embed
3. Paste the iframe code in your .md file

<iframe
  src="YOUR_SLIDE_URL_HERE"
  frameborder="0"
  width="740"
  height="445"
  allowfullscreen="true"
  mozallowfullscreen="true"
  webkitallowfullscreen="true"
></iframe>

Using PowerPoint Slides

It is also possible to embed a Powerpoint here! Simply upload your PowerPoint file to Google Drive and then open it with Google Slides. Finally follow the steps above.

Keep in mind that you can adjust the size and duration of the slides!

PDF using Google PDF Viewer - iframe

<iframe
  src="https://docs.google.com/gview?url=YOUR_PDF_URL_HERE&embedded=true"
  style="width:740px; height:445px;"
  frameborder="0"
></iframe>

Tabs

We use vuepress-plugin-tabs (opens new window) plugin

:::: tabs

::: tab "Tab Title" id="first-tab"
__markdown content__
:::

::: tab javascript id="second-tab"
`
() => {
  console.log('JavaScript code example')
}
`
:::

::::

:::: tabs

::: tab "Tab Title" id="first-tab" markdown content :::

::: tab javascript id="second-tab"

() => {
  console.log("JavaScript code example");
};

:::

::: tab "Disabled Tab" id="third-tab" :is-disabled="true" coming soon :::

::::