このブログではnpmのMarkdown-itでマークダウン記法からHTMLに変換している。 本記事はMarkdown-itの記法の確認のためのものです。

環境

• npm 6.4.1
• markdown-it
• markdown-it-latex
• markdown-it-highlight

cssをいじっているためいくつかの記法は見慣れないスタイルになっているかも。 （例：h1, h2タグ）

見出し

1個から6個シャープで見出しを記述する。 ※シャープと見出し文字の間には半角スペースを1つ入れること

記述例

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

表示例

見出し1

見出し2

見出し3

見出し4

見出し5

見出し6

箇条書きリスト

ハイフン、プラス、アスタリスクのいずれかで箇条書きリストを記述可能。

※ハイフン、プラス、アスタリスクと箇条書きの項目の間には半角スペースを1つ入れること

記述例

- リスト1
    - ネスト リスト1_1
        - ネスト リスト1_1_1
        - ネスト リスト1_1_2
    - ネスト リスト1_2
- リスト2
- リスト3

表示例

• リスト1
  • ネスト リスト1_1
    • ネスト リスト1_1_1
    • ネスト リスト1_1_2
  • ネスト リスト1_2
• リスト2
• リスト3

番号付きリスト

数値+半角ドットで番号付きリストを記述可能。 番号の内容は何でもいい。実際に表示される際に適切な番号で表示される。 そのため、一般的にはすべて 1. 内容 で記載すると変更に強く楽です。 ※数値+半角ドットと箇条書きの項目の間には半角スペースを1つ入れること

記述例

1. 番号付きリスト1
    1. 番号付きリスト1_1
    1. 番号付きリスト1_2
1. 番号付きリスト2
1. 番号付きリスト3

表示例

1. 番号付きリスト1
   1. 番号付きリスト1_1
   2. 番号付きリスト1_2
2. 番号付きリスト2
3. 番号付きリスト3

引用

> 1. 第一条  
> ロボットは人間に危害を加えてはならない。また、その危険を看過することによって、人間に危害を及ぼしてはならない。  
> 2. 第二条  
> ロボットは人間にあたえられた命令に服従しなければならない。ただし、あたえられた命令が、第一条に反する場合は、この限りでない。  
> 3. 第三条  
> ロボットは、前掲第一条および第二条に反するおそれのないかぎり、自己をまもらなければならない。  
> 
> — 2058年の「ロボット工学ハンドブック」第56版、『[われはロボット](https://amzn.to/301dvm6)』より

表示例

1. 第一条
   ロボットは人間に危害を加えてはならない。また、その危険を看過することによって、人間に危害を及ぼしてはならない。
2. 第二条
   ロボットは人間にあたえられた命令に服従しなければならない。ただし、あたえられた命令が、第一条に反する場合は、この限りでない。
3. 第三条
   ロボットは、前掲第一条および第二条に反するおそれのないかぎり、自己をまもらなければならない。

— 2058年の「ロボット工学ハンドブック」第56版、『われはロボット』より

pre記法(スペース4 or タブ)

半角スペース4個もしくはタブで、コードブロックをpre表示できます

記述例

# Tab
	class Hoge
		def hoge
			print 'hoge'
		end
	end

---

    # Space
    class Hoge
      def hoge
        print 'hoge'
      end
    end

表示例

class Hoge
	def hoge
		print 'hoge'
	end
end

class Hoge
  def hoge
    print 'hoge'
  end
end

code記法

バッククォートで文字列を囲むことでコードの一部を表示可能です。

記述例

インストールコマンドは `pip install hoge` です

表示例

インストールコマンドは pip install hoge です

強調：<em>

アスタリスクもしくはアンダースコア1個で文字列を囲むことで強調します。 見た目は斜体になります。

記述例

normal *italic* normal  
normal _italic_ normal

表示例

normal italic normal
normal italic normal

強調：<strong>

アスタリスクもしくはアンダースコア2個で文字列を囲むことで強調にします。 見た目は太字になります。

記述例

normal **bold** normal  
normal __bold__ normal

表示例

normal bold normal
normal bold normal

強調：<em> + <strong>

アスタリスクもしくはアンダースコア3個で文字列を囲むことで <em> と <strong> による強調を両方適用します。 見た目は斜体かつ太字になります。

記述例

normal ***bold*** normal  
normal ___bold___ normal

表示例

normal bold normal
normal bold normal

水平線

アンダースコア、アスタリスク、ハイフンなどを3つ以上連続して記述することで水平線を表示します。 ※連続するハイフンなどの間にはスペースがあっても良い

記述例

***

___

---

*    *    *

表示例

リンク

[表示文字](リンクURL)形式でリンクを記述できます

[Google先生](https://www.google.co.jp/)

Google先生

定義参照リンク

Markdownの文書の途中に長いリンクを記述したくない場合は、 同じリンクの参照を何度も利用する場合は、リンク先への参照を定義することができます。

[こっちからgoogle][google]  
その他の文章  
[こっちからもgoogle][google]  
  
[google]: https://www.google.co.jp/

こっちからgoogle
その他の文章
こっちからもgoogle

取り消し線

チルダ2個で文字列を囲むことで取り消し線を利用できます。

記述例

~~取り消し線~~

表示例

取り消し線

表組み

記述例

| header1    |     header2 |   header3    |
|:-----------|------------:|:------------:|
| align left | align right | align center |
| a          |           b |      c       |

表示例