![記法- リンク
URL をリンク（ハイパーリンク）としてテキストへ埋め込む。3 種類
の⽅法がある
基本
⾓括弧「[」「]」の中に表⽰させたいテキストを書く
丸括弧「(」「)」の中にリンク先URL を書く
上の2つを並べて書く
[表⽰されるテキスト](リンク先 URL)
18](https://image.slidesharecdn.com/markdown-beginners-191016061618/85/Markdown-beginners-18-320.jpg)
![参照リンク形式
表⽰されるテキストとリンク先URL を分けて書く形式。⻑いリンクを
本⽂の中に埋め込みたくない場合に便利
[表⽰されるテキスト][参照ラベル]
:
[参照ラベル]:␣リンク先 URL
「[表⽰されるテキスト][参照ラベル]」の塊
「[参照ラベル]:␣リンク先URL」の塊
は1 つ以上の空⾏で区切ること
19](https://image.slidesharecdn.com/markdown-beginners-191016061618/85/Markdown-beginners-19-320.jpg)
![さらに、参照ラベルは省略することができる
[表⽰されるテキスト]
:
[表⽰されるテキスト]:␣リンク先 URL
この場合、表⽰されるテキストと参照ラベルを同じにして対応づける
20](https://image.slidesharecdn.com/markdown-beginners-191016061618/85/Markdown-beginners-20-320.jpg)
「代替テキスト」は画像が表⽰できない際に提⽰されるテキスト。省
略することができる
22](https://image.slidesharecdn.com/markdown-beginners-191016061618/85/Markdown-beginners-22-320.jpg)
23](https://image.slidesharecdn.com/markdown-beginners-191016061618/85/Markdown-beginners-23-320.jpg)
![記法（GFM）- タスクリスト
番号なしリストの⽂字列の頭に「[␣]」、または「[x]」を付与すること
によりタスクリストを表現できる
-␣[␣]␣完了していないタスク
-␣[x]␣完了したタスク
実際には前者はチェックOFF、後者はチェックON として⾒える
VS Code のプレビューでは表⽰できない
35](https://image.slidesharecdn.com/markdown-beginners-191016061618/85/Markdown-beginners-35-320.jpg)
Markdown beginners
- 1. Markdown for beginners 2019/7/31 tagi@jspnet.co.jp, kubota-chi@jspnet.co.jp
- 2. ⽬次（1/2） 1. はじめに 2. Markdown とは？ 3. Visual Studio Code（VS Code） 4. 段落と強制改⾏ 5. 記法 基本のMarkdown GitHub Flavored Markdown（GFM）
- 3. ⽬次（2/2） 6. HTML との関係 HTML の直接埋め込み コメント Babelmark 構造とスタイルの分離 7. ⽤語 8. リンク集
- 4. はじめに Markdown はインターネット時代のライティング法です。 Markdown で⽂章を書いてエクスポートすれば、HTML を書かな くても、完璧にフォーマットされたブログ記事やウェブページ、 コメント欄が完成します。-- Apple Store “ “ 4
- 6. 歴史 2004/8 にJhon Gruber によってMarkdown.pl の初版がリリースさ れる リリースしたもののGruber はMarkdown の改善には消極的 結果として各所で独⾃の定義・拡張がなされ⾮公式な仕様 （Markdown ⽅⾔）が乱⽴する形となった 紆余曲折あり「事実上のMarkdown 標準仕様」である CommonMark が出来上がる 2017/5 にGitHub Flavored Markdown（GFM）がCommonMark を元に作り直される 6
- 7. ⽅⾔ GitHub Flavored Markdown（GFM） MultiMarkdown 論⽂・書籍執筆に便利な記法（脚注や数式など）が追加 はてなブログのMarkdown はてな記法とMarkdown が合体したもの Pandoc's Markdown 幅広い出⼒形式に対応。他のMarkdown ⽅⾔への変換も可能 Pandoc は⽂書変換ツール 7
- 8. R Markdown 統計結果の表やグラフをR の記法を⽤いて埋め込むことができる CommonMark Markdown の（事実上の）標準仕様 R は統計解析⽤の環境 他にもQiita やStack Overflow、Slack のメッセージなど、枚挙に遑 がない 8
- 10. Visual Studio Code（VS Code） ビルトインでMarkdown のプレビューができる Markdown プレビューの処理にmarkdown-it を採⽤している つまり、CommonMark 準拠 Markdown ⽤の拡張が豊富（マーケットプレイス） 10
- 12. Markdown は電⼦メール流段落を原則としている。が、⾒やすさの ために⼊れた改⾏は出⼒の段階で無視（多くの処理系では空⽩⽂字に 変換）される これは、そもそもMarkdown はHTML 出⼒を⽣成するための記法で あり、画⾯の⼤きさに応じて改⾏を⾏う処理（soft wrap）はWeb ブ ラウザが担当すべきであるという設計思想によるもの 12
- 15. 記法- 太字 アスタリスク「*」2 個でテキストを囲むと太字になる **太字** だよ アスタリスク「*」1 個でテキストを囲むことで斜体になる *斜体* だよ 15
- 18. 記法- リンク URL をリンク（ハイパーリンク）としてテキストへ埋め込む。3 種類 の⽅法がある 基本 ⾓括弧「[」「]」の中に表⽰させたいテキストを書く 丸括弧「(」「)」の中にリンク先URL を書く 上の2つを並べて書く [表⽰されるテキスト](リンク先 URL) 18
- 19. 参照リンク形式 表⽰されるテキストとリンク先URL を分けて書く形式。⻑いリンクを 本⽂の中に埋め込みたくない場合に便利 [表⽰されるテキスト][参照ラベル] : [参照ラベル]:␣リンク先 URL 「[表⽰されるテキスト][参照ラベル]」の塊 「[参照ラベル]:␣リンク先URL」の塊 は1 つ以上の空⾏で区切ること 19
- 21. ⾃動リンク記法 URL を⼩なり記号「<」と⼤なり記号「>」で囲む <リンク先 URL> 多くの処理系ではこの記法に従わなくてもリンクとして認識される。 ただ、URL の前後に⽂字がくっついているとダメな場合が多い。この ⾃動リンク記法を⽤いると確実 21
- 22. 記法- 画像 リンク記法の頭に感嘆符「!」を付与する  「代替テキスト」は画像が表⽰できない際に提⽰されるテキスト。省 略することができる  22
- 23. 画像はURL でアクセスできる必要がある。⾃前の画像は images/ デ ィレクトリを作成し、ここに格納しておくのがよい . ├── images/ │ └── marp.png └── markdown-beginners.md 相対パスで書いておけばMrakdown の原稿とともに images/ ディレ クトリもまるっとサーバにアップするだけでよい  23
- 26. 番号なしリストの⼊れ⼦ ⾏頭に半⾓スペース「␣」を2 つ以上挿⼊することで⼊れ⼦になる。 ⾏頭の半⾓スペース「␣」の数を2 倍、3 倍と増やすとさらに⼊れ⼦ にすることができる -␣リスト1 ␣␣-␣リスト1-1 ␣␣-␣リスト1-2 ␣␣␣␣-␣リスト1-2-1 ⼊れ⼦に使う半⾓スペース「␣」の数はMarkdown ⽂書の中で統⼀す べき（プログラムのインデントと同じ）である 26
- 28. 番号付きリストの⼊れ⼦ ⾏頭に半⾓スペース「␣」を挿⼊することで⼊れ⼦になる。親リスト の⽂字列の先頭位置と揃うように半⾓スペースを挿⼊する 1.␣リスト1 ␣␣␣1.␣リスト1-1 ※⾏頭の半⾓スペースの数は 3 : 10.␣リスト10 ␣␣␣␣1.␣リスト10-1 ※⾏頭の半⾓スペースの数は 4 28
- 30. 記法- コード バッククオート「`」でテキストを囲むとコード記法になる `This is code.` 「この部分はソースコード（コマンド）である」を表現するために使 ⽤する。原則として等幅フォントで表⽰されるのでファイル名に使っ たりもする 30
- 31. 記法- コードブロック バッククオート「`」3 つでテキストの塊を囲むとコードブロック記法 になる ``` This is code block. ``` コード表記と同様に等幅フォントで表⽰され、またコードブロック内 の改⾏は出⼒先で必ず改⾏される。ログを貼ったりするときに使った りする 31
- 32. 記法- エスケープ マークアップで使⽤される記号「*」、「#」、「`」⾃⾝を表⽰するに は記号の前にバックスラッシュ「」を⼊れる * # ` バックスラッシュ「」⾃体を表⽰したい場合は「」と2 つ続けて書 く 32
- 35. 記法（GFM）- タスクリスト 番号なしリストの⽂字列の頭に「[␣]」、または「[x]」を付与すること によりタスクリストを表現できる -␣[␣]␣完了していないタスク -␣[x]␣完了したタスク 実際には前者はチェックOFF、後者はチェックON として⾒える VS Code のプレビューでは表⽰できない 35
- 36. 記法（GFM）- 打ち消し線 チルダ「~」2 個でテキストを囲むとテキストの上に打ち消し線をつけ る Markdown は ~~嫌いです~~ 好きです 36
- 37. 記法（GFM）- 絵⽂字 「:絵⽂字の名前:」という形式でプレーンテキストとして絵⽂字を⼊ ⼒できる :smile: :heart: :+1: 絵⽂字の名前はEmoji Cheat Sheet で検索・コピーが可能 VS Code のプレビューでは表⽰できない 37
- 40. HTML の直接埋め込み Markdown はそもそもHTML を⽣成するために開発された⾔語である ため、HTML コードを解釈できるMarkdown 処理系が多い。以下のよ うにも書ける <div style="text-align:center;"> <img src="images/logo.png" width="200"/> </div> ただ「裏技」的な側⾯もあるので処理系に注意しながら使うこと 40
- 41. コメント CommonMark には「コメント記法」に相当する記法がない。HTML のコメントで代⽤する <!-- 単⼀⾏のコメント --> <!-- 複数⾏の コメント --> 41
- 42. Babelmark 多種多様に存在するMarkdown 処理系を⽐較するためのツールとして Babelmark がある。Markdown を検証したい場合に便利 42
- 44. em 要素とstrong 要素 多くのMarkdown 処理系では以下のとおり Markdown HTML *テキスト*（強調） <em>テキスト</em> **テキスト**（強い強調） <strong>テキスト</strong> ⼀⽅、MDN によるHTML の説明を⾒ると、 44
- 45. em 要素 周囲の⽂章と⽐較して、強調されたテキストを⽰す 通常、斜体で表⽰される 以下のタグも通常、斜体で表⽰される <cite> .. 著作物（書籍、演劇、歌など）の題名 <i> .. 外来語、架空の登場⼈物の考え、⽤語の定義を表す⽂字 列など、通常の⽂章から外れた⽂字列 45
- 46. strong 要素 重要なテキストを表す 通常、太字で表⽰される 以下のタグも通常、太字で表⽰される <b> .. 重要であるという意味なしにテキストに興味を引かせる 46
- 47. Markdown には強調（斜体）と強い強調（太字）の2 種類しかない。 ⽬にしてきた限り、欧⽂のページでは 強調（斜体）.. <em> だけでなく<cite> や<i> も扱っている 強い強調（太字）.. <strong> だけでなく<b> も扱っている ケースが多い。 Markdown では「読みやすく、書きやすく」するためにこれらの記法 を簡略化する⼀⽅、「HTML が直接埋め込める」という⼿段を⽤意し ておくことで拡張性を担保したものと思われる 47
- 49. hard wrap 「Enter キーを押した箇所で、⾒た⽬上でも改⾏される」場合の 改⾏。強制改⾏ soft wrap 「ウィンドウの状況や設定などに応じて、⾃動的に改⾏される」 場合の改⾏ 49
- 50. リンク集 Daring Fireball: Markdown Jhon Gruber のMarkdown CommonMark Markdown の（事実上の）標準仕様 markdown-it CommonMark に準拠したMarkdown 処理系 Babelmark Markdown 処理系を⽐較するためのツール（サイト） 50
- 51. Emoji Cheat Sheet 絵⽂字⼀覧 linguist/languages.yml GFM シンタックスハイライトの⾔語識別⼦⼀覧 51