offlo.in（オフロイン）

【MarkDown】VuePressで使えるMarkdown文法一覧

Markdownの書き方一覧です。

VuePressで使えるものを集めましたが、Markdownを採用しているサービスなら基本的に書き方は同じです。

サンプル、コンパイル後のコードと一緒にまとめました。

覚えるととっても便利。非エンジニアの方も是非チャレンジしてみてください。（Markdownを気軽に試すならHackMD(opens new window) などおすすめ）

デザインカスタマイズしたい場合は：VuePressのタグにclassを追加してカスタマイズする

基本

改行

改行

改行

改行

改行

<p>改行</p>
<p>改行</p>

強調などの文字装飾

強調

**強調**

強調

<strong>強調</strong>

イタリック

*イタリック*

イタリック

<em>イタリック</em>

強調+イタリック

***強調+イタリック***

強調+イタリック

<em><strong>強調+イタリック</strong></em>

打ち消し

~~打ち消し~~

打ち消し

<s>打ち消し</s>

見出し系

hタグだけ読みにくいのでサンプルに引用をつけます。

h1

# h1だよ

h1だよ

<h1 id="h1だよ">h1だよ</h1>

h2

## h2だよ

h2だよ

<h2 id="h2だよ">h2だよ</h2>

h3

### h3だよ

h3だよ

<h3 id="h3だよ">h3だよ</h3>

h4

#### h4だよ

h4だよ

<h4 id="h4だよ">h4だよ</h4>

引用

> 引用

引用

<blockquote>
  <p>引用</p>
</blockquote>

引用の入れ子

> 引用の
>> 入れ子

引用の

入れ子

<blockquote>
  <p>引用の</p>
  <blockquote>
    <p>入れ子</p>
  </blockquote>
</blockquote>

リスト系

箇条書き

* リスト
  * リスト
* リスト
  • リスト
    • リスト
  • リスト
<ul>
  <li>
    リスト
    <ul>
      <li>
        リスト
      </li>
    </ul>
  </li>
  <li>
    リスト
  </li>
</ul>

番号付きの箇条書き

1. リスト
2. リスト
3. リスト
  1. リスト
  2. リスト
  3. リスト
<ol>
  <li>
    リスト
  </li>
  <li>
    リスト
  </li>
  <li>
    リスト
  </li>
</ol>

定義リスト

<dl>
  <dt>見出し</dt>
  <dd>あああ</dd>
  <dt>見出し</dt>
  <dd>いいい</dd>
</dl>
見出し
あああ
見出し
いいい
<dl>
  <dt>見出し</dt>
  <dd>あああ</dd>
  <dt>見出し</dt>
  <dd>いいい</dd>
</dl>

画像

![画像サンプル：激辛好きならHIROSUKE CURRYの「チェッターヒン」（極辛）](filepath/curry.jpg)

画像サンプル：激辛好きならHIROSUKE CURRYの「チェッターヒン」（極辛）

<img src="filepath/curry.jpg" alt="画像サンプル：激辛好きならHIROSUKE CURRYの「チェッターヒン」（極辛）">

リンク

