Markdown
https://www.markdown.jp/what-is-markdown/
Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつで、見出し、箇条書きなどの書式を簡単な記号を使ってプレーンテキスト形式で書くことができます。John Gruber（ジョン・グルーバー）によって2004年に開発・公開されました。
Wikiの記法、READMEファイルの記述、電子メールにおいてプレーンテキストを装飾する際に使う記法などがこれと同様のものです。IT・Webの分野では・・というより、これからの社会では、情報共有に必須の「テクニカル・スキル」と言えます。
- テキストエディタでプレーンテキストとして作成
- 拡張子は .md
Markdownファイルを表示するには
- Atomの場合、mdファイルの編集時にカラー区分されるとともに
CTRL + SHIFT + m
でプレビュー表示可能です。 - Firefoxの場合、Markdown Viewer アドオンを追加
- Chromeの場合、Markdown Preview Plus 拡張を追加
Markdownファイルの編集に適した環境は
使い慣れたテキストエディタを利用するのが良いでしょう。
- Atom（OpenSource）
- Visual Studio Code（OpenSource）
- StackEdit：オンラインのエディタです。
- Marp：Markdownでスライドを作ることができます。
記法
見出し
行頭に「#」をつけることで、見出しに変換されます。
# 見出し1 ## 見出し2 ### 見出し3 #### 見出し4
箇条書き
行頭に [ * ] / [ + ] / [ - ] のいずれかで Disc型リスト（ul）になります。
(空行) * リスト項目1 + リスト項目2 - リスト項目3 (空行)
行頭に [ 1 ] , [ 2 ] , [ 3 ] ...を入れるとDecimal型リスト(ol)になります。
(空行) 1. リスト項目1 2. リスト項目2 3. リスト項目3 (空行)
以下のように TAB でインデントをとるとネストすることが可能です。
- リスト1
- ネスト リスト1_1
- ネスト リスト1_1_1
- ネスト リスト1_1_2
- ネスト リスト1_2
- リスト2
- リスト3
テキスト装飾
[ * ] または [ _ ] で囲んだ範囲がイタリック体になります。
*イタリック* _イタリック_
[ * ] または [ _ ] を２つ重ねて囲んだ範囲が太字になります。
**太字** __太字__
[ ~ ]（ チルダ）を２つ重ねて囲んだ範囲に取り消し線がつきます。
~~定価 1,000円~~
画像
画像を掲載するには代替文字列を ![ ] で囲んだ後に、ファイルへのパスを( )で囲んで記述します（パスは当該 MDファイルから見た相対パスです）。
画像をサイズ指定で表示したい場合は、HTMLタグが利用可能です。
<img src="images/sample.jpg" width="160">
表組
以下のように縦ストロークで表組が可能です。
| LEFT | CENTER | RIGHT | | ------- |:----------:| ------:| | item1 | circle | red | | item2 | triangle | green | | item3 | rect | blue |
リンク
Markdownには インライン と リファレンス という二つのリンクスタイルと、単純にURLを書くだけの自動リンクがあります。
- インラインスタイル
リンクしたい文字列を [ ]（隅カッコ）で＋リンク先URLを[Google](http://www.google.com)
- リファレンス
名前と番号を使って定義したリンクを参照するものです。* [GOOGLE][1] * [YAHOO][2] [1]: https://www.google.co.jp "Google" [2]: https://www.yahoo.co.jp "Yahoo!"
- 自動リンク
単純に<>でURIを囲むと自動的にリンクになります。<http://www.w3.org>
引用
行頭に [ > ] で引用になります。複数行にまたがる場合 各行に [ > ]。
>やまとうたは、人の心を種として、万の言の葉とぞなれりける。 >世の中にある人、ことわざ繁きものなれば、心に思ふことを、 >見るもの聞くものにつけて、言ひ出せるなり。
ソースコードブロック
[ ` ]（バッククォート）を使うと、HTML, CSS などのコードの表示が可能です。複数行にわたる場合は、三連バッククォート [ ``` ] で挟むように記述します。
この記号は [ ' ]（シングルクォート）ではありません。[SHIFT]+[@] で出ます。
`<h1>Sample</h1>` ` ` ` <div> <p>Sample Text</p> </div> ` ` `
APPENDIX
Markdown Viewer
.md ファイルの Drag&Dropで Markdownのプレビューが可能です。
- DEMO：https://koichi-inoue.github.io/MarkdownViewer/
- CODE：https://github.com/koichi-inoue/MarkdownViewer
サンプルデータ
- View：https://github.com/koichi-inoue/MarkdownSample/blob/main/sample.md
- Files：https://github.com/koichi-inoue/MarkdownSample
関連記事
- XMLHttpRequest
Markdownを JavaScript で読み込んで表示するサンプル