Frontmatter

• Markdownファイルの先頭に必要
• 必要に応じでドキュメントを参照して下さい ドキュメント (opens new window)

---
title: Blogging with VuePress
sidebarDepth: 2 　//サイドーh3まで表示
---

目次

[[toc]]

markdown-it

markdown-it demo (opens new window)

# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading

> Blockquotes

+
+
+

1.
2.
3.

`code`

==マーク==

絵文字

🎉 😄 😅 💦

:tada: :smile: :sweat_smile: :sweat_drops:

絵文字リスト (opens new window)

Custom Containers

::: tip
This is a tip
:::

::: warning
This is a warning
:::

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

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

• テキストのカスタマイズは半角スペースを開けてテキスト追加する

::: danger STOP
Danger zone, do not proceed
:::

Code Block

``` js
export default {
  name: 'MyComponent',
  // ...
}
```

export default {
  name: 'MyComponent',
  // ...
}

ハイライト

``` js{1,4,6-7}
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',
    }
  }
}
```

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

• 使える言語リスト (opens new window)

• コードスニペットimport方法 (opens new window)

• インラインコードスニペットやVue固有の構文を表示するには、v-preカスタムコンテナで段落をラップする

::: v-pre
`{{ This will be displayed as-is }}`
:::

{{ This will be displayed as-is }}

CodeGroupsとCodeBlocks

yarn create vuepress-site [optionalDirectoryName]

npx create-vuepress-site [optionalDirectoryName]

// Make sure to add code blocks to your code group

<code-group>
<code-block title="YARN">
```bash
yarn create vuepress-site [optionalDirectoryName]
```
</code-block>

<code-block title="NPM">
```bash
npx create-vuepress-site [optionalDirectoryName]
```
</code-block>
</code-group>

リンク

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

• 内部リンクも同じ pathはPage Routing参照

画像

![An image](./image.png)

• 画像は画像を貼り付ける.mdファイルと同じディレクトリにおく(./画像のファイル名)

Badgeコンポーネントを使う

Badge beta

Badge beta

Badge default theme

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

• text: 表示する文字
• type の種類　tip warning error、デフォルトはtip
• vertical オプション値(位置）：top middle デフォルトはtop 違いがわからない💦

テーブル

Markdown表テーブル作成ツール (opens new window)😋