すごく簡単！Markdown（マークダウン）記法

以下のマークダウンを「Markdown記法」「実際の表示」「展開されるhtml」に分けて紹介します！
※「実際の表示」については読み込んでいるcssで変わります

• 見出し
• 段落
• 改行
• 箇条書きリスト
• 番号付きリスト
• リンク
• 引用・転載文
• 強調
• コード

見出し【h】

1〜6個の#をつけます。
#のあとは半角スペースを1つ入れて下さい。

Markdown記法

# h1です
## h2です
### h3です
#### h4です
##### h5です
###### h6です

実際の表示

h1です

h2です

h3です

h4です

h5です

h6です

展開されるhtml

<h1>h1です</h1>
<h2>h2です</h2>
<h3>h3です</h3>
<h4>h4です</h4>
<h5>h5です</h5>
<h6>h6です</h6>

段落【p】

改行して空白行を挟むだけ。

Markdown記法

サンプルてきすとデス

てすとテキストです

実際の表示

サンプルてきすとデス

てすとテキストです

展開されるhtml

<p>サンプルてきすとデス</p>
<p>てすとテキストです</p>

改行【br】

改行したい位置に (半角スペース)を2つ入れる。
もしくは<br>を入れる。

Markdown記法

サンプルてきすとデス
テキストてきすとテキストてきすと
てすとテキストです

実際の表示

サンプルてきすとデス
テキストてきすとテキストてきすと
てすとテキストです

展開されるhtml

<p>サンプルてきすとデス<br>
テキストてきすとテキストてきすと<br>
てすとテキストです</p>

箇条書きリスト【ul】

ハイフン-、プラス+、アスタリスク*のいずれかを先頭に記述し (半角スペース)を1つ入れて下さい。

Markdown記法

- リスト1
- リスト2
- リスト3

実際の表示

• リスト1
• リスト2
• リスト3

展開されるhtml

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

番号付きリスト【ol】

1.、2.のように数字ドットを先頭に記述し (半角スペース)を1つ入れて下さい。
※数字であればすべて1.で大丈夫です。

Markdown記法

1. 番号リスト1
2. 番号リスト2
2. 番号リスト3

実際の表示

1. 番号リスト1
2. 番号リスト2
3. 番号リスト3

展開されるhtml

<ol>
  <li>番号リスト1</li>
  <li>番号リスト2</li>
  <li>番号リスト3</li>
</ol>

リンク【a】

[表示したいテキスト](URL)で表示したいテキストがリンクになります。

※Markdownにはtarget属性は無いので別タブで開くことはできません。
※どうしても別タブで開きたい場合はhtmlで書くかJavaScriptを使用して下さい。

Markdown記法

[このブログのトップページ](https://hirakublog.com/)

実際の表示

このブログのトップページ

展開されるhtml

<a href="https://hirakublog.com/">このブログのトップページ</a>

別タブで開く方法

以下のJavaScriptでhrefの中身がhttpから始まり自分サイト以外ならtarget="_blank"つけることができます。

$("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');

※このスクリプトはjQueryを使用してます。
※このスクリプトすべてのaタグに適用されるため範囲を絞りたい場合は下記のようにカスタムして下さい

hogeclassの中のaに適用

$(".hoge a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');

引用・転載文【blockquote】

>を先頭に記述し (半角スペース)を1つ入れて下さい。

Markdown記法

> 引用テキスト引用テキスト引用テキスト
> 引用テキスト引用テキスト
> - 引用リスト
> - 引用リスト

実際の表示

引用テキスト引用テキスト引用テキスト
引用テキスト引用テキスト

• 引用リスト
• 引用リスト

展開されるhtml

<blockquote>
  <p>引用テキスト引用テキスト引用テキスト<br>引用テキスト引用テキスト</p>
  <ul>
    <li>引用リスト</li>
    <li>引用リスト</li>
  </ul>
</blockquote>

強調【em】【strong】【em + strong】

アスタリスク*もしくはアンダースコア_1〜3個で文字を囲むことで強調できます。

Markdown記法

強調*イタリック*

強調**太文字**

強調***イタリック + 太文字***

実際の表示

強調イタリック

強調太文字

強調イタリック + 太文字

展開されるhtml

<p>強調<em>イタリック</em></p>
<p>強調<strong>太文字</strong></p>
<p>強調<strong><em>イタリック + 太文字</em></strong></p>

コード【code】

バッククォートで文字を囲むことでその箇所をコード表示にできます。

Markdown記法

cdコマンドでディテクトリを移動しnpm installコマンドを叩いて下さい。

実際の表示

cdコマンドでディテクトリを移動しnpm installコマンドを叩いて下さい。

展開されるhtml

<p><code>cd</code>コマンドでディテクトリを移動し<code>npm install</code>コマンドを叩いて下さい。</p>

参考サイト

https://qiita.com/tbpgr/items/989c6badefff69377da7