Markdown記法

本页内容修改自https://www.asobou.co.jp/blog/bussiness/markdown#:~:text=Markdown%EF%BC%88%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%80%E3%82%A6%E3%83%B3%EF%BC%89%E3%81%A8%E3%81%AF,%E4%BB%A5%E4%B8%8B%E3%81%AE%E7%89%B9%E5%BE%B4%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82，仅作为页面测试使用。

今回はメモを取るときやドキュメント、ブログを書くときにとても便利はMarkdownを紹介します。

文章の装飾が自動的に行われるので見た目の調整に取られる時間が減り、コンテンツの作成に集中できるようになります。

Markdownとは

Markdown（マークダウン）は文章を記述するための記法（マークアップ言語）の一つです。

Markdown（マークダウン）とは、メールを記述する時のように書きやすくて読みやすいプレーンテキストをある程度見栄えのするHTML文書へ変換できるフォーマットとしてジョン・グルーバーによって開発されました。

以下の特徴があります。

  • 簡単で覚えやすい記述
  • 文章の構造を明示できる
  • Markdownそのままでも理解できる
  • 対応アプリを使うことでより快適に読み書きできる
  • 拡張子は「.md」

Markdownで記述した文章はただのテキストなのでパーサ※によってHTMLに変換します。
このとき、利用するパーサによって出力されるHTMLは若干異なります。
また、利用しているcssによって見栄えも変わります。

※注釈 パーサとは構造化された文書を解析し、別の構文に変換するプログラム

パーサ 【 parser 】パーザ / パーサー
パーサとは、プログラムのソースコードやXML文書など、一定の文法に従って記述された複雑な構造のテキスト文書を解析し、プログラムで扱えるようなデータ構造の集合体に変換するプログラムのこと。そのような処理のことを「構文解析」「パース」(parse)という。
出典: IT用語辞典 e-Words

Markdown記法の記述例

下記に示している左側のエリアに記述したMarkdownが、右側のエリアにHTMLとしてコンバートされます。

見出し

Markdownを使ってみよう

Markdonwとは？

引用

Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。
本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。
しかし、現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換する
ソフトウェア（コンバータ）も開発されている。
各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。

リンク

Wiki:Markdown:WikiのMarkdownのページ

強調

ここがemタグで強調されます
ここがemタグで強調されます
ここがstrongタグで強調されます
ここがstrongタグで強調されます

リスト

  • フシギダネ
  • フシギソウ
  • フシギバナ

テーブル

A列 B列 C列 D列 E列
あ い う え お
か き く け こ
さ し す せ そ

プログラムを記述する場合

1
2
3
4
5
num = 0
while num < 2 do
   print("num = ", num)
end
print("End")

Markdownの書き方

では実際のMarkdownの書き方を見ていきましょう。今回は代表的な記法を紹介していきます。
※Markdownには方言があるので、利用するサービスごとにどんな記法が使えるか確認してみてください。

以降のプレビューではMarkdownパーサとして「marked」を利用し、Github風なcssを適用しています。
https://github.com/chjj/marked

左側のエリアで編集ができるのでぜひ実際にお試しください。

段落と改行

段落は空行で一行あけます。

改行は行末で半角スペースを2つ以上入力します。

1
2
3
4
5
6
7
8
吾輩は猫である。名前はまだ無い。

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

吾輩はここで  
始めて人間という  
ものを見た。  
（青空文庫）

吾輩は猫である。名前はまだ無い。

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

吾輩はここで
始めて人間という
ものを見た。
（青空文庫）

見出し

「#」が一つでh1タグ、「##」が2つでh2タグとなり6つまで記述できます。

またh1とh2だけ別の記述方法があり文章の改行後に「=」を2つ以上記述するとh1に改行後に「-」を2つ以上記述するとh2になります。

1
2
3
4
5
6
7
8
9
10
11
# 吾輩は猫である
## 吾輩は猫である
### 吾輩は猫である
#### 吾輩は猫である
##### 吾輩は猫である
###### 吾輩は猫である

吾輩は猫である
==============
吾輩は猫である
--------------

吾輩は猫である

吾輩は猫である

吾輩は猫である

吾輩は猫である

吾輩は猫である
吾輩は猫である

吾輩は猫である

吾輩は猫である

強調

強調したい文字を「*」で囲むとemタグとなり強調になります。

より強い強調は「**」でstrongタグになります。

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

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

リスト

ハイフン、プラス、アスタリスクのいずれかと半角スペースで箇条書きリストになります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- リスト1
    - ネスト リスト1_1
        - ネスト リスト1_1_1
        - ネスト リスト1_1_2
    - ネスト リスト1_2
- リスト2
- リスト3



1. 番号付きリスト1
    1. 番号付きリスト1_1
    1. 番号付きリスト1_2
1. 番号付きリスト2
1. 番号付きリスト3
  • リスト1
    • ネスト リスト1_1
      • ネスト リスト1_1_1
      • ネスト リスト1_1_2
    • ネスト リスト1_2
  • リスト2
  • リスト3
  1. 番号付きリスト1
    1. 番号付きリスト1_1
    2. 番号付きリスト1_2
  2. 番号付きリスト2
  3. 番号付きリスト3

引用

先頭に「>」と半角スペースを入力すると引用になります。入れ子にすることも可能です。

1
2
3
4
5
> 引用文章  
> 引用文章  
> 
> > 引用文章  
> > 引用文章

引用文章
引用文章

引用文章
引用文章

水平線

「-」、「_」、「*」を3つ以上並べることで水平線を表示します。

1
2
3
---
___
***

リンク

「リンク文字列」でリンクに変換されます。

1
私のブログ[Frozen Sphere](https://laurenfrost.github.io/)

私のブログFrozen Sphere

画像

「![alt文字列](画像URL “title文字列”)」で画像が表示されます。

1
![ブログアイコン](/img/logo.png "Frozen Sphere")

ブログアイコン

ソースコード

1行だけの場合はバッククォートで囲みます。

複数行の場合は先頭にスペースを4つ入れます。

利用しているエディタによりますが、プログラミング言語ごとのシンタックスハイライトに対応している場合は

「言語名」と「」でソースコードを囲むとハイライトされます。

var moge = 100;

var fuga = 1000;
var fizz = 2000;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Sample()
{
    private int $a;
    
    public function __construct(int $a)
    {
        $this->a = $a;
    }
    
    public function hoge(int $x, int $y):int
    {
        return ($x + $y) * $this->a;
    }
}

さいごに

少し記法を覚えるだけで簡単に見栄えの整ったドキュメントが作れることが分かったのではないでしょうか？

Markdown記述サポート機能のついたエディタなどもあるので是非お試しください。

参考

← Prev MPI学习 | Markdown 教程 Next →