MkDocsで使えるMarkdownサンプル
ここではMkDocsで使えるマークアップについて解説します。
Markdown記法がベースになります。
見出し
1 2 3 4 5 6 7 8 9 10 11 | # 見出し1 ## 見出し2 ### 見出し3 #### 見出し4 ##### 見出し5 ###### 見出し6 見出し1 ============= 見出し2 ------------- |
目次が崩れるので表示例は省略。
Tip
見出し1は各ページの先頭に1つ、見出し2は見出し1より下に書くことで目次が自動作成されます。
ページタイトルは短く、見出し1は情報を詰め込むとメニューに改行ができないため見栄えが良くなります。
引用
1 2 3 4 5 | > 引用です。 > 引用です。 > >> 二重引用です。 >> 二重引用です。 |
引用です。
引用です。二重引用です。
二重引用です。
pre記法
1 2 3 4 | #pre表記 先頭をタブにすることで段落表記が可能。 #pre表記 先頭を半角スペース4つにすることで段落表記が可能。 |
1 2 3 4 | #pre表記 先頭をタブにすることで段落表記が可能。 #pre表記 先頭を半角スペース4つにすることで段落表記が可能。 |
code記法
1 | バッククォートで文字列を囲むことで`コードの一部`を表示可能です。 |
バッククォートで文字列を囲むことでコードの一部
を表示可能です。
文字修飾
1 2 3 4 | 改行は末尾に半角スペースを2文字入れます。 *italic* または _斜文字_ **bold** または __太字__ ***bold*** または ___強調___ |
改行は末尾に半角スペースを2文字入れます。
italic または 斜文字
bold または 太字
bold または 強調
水平線
1 2 3 4 5 6 7 8 9 10 11 | *** アスタリスクを3つ --- ハイフンを3つ ___ アンダースコアを3つ ************************************************************ * * * アスタリスク大量またはスペース含む |
アスタリスクを3つ
ハイフンを3つ
アンダースコアを3つ
アスタリスク大量またはスペース含む
Tip
意図しないマークアップになる可能性が高いので、水平線を使う場合は上下を空けるほうが良い。
リンク
[表示文字](リンクURL "Title属性")
でリンクを記述できます。
[定義文字]:URL "Title属性"
で定義参照も出来ます。
1 2 3 4 5 6 7 | [google](https://www.google.co.jp/ "ぐーぐる")と[yahoo](https://www.yahoo.co.jp/ "やふー") [あっちにgoogle][google](その他の文章)[こっちにyahoo][yahoo] URL( https://www.google.co.jp/ )だけではリンクは作成されない。 サイト内は[mdファイル](index.md)の指定で変換できます。 [google]: https://www.google.co.jp/ "ぐーぐるさん" [yahoo]: https://www.yahoo.co.jp/ (やふーさん) |
googleとyahoo
あっちにgoogle(その他の文章)こっちにyahoo
URL( https://www.google.co.jp/ )だけではリンクは作成されない。
サイト内はmdファイルの指定で変換できます。
テーブル
幾つか記載方法があります。文字寄せも可能。
テーブル内の改行は<br />
タグで改行できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | First Header | Second Header | Third Header ------------ | ------------- | ------------ Content Cell | Content Cell | Content Cell Content Cell | Content Cell | 改行は<br />で行う First Header | Second Header | Third Header :----------- |:-------------:| -----------: Left | Center | Right Left | Center | Right | First Header | Second Header | Third Header | | ------------ | ------------- | ------------ | | Content Cell | Content Cell | Content Cell | | Content Cell | Content Cell | Content Cell | |
First Header | Second Header | Third Header |
---|---|---|
Content Cell | Content Cell | Content Cell |
Content Cell | Content Cell | 改行は で行う |
First Header | Second Header | Third Header |
---|---|---|
Left | Center | Right |
Left | Center | Right |
First Header | Second Header | Third Header |
---|---|---|
Content Cell | Content Cell | Content Cell |
Content Cell | Content Cell | Content Cell |
リスト
リスト上下に空白が必要です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | * Red * Green * Blue --- + Red + Green + Blue --- - Red - Green - Blue --- 1. Bird 1. McHale 1. Parish |
- Red
- Green
- Blue
- Red
- Green
- Blue
- Red
- Green
- Blue
- Bird
- McHale
- Parish
画像

で画像が表示されます。
ハイパーリンクと同じように外部参照も利用できます。
1 2 3 4 5 6 7 8 9 |  ![青][blue] [blue]:img\sample_blue.png "青色" [](img\sample_green.png) [][yellow] [yellow]: img\sample_yellow.png "黄色" |
エスケープ
¥(バックスラッシュ)
でマークアップをエスケープできます。
1 | \ # タイトル |
\ # タイトル
警告文(Material利用)
admonition
オプションを有効にすることで!!!
のマークダウンが利用できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | !!! Note Noteです。 !!! summary summaryです。 !!! Tip Tipです。 !!! Success Successです。 !!! Warning Warningです !!! Failure Failureです。 !!! Danger Dangerです。 !!! Bug Bugです。 |
Note
Noteです。
Summary
summaryです。
Tip
Tipです。
Success
Successです。
Warning
Warningです
Failure
Failureです。
Danger
Dangerです。
Bug
Bugです。
注釈(Material利用)
footnotes
オプションを有効にすることで!!!
のマークダウンが利用できます。
1 2 3 4 | 注釈の 注釈[^1][^2] をつけます。 [^1]: 注釈を付ける単語は左右を半角で空ける [^2]: 注釈はページの一番下 |
Keys(Material利用)
pymdownx.keys
オプションを有効にすることで ++keys++
のマークダウンが利用できます。
使用する際はマークアップの前後を半角スペースで空けます。
定義できるキーは Keys - PyMdown Extensions Documentation を参照ください。
1 | アプリケーションを強制終了するには ++ctrl+f4++ を押します。 |
アプリケーションを強制終了するには Ctrl+F4 を押します。
参考リンク
- MkDocsによるドキュメント作成 - Qiita
- MkDocs で生成したサイトをローカルで開くと index.html が開かれない問題 - stamemo
- MkDocs Themes · mkdocs/mkdocs Wiki · GitHub
- Icons - Material Design
- The Web App Manifest | Web Fundamentals | Google Developers
- MkDocsでドキュメント管理 - notebook
- Markdown記法まとめ(リスト、リンク、画像、インラインHTML、エスケープ)[2/3] - はしくれエンジニアもどきのメモ