MkDocsで使えるMarkdownサンプル
ここではMkDocsで使えるマークアップについて解説します。
Markdown記法がベースになります。
見出し
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
見出し1
=============
見出し2
-------------
目次が崩れるので表示例は省略。
Tip
見出し1は各ページの先頭に1つ、見出し2は見出し1より下に書くことで目次が自動作成されます。
ページタイトルは短く、見出し1は情報を詰め込むとメニューに改行ができないため見栄えが良くなります。
引用
> 引用です。
> 引用です。
>
>> 二重引用です。
>> 二重引用です。
引用です。
引用です。二重引用です。
二重引用です。
pre記法
#pre表記
先頭をタブにすることで段落表記が可能。
#pre表記
先頭を半角スペース4つにすることで段落表記が可能。
#pre表記
先頭をタブにすることで段落表記が可能。
#pre表記
先頭を半角スペース4つにすることで段落表記が可能。
code記法
バッククォートで文字列を囲むことで`コードの一部`を表示可能です。
バッククォートで文字列を囲むことでコードの一部
を表示可能です。
文字修飾
改行は末尾に半角スペースを2文字入れます。
*italic* または _斜文字_
**bold** または __太字__
***bold*** または ___強調___
改行は末尾に半角スペースを2文字入れます。
italic または 斜文字
bold または 太字
bold または 強調
水平線
***
アスタリスクを3つ
---
ハイフンを3つ
___
アンダースコアを3つ
************************************************************
* * *
アスタリスク大量またはスペース含む
アスタリスクを3つ
ハイフンを3つ
アンダースコアを3つ
アスタリスク大量またはスペース含む
Tip
意図しないマークアップになる可能性が高いので、水平線を使う場合は上下を空けるほうが良い。
リンク
[表示文字](リンクURL "Title属性")
でリンクを記述できます。
[定義文字]:URL "Title属性"
で定義参照も出来ます。
[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 />
タグで改行できます。
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 |
リスト
リスト上下に空白が必要です。
* 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
画像

で画像が表示されます。
ハイパーリンクと同じように外部参照も利用できます。

![青][blue]
[blue]:img\sample_blue.png "青色"
[](img\sample_green.png)
[][yellow]
[yellow]: img\sample_yellow.png "黄色"
エスケープ
¥(バックスラッシュ)
でマークアップをエスケープできます。
\ # タイトル
\ # タイトル
コメントアウト
HTMLタグの<!-- -->
を使ってコメントアウトします。
<!-- コメントアウトを書きます -->
警告文(Material利用)
admonition
オプションを有効にすることで!!!
のマークダウンが利用できます。
!!! 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] をつけます。
[^1]: 注釈を付ける単語は左右を半角で空ける
[^2]: 注釈はページの一番下
Keys(Material利用)
pymdownx.keys
オプションを有効にすることで ++keys++
のマークダウンが利用できます。
使用する際はマークアップの前後を半角スペースで空けます。
定義できるキーは Keys - PyMdown Extensions Documentation を参照ください。
アプリケーションを強制終了するには ++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] - はしくれエンジニアもどきのメモ