Internal Links

[Home](/) <!-- Sends the user to the root README.md -->
[foo](/foo/) <!-- Sends the user to index.html of directory foo -->
[foo heading](./#heading) <!-- Anchors user to a heading in the foo README file -->
[bar - three](../bar/three.md) <!-- You can append .md (recommended) -->
[bar - four](../bar/four.html) <!-- Or you can append .html -->

Home foo foo heading bar - three bar - four

GitHub-Style Tables

| Tables        |      Are      |   Cool |
| ------------- | :-----------: | -----: |
| col 3 is      | right-aligned | \$1600 |
| col 2 is      |   centered    |   \$12 |
| zebra stripes |   are neat    |    \$1 |

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

Emoji

:tada: :100:

🎉 💯

絵文字一覧 (opens new window)

Table of Contents

[[toc]]

• Internal Links
• GitHub-Style Tables
• Emoji
• Table of Contents
• Default Title
• Custom Title
• Syntax Highlighting in Code Blocks
• Line Highlighting in Code Blocks
• Line Numbers
• Import Code Snippets
• Badge sample

Default Title

TIP

This is a tip

WARNING

This is a warning

WARNING

This is a dangerous warning

DETAILS

This is a details block, which does not work in IE / Edge

Custom Title

STOP

Danger zone, do not proceed

Click me to view the code

console.log("Hello, VuePress!");

Syntax Highlighting in Code Blocks

export default {
    name: "MyComponent"
    // ...
};

<ul>
    <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
    </li>
</ul>

Line Highlighting in Code Blocks

export default {
    data() {
        return {
            msg: "Highlighted!"
        };
    }
};

export default {
    // Highlighted
    data() {
        return {
            msg: `Highlighted!
      This line isn't highlighted,
      but this and the next 2 are.`,
            motd: "VuePress is awesome",
            lorem: "ipsum"
        };
    }
};

Line Numbers

// .vuepress/config.js
module.exports = {
    markdown: {
        lineNumbers: true
    }
};

Import Code Snippets

<<< src/sample/snippet.js{2}

export default function() {
    // ..
}

Badge sample

Badge <Badge text="beta" type="warning"/>
Badge <Badge text="エラー" type="error" vertical="middle"/>
Badge <Badge text="default theme"/>

// type - string, optional value: "tip"|"warning"|"error", defaults to "tip".
// vertical - string, optional value: "top"|"middle", defaults to "top".

warning beta error error default default theme