Markdownは、テキストベースのマークアップ言語の一種で、その簡易さと読みやすさが広く評価されています。特に、ウェブ上でのコンテンツの書き方や、その他さまざまな文書作成に使用されています。Markdownの主な特徴や利点・マークダウン記法のチートシートを自分の備忘録としてまとめてみました。
マークダウンとは?
- マークダウン記法は、テキストを構造化して記述する「マークアップ言語」の 1 つです。
- 特定の記号を使用して段落、見出し、装飾などを自動的に表示できます。
- 装飾された HTML ドキュメントに変換できる軽量のマークアップ言語
マークダウンの特徴
- シンプルさとアクセシビリティ:
- Markdownは、簡単に覚えることができ、誰でも使い始めることができます。特別なトレーニングや深い技術知識は必要ありません。
- 可読性:
- プレーンテキストで書かれているため、マークアップが最小限に留まり、テキストは非常に読みやすいです。これは、コードやテキストの混在する文書でもその文脈が明確であることを意味します。
- プラットフォーム独立:
- Markdownファイルはプレーンテキストであるため、どのようなデバイスやオペレーティングシステムでも開くことができます。
- 変換の容易さ:
- MarkdownはHTMLに直接変換される設計になっており、ウェブ上での使用が非常に簡単です。さらに、多くのツールがPDF、Word、など他のフォーマットへの変換もサポートしています。
- バージョン管理の互換性:
- プレーンテキストであるため、MarkdownファイルはGitなどのバージョン管理システムと非常に相性が良いです。これにより、変更の追跡やコラボレーションが容易になります。
- 集中的な執筆環境:
- 複雑なマークアップや埋め込みコードを気にすることなく、コンテンツの作成に集中できます。これはブロガーや作家、技術文書作成者にとって特に有益です。
- 拡張性:
- いくつかのバージョンのMarkdownは、表やフットノート、埋め込みコードなどの追加要素をサポートしており、基本的なMarkdownにはない機能を提供します。
ただし、Markdownには制限もあり、非常に複雑な書式や高度なレイアウトを必要とする文書には適していない場合があります。それでも、そのシンプルさと柔軟性のため、多くのプロジェクトやコミュニティで広く採用されています。
Markdownチートシート
見出し:
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
強調(太字):
**太字**
イタリック(斜体):
*イタリック*
引用:
> 引用文
リスト:
* 項目1
* 項目2
* サブ項目2-1
* サブ項目2-2
番号付きリスト:
1. 項目1
2. 項目2
3. 項目3
1. サブ項目3-1
2. サブ項目3-2
コードのインライン表示:
`code`
コードブロック:
(参考:コードは「“`」で挟むことでブロックとして挿入でき、以下のように言語を指定するとコードへ装飾(シンタックスハイライト)が適用されます。)
```js
```
区切り線:
---
リンクの挿入:
[title](https://www.example.com)
画像の挿入:
![alt text](./image.jpg)
画像の挿入し、widthを%で指定:
<img src="***.jpg" width="50%">
フェンスで囲まれたコードブロック:
{
"firstName": "John",
"lastName": "Smith",
"age": 25
}
テーブル 表:
| Syntax | Description |
| ----------- | ----------- |
| Header | Title |
| Paragraph | Text |
これらはMarkdownの基本的な文法ですが、使っているエディターやプラットフォームによっては、これらの標準規則からいくらか変更されている場合があります。また、拡張MarkdownやGitHub Flavored Markdown(GFM)のようなさまざまな派生形が存在し、追加機能や異なる構文が用意されていることもあります。
拡張Markdownの追加機能の例
テーブル 表:
| 左寄せ | 中央寄せ | 右寄せ |
| :--- | :---: | ---: |
| cell1 | cell2 | cell3 |
| cell4 | cell5 | cell6 |
列のアライメントを制御するためのコロン(:)を使用します
フットノート :
これはフットノートの例です。[^1]
[^1]: ここがフットノートのテキストです。
ページの下部に追加情報を提供します。
定義リスト:
用語
: 定義
用語2
: 定義2
取り消し線:
~~取り消されたテキスト~~
テキストの中間に水平線を描くことで、テキストが取り消されたことを示します。
タスクリスト:
- [x] タスク1
- [ ] タスク2
- [ ] タスク3
チェックボックスを利用して、完了したタスクと未完了のタスクを示します
GitHub Flavored Markdownの例
シンタックスハイライト:
```python
def function():
# コメント
print("Hello, world!")
```
特定のプログラミング言語のコードを示すことで、その言語のシンタックスに基づいて色を付けることができます。
取り消し線:
~~取り消し線~~
拡張Markdownでもサポートされています。
タスクリスト:
- [x] タスク1
- [ ] タスク2
- [ ] タスク3
拡張Markdownでもサポートされています。
表:
| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
拡張Markdownでもサポートされています。
メンション:
@username
特定のGitHubユーザーをメンションします。
絵文字サポート:
:emoji_code:
GitHubで絵文字を使いたい場合は、このようにコロンで囲んだテキストを使用します。例::smile:
これらの機能は、Markdownの利便性を大幅に向上させ、特にGitHubなどのプラットフォームでのコード共有やコラボレーションにおいて有用です。それぞれの機能がどの環境やエディターでサポートされているかは、使用している具体的なシステムや設定によって異なる場合があります。
テキスト色の変更
テキスト色の変更:
- Markdown記法では、テキストカラーの変更は対応していないため、Markdown プロセッサがHTMLをサポートしている場合は、HTML
<font>
タグを使用できます。色の名前または 16 進#RRGGBB
コードを使用してフォントの色を指定します。
<font color="red">This text is red!</font>
- Markdownアプリケーションが CSS サポートを提供している場合は、
<font>
タグの代替手段は以下。
<p style="color:blue">Make this text blue.</p>
Useful Link
- Markdown: Cheat Sheet on Markdown Guide
- Markdown: Hacks on Markdown Guide
- Markdown Crash Course Traversy Media in Youtube