チートシート(.md用) | VuePressの使い方

# 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

An image

::: 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 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)😋

← 装飾デプロイ(Netlify) →