Markdown記法でシンプルにライティング
Markdownは簡単な記法で,後からコンバータにかけることにより手軽にHTMLファイルのような文章構造を持ったファイルを生成することができます.
GitHub等の様々なサービスでこの記法を利用することができ,マニュアルやブログのライティングを容易にします.
拡張子はmd
です.
目次
見出しタグ
HTMLファイルで<h1>h1レベルの見出し</h1>
と書くところ,Markdownファイルでは# h1レベルの見出し
とシンプルに書けます.
#
の後には半角スペースが必要です.
<h2>
タグ以下の見出しは,#
の個数で表現します.
# h1レベルの見出し |
箇条書き
順序なしリスト
<ul>
タグによる箇条書きは,Markdownでは次のように書けます.
*
の後には半角スペースが必要です.
* アイテム1 |
- アイテム1
- アイテム2
- アイテム3
HTMLファイルに直接書いたとしたら,
<ul> |
です.
順序付きリスト
<ol>
タグによる箇条書きは次のように書きます.
1. アイテム1 |
- アイテム1
- アイテム2
- アイテム3
1.
の後には半角スペースが必要です.
また,全て1.
でも自動で連番が振られます.
箇条書きのネスト
箇条書きをネストするには,インデントを入れます.
1. パン |
- パン
- 果物
- リンゴ
- ミカン
- 牛乳
文字飾り
強調(斜体)
<em>
タグで文字を強調するところ(=斜体にするところ)は,*
で囲みます.
*斜体* |
斜体
強く強調(太字)
<strong>
タグで文字を強調するところ(=太字にするところ)は,**
で囲みます.
**太字** |
太字
打ち消し線
<del>
タグで打ち消し線を入れるところは,~~
で囲みます.
~~打ち消し線~~ |
打ち消し線
引用
<blockquote>
は>
で表します.
> 引用 |
引用
引用深さ2
リンク
<a href="https://example.com">リンクの例</a>
は次のように書きます.
[リンクの例](https://example.com) |
図
図の入れ方はリンクとよく似ています.
画像ファイルへのリンクを行うからです.
<img src="http://dummyimage.com/570x90" alt="テキスト">
は次のように書きます.
![テキスト](http://dummyimage.com/570x90) |
表
<table>
タグで作る表は次のように書きます.
| 見出し1 | 見出し2 | 見出し3 | |
見出し1 | 見出し2 | 見出し3 |
---|---|---|
1,1 | 1,2 | 1,3 |
2,1 | 2,2 | 2,3 |
行は改行,列は|
で仕切ります.
1行目は見出し行(<th>
)です.
センタリング
列を中央揃えするには,該当列の仕切り罫部分で| :---: |
とします.
左・右寄せはそれぞれ| :--- |
,| ---: |
です.
Excelの表をMarkdownにする
大きな表を手打ちでMarkdown形式にするのは手間が掛かります.
ですが,Excelからコピーした表を下の枠内にペーストするだけでMarkdown形式に変換することができます.
この変換には,copy-excel-paste-markdownスクリプトを使用しています.
コード
インライン
<code>
タグは,インラインならバッククオーテーション`
を使って囲むことで表現します.
コードブロック
<pre>
タグによるコードブロックはバッククオーテーション3つを使って囲みます.
この際,囲みはじめにプログラミング言語を指定することで,その言語へのシンタックスハイライトが有効になります.
```md |
バッククォートをインラインに書く
バッククォートをインラインに書くには,より多いバッククォート数を使って,表示したいバッククォートを囲みます.
囲む際にはスペースを入れてください.
`` ` `` |
テスト用フォーム
入力欄にMarkdown記法で書いたものをHTMLへの出力例に変換するテスト用フォームです.
変換にはMarked.jsを使用しています.