恥ずかしながら今までマークダウン記法で書いて人に共有する・・・というような場面がなかったため、プレーンテキストとインデントを駆使してドキュメントまとめていました。(#が見出しを意味することぐらいは知ってますが・・・)

すべてを覚える必要性は今度もなさそうですが、マークダウン記法が求められる事がときにあると思いますので、自分用のメモをまとめておきます。

[Sponsored Link]





はじめに・・・・

まず、マークダウンを書く際にプレビュー機能があったほうがミスに気づきやすいので必ず導入したい。
何かしらのサービスを使う場合、プラットフォーム側がサービスが対応していれば必要ありません。

いろいろあるので詳しくは調べてみると良いと思います。
私はVSCodeを使用することに。

・WEBブラウザ経由でマークダウンがプレビューできるサイト

https://markdownlivepreview.com/

・クライアントアプリケーション

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

結果↓↓

【基本のキ】よく使うマークダウン記法まとめ

VSCodeでは標準でマークダウンが使用できます。操作方法は

・画面右下のバーからプログラム形式をMarkdownにSET
・Markdownプレビューをショートカットキーで表示
 └Win: [Ctrl]+[K] を押下後に [V]
 └Mac: [Command]+[K] を押下後に [V]

にて表示が可能です。

以下より良く使うマークダウン記法のまとめです。

見出し

まずは絶対によく使う見出しから、#をつければ良いです。簡単ですね。
※シャープと見出し文字の間には半角スペースが必要です。また見出しレベル#は最大6まで用意されています。

ex)
# H1タグです
## H2タグです
### これはH3タグです

【基本のキ】よく使うマークダウン記法まとめ

リストとインデント

続いてリストの紹介、よく使いますね。

ex)
* これはリストです
* これはリストです
* これはリストです

ex)
– これもリストです
– これもリストです
– これもリストです

ex)
1. これは番号付きリストです
1. これは番号付きリストです
1. これは番号付きリストです

Markdown 基本

上記に加えてタブやスペースを行うことでインデントが行えます。

ex)
– 箇条書きリスト_01
– 箇条書きリスト(インデント)
– 箇条書きリスト(インデント)
– 箇条書きリスト(インデント)

– 箇条書きリスト_02
– 箇条書きリスト(インデント)
– 箇条書きリスト(インデント)
– 箇条書きリスト(インデント)

markdown インデント

改行

Markdownの場合、やり方が2つある。一つは半角スペースを2つ使い改行する方法。もう一つはHTMLの
タグを用い改行する方法。
前者でも良いが皆で編集が必要なWikiなどをMarkdownで記載する場合、
タグのほうが視覚的にわかりやすいので採用する事が多いらしい。そりゃそうだ。

ex)
改行なし:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

ex)
改行あり(半角version):吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

ex)
改行あり(HTML Version):吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

Markdown

水平線

ハイフン、アスタリスク、アンダーバーのどれかを3つ連続することで水平線を描く事ができる。どれも同じなのでキーボードの配列によっても違いますが打ちやすいキーを使うと良いでしょう。またHTMLタグのhrも使用する事ができます。

ex)

***
___


markdown 水平線

テーブル組み

手作業で書くと結構面倒なのですが以下の要領で記載する事ができます。

ex)
| PassengerId | Survived | Pclass | Sex | Age |
|————-|———-|——–|——–|—–|
| 1 | 0 | 3 | male | 22 |
| 2 | 1 | 1 | female | 38 |
| 3 | 1 | 3 | female | 26 |
| 4 | 1 | 1 | female | 35 |
| 5 | 0 | 3 | male | 35 |
| 6 | 0 | 3 | male | |
| 7 | 0 | 1 | male | 54 |
| 8 | 0 | 3 | male | 2 |
| 9 | 1 | 3 | female | 27 |
| 10 | 1 | 2 | female | 14 |
| 11 | 1 | 3 | female | 4 |
| 12 | 1 | 1 | female | 58 |
| 13 | 0 | 3 | male | 20 |
| 14 | 0 | 3 | male | 39 |
| 15 | 0 | 3 | female | 14 |
| 16 | 1 | 2 | female | 55 |

実際は変換してくれるジェネレーターがWEB上に沢山ありますのでそれを使用しましょう。いくつかリンク貼っておきます。

https://www.tablesgenerator.com/markdown_tables
https://notepm.jp/markdown-table-tool

上の海外のジェネレーターはよくできていて右クリックや、クリップボード貼り付け(エクセルの表を貼り付けてMarkdownに変換できます)ブックマークしておくと超便利!!!

例えばこんなエクセルをコピペして↓↓

エクセルをMarkdownに変換する

ジェネレーターサイトにいって右クリック >> クリップボードをペーストします。

でてきたMarkdown書式を貼り付け

【基本のキ】よく使うマークダウン記法まとめ

きちんとテーブル構造になっていますね。

引用

HTMLでいうところのblockquoteです。先頭に>をつければいいだけ。メールやチャットでもお馴染みの引用方法ではないでしょうか?各種タグを内包することも勿論可能です。

ex)
> 引用:
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

Markdown 引用 blockquote

ハイパーリンク

大カッコと丸カッコを用い記載します。

ex)
[リンク文字列](リンクURL)

ex)
[当サイトのTOPへ移動](https://310ch.net/)

markdown ハイパーリンク

画像の埋め込み

画像の埋め込みは保存先のURLを指定します。当たり前ですが直リンクは迷惑が掛かるのでやめましょう。

構文は以下のとおりです。

ex)
![画像代替テキスト](画像URL “画像タイトル”)

ex)
![ブラック企業](https://310ch.net/images/sample/markdown.png “ブラック企業”)

markdown 画像の埋め込み

プログラムコードの記載

バッククオートでプログラムコードを囲むことでコードの記載が行えます。

ex)

import pandas as pd
df = pd.read_csv('/aaa.txt' ,encoding='utf-8', sep='\t')
df.head(10)

markdown プログラムコード

また何かしらのプラットフォームでmarkdownを書いている場合には、シンタックスハイライトも利用可能ですので、構文を調べてみると良いと思います。

後述

いかがでしたでしょうか?

今日は基本的なmarkdownの構文に触れました。他にも統計や機械学習の数式をMarkdownにしたり(別途TeX記法が必要です)ができたりと、覚えておいて損はないと思います。

参考

https://daringfireball.net/projects/markdown/
日本語Markdownユーザー会