[リンクサンプル：GitHub](https://github.com/)

リンクサンプル：GitHub(opens new window) 

<a href="https://github.com/" target="_blank" rel="noopener noreferrer">リンクサンプル：GitHub<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>

コード

インライン

`code（インライン）`

code（インライン）

<code>code（インライン）</code>

ブロック

インデントは不要。

    ```
    markdown: {
      sample: { sample: true }
    }
    ```

markdown: {
  sample: { sample: true }
}

<pre class="language-text">
  <code>
    markdown: {
      sample: { sample: true }
    }
  </code>
</pre>

コードのハイライト

行数指定をすることでコードのハイライトができます。

インデントは不要。

    ``` {4}
    export default {
      data () {
        return {
          msg: 'コードのハイライト（4行目）'
        }
      }
    }
    ```



 




export default {
  data () {
    return {
      msg: 'コードのハイライト（4行目）'
    }
  }
}

<pre class="language-text">
  <code>
    export default {
      data () {
        return {
          msg: 'コードのハイライト（4行目）'
        }
      }
    }
  </code>
</pre>

ファイル形式の表示

例えばjsなら、

    ``` js
    export default {
      data () {
        return {
          msg: 'コードだよ'
        }
      }
    }
    ```

こう書くことで

export default {
  data () {
    return {
      msg: 'コードだよ'
    }
  }
}

右上にファイル形式が表示されます。インデントは不要。

他の例↓

.class {
  display: block;
}

<html>
  <head>
  </head>
</html>

ハイライトとの合わせ技

インデントは不要。

    ``` js{4}
    export default {
      data () {
        return {
          msg: 'コードのハイライト（4行目）、ファイル形式の表示'
        }
      }
    }
    ```



 




export default {
  data () {
    return {
      msg: 'コードのハイライト（4行目）、ファイル形式の表示'
    }
  }
}

テーブル

「---」は何本でもOK。

thだよ | thだよ
--- | ---
tdだよ | tdだよ
td | td
thだよ thだよ
tdだよ tdだよ
td td
<table>
  <thead>
    <tr>
      <th>thだよ</th>
      <th>thだよ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>tdだよ</td>
      <td>tdだよ</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
    </tr>
  </tbody>
</table>

左寄せ、中央寄せ、右寄せ

  • デフォルトのままなら---|
  • 左寄せなら:--- |
  • 中央寄せなら:---:|
  • 右寄せなら---:
デフォルト | 左寄せにする | 中央寄せにする | 右寄せにする
---|:--- |:---:| ---:
デフォルト | 左寄せ | 中央 | 右寄せ
デフォルト 左寄せにする 中央寄せにする 右寄せにする
デフォルト 左寄せ 中央 右寄せ
<table>
  <thead>
    <tr>
      <th>デフォルト</th>
      <th style="text-align: left;">左寄せにする</th>
      <th style="text-align: center;">中央寄せにする</th>
      <th style="text-align: right;">右寄せにする</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>デフォルト</td>
      <td style="text-align: left;">左寄せ</td>
      <td style="text-align: center;">中央</td>
      <td style="text-align: right;">右寄せ</td>
    </tr>
  </tbody>
</table>

絵文字

絵文字も使えちゃう。

:tada: :100: :jack_o_lantern: :thumbsup: :metal: :man_dancing: :running_woman:

🎉 💯 🎃 👍 🤘 🕺 🏃‍♀

🎉 💯 🎃 👍 🤘 🕺 🏃‍♀

絵文字リストはこちら（markdown-it / markdown-it-emoji | GitHub）(opens new window)

目次

目次を表示。デフォルトではh1〜h2までです。

「h2だけにしたい」「h4までにしたい」などの設定変更はVuePressのMarkdown関連、カスタマイズの基本まとめに記載しています。

[[toc]]


<div class="table-of-contents"><ul><li><a href="#vuepressで使えるmarkdown文法一覧">VuePressで使えるMarkdown文法一覧</a><ul><li><a href="#基本">基本</a></li><li><a href="#見出し系">見出し系</a></li></ul></li><li><a href="#h1だよ">h1だよ</a><ul><li><a href="#h2だよ">h2だよ</a></li><li><a href="#引用">引用</a></li><li><a href="#リスト系">リスト系</a></li><li><a href="#コード">コード</a></li><li><a href="#テーブル">テーブル</a></li><li><a href="#絵文字">絵文字</a></li><li><a href="#目次">目次</a></li><li><a href="#カスタムコンテナ">カスタムコンテナ</a></li></ul></li></ul></div>

カスタムコンテナ

TIPS

::: tip
This is a tip
:::

TIP

This is a tip

<div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>This is a tip</p></div>

WARNING

::: warning
This is a warning
:::

WARNING

This is a warning

<div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>This is a warning</p></div>

danger

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

WARNING

This is a dangerous warning

<div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>This is a dangerous warning</p></div>

カスタム見出し

::: warning カスタム見出し
This is a warning
:::

カスタム見出し

This is a warning

<div class="custom-block warning"><p class="custom-block-title">カスタム見出し</p> <p>This is a warning</p></div>

← 【VuePress】VuePressのMarkdown関連、カスタマイズの基本まとめ →