Obs082｜ObsidianでMarkdownを学ぶ | Jerryの技術ブログ

バージョン: v1.0 2022/04/04
　　 v1.1 2022/10/22

出典：簡睿隨筆
チュートリアル動画：簡睿學堂併せてご覧いただくと、より効果的です 😄
PDFダウンロード：Google Drive

1. Markdownとは？

Markdownは軽量マークアップ言語であり、複雑で多機能なHTMLと比較して、よりシンプルで使いやすいです。
プレーンテキストに書式設定のマークアップを付与することで、テキストをHTMLに変換できます。
Markdownは読み書きしやすいマークアップ形式を提供します。
John Gruberによって2004年に開発されました。
技術の進歩に伴い、Markdownには複数の派生バージョンも存在します。

2. なぜMarkdownを学ぶのか？

幅広い応用範囲：ウェブサイト、プレゼンテーション、ノート、ドキュメント、書籍、メール、インスタントメッセージングなど、多岐にわたって使用されています。
高いポータビリティ
プラットフォームからの独立性

2.1. Markdownの応用例

非常に多岐にわたるため、すべてを挙げることはできませんが、いくつか例を挙げます。

オンラインMarkdownエディタ：StackEdit、HackMD
静的サイトジェネレーター (Static Site Generator)：Hugo、MkDocs、VuePress
ブラウザ拡張機能：
- メール形式変換：Markdown Here
- ウェブサイトをMarkdownとしてダウンロード：MarkDownload
Windows Markdownエディタ：Markdown Monster、ghostwriter
macOS Markdownエディタ：iA Writer、MacDown、Bear、Craft、Drafts
Linux Markdownエディタ：ghostwriter、ReText
クロスプラットフォームMarkdownエディタ：Typora
iOS / Android Markdownエディタ：iA Writer、Drafts

3. Markdownの処理プロセス

4. 対応するマークアップ

4.1. ブロック要素

マークアップ記号	用途
`#`	見出し
`>`	引用
`1.`	順序付きリスト
`*`	順序なしリスト
`- [ ]`	タスクリスト（チェックリスト）
```	コードブロック
`---`	水平線
`--\|--`	テーブル

4.2. インライン要素

マークアップ記号	用途
`*`	イタリック体
`**`	太字
`***`	太字イタリック体
`~~`	取り消し線
==	ハイライト
`<sup>`	上付き文字
`<sub>`	下付き文字
`code`	インラインコード
`[]()`	リンク
`[[]]`	内部リンク (Obsidian)
`![]()`	画像
`![[]]`	埋め込みファイル (Obsidian)

5. 見出し (Heading)

Heading	HTML
# 見出しレベル 1	`<h1>見出しレベル 1</h1>`
## 見出しレベル 2	`<h2>見出しレベル 2</h2>`
### 見出しレベル 3	`<h3>見出しレベル 3</h3>`
#### 見出しレベル 4	`<h4>見出しレベル 4</h4>`
##### 見出しレベル 5	`<h5>見出しレベル 5</h5>`
###### 見出しレベル 6	`<h6>見出しレベル 6</h6>`

ヒント💡

シャープ記号 (#) の後には少なくとも1つのスペースが必要です。
シャープ記号の直後に文字を続けるとタグになります。
覚え方：#の数が多いほどレベルは小さくなります（例：# がレベル1、###### がレベル6）。

私の使い方

# : ファイル名（ノート名）
## : 大見出し（章）
###: 中見出し（節）

補足

シャープ記号の後に英数字を続けるとタグになります：#タグ

5.1. 代替の見出し構文

Heading	HTML
見出しレベル 1<br>=	`<h1>見出しレベル 1</h1>`
見出しレベル 2<br>---------------	`<h2>見出しレベル 2</h2>`

5.2. 段落 (Paragraph)

段落間は1行の空行で区切ります。

+ 情報

Obsidian設定→【エディタ】→【Strict line breaks】（改行を厳密に処理する）：チェックするとMarkdownの厳密な改行モードになります。

連続する2行の間に空行を挿入しない限り、1行として連結されます。2行にするには空行が必要です。
行末に2つのスペースを挿入すると改行になります。

段落に関する推奨事項

【Strict line breaks】（改行を厳密に処理する）はチェックしないことを推奨します。
段落の先頭にスペースを入れないでください。

6. 改行 (Line break)

【Strict line breaks】（改行を厳密に処理する）の設定は改行の挙動に影響します。

+ 改行に関する推奨事項

【Strict line breaks】（改行を厳密に処理する）はチェックしないことを推奨します。
行末に2つのスペースを入れる方法での改行は使用しないでください。
特殊な状況下（例：テーブルのセル内での改行）では、HTMLの タグを使用してください。

7. 文字の強調 (Emphasis)

7.1. イタリック体

前後に1つのアスタリスク (*) またはアンダースコア (_) で囲まれたテキストはイタリック体になります。（$ はMarkdown標準ではありません）

Italic text	HTML	表示例
`話說天下大勢，分久必合`	`話說天下大勢，<em>分久必合</em>`	話說天下大勢，分久必合
`，_合久必分_`	`，<em>合久必分</em>`	，合久必分
$數學符號使用$	`<mjx-math class="MJX-TEX" aria-hidden="true">...`	$數學符號使用$

イタリック体に関する推奨事項

*の使用を推奨します。

7.2. 太字

前後に2つのアスタリスク (**) またはアンダースコア (__) で囲まれたテキストは太字になります。

Bold text	HTML	表示例
`話說天下大勢，分久必合`	`話說天下大勢，<strong>分久必合</strong>`	話說天下大勢，分久必合
`，__合久必分__`	`，<strong>合久必分</strong>`	，合久必分

太字に関する推奨事項

**の使用を推奨します。

7.3. 太字イタリック体

前後に3つのアスタリスク (***) またはアンダースコア (___) で囲まれたテキストは太字イタリック体になります。__* や **_ のような組み合わせも可能ですが、推奨されません。

Italic text	HTML	表示例
`話說天下大勢，*分久必合*`	`話說天下大勢，<strong><em>分久必合</em></strong>`	話說天下大勢，分久必合
`，___合久必分___`	`，<strong><em>合久必分</em></strong>`	，合久必分

太字イタリック体に関する推奨事項

***の使用を推奨します。

7.4. 取り消し線

前後に2つのチルダ (~~) で囲まれたテキストは取り消し線になります。

前後に2つのチルダ (`~~`) で囲まれたテキストは~~取り消し線になります~~。

例

前後に2つのチルダ (~~) で囲まれたテキストは~~取り消し線になります~~。

7.5. ハイライト

前後に2つの等号 (==) で囲まれたテキストはハイライト表示されます。

Obsidianを学ぶ最善の方法は==書き始めること==、==真剣に書くこと==であり、テーマやプラグインは補助的なものです。

例

Obsidianを学ぶ最善の方法は書き始めること、真剣に書くことであり、テーマやプラグインは補助的なものです。

注意❗

Dataviewのインライン式は「`= 演算式 `」の形式を使用します。バッククォートと2つの等号が続くとDataviewの解析エラーを引き起こす可能性があるため、ハイライトには == を使用し、Dataview式ではバッククォートと等号の間にスペースを入れるなどの注意が必要です。（原文 = は等号 = のHTMLエンティティ）

7.6. 下線

非Markdown標準：Markdownには下線の標準書式はありませんが、HTMLのとタグを使用して下線を引くことができます。

Obsidianのプラグインに多くの時間を費やすのではなく、<u>ノート自体</u>が最も重要です。

例

Obsidianのプラグインに多くの時間を費やすのではなく、ノート自体が最も重要です。

7.7. 上線・圏点など

非Markdown標準：HTMLの<ruby>タグなどを使用します。（ルビや圏点など）

<ruby style="ruby-position: under">漢字<rt>かんじ</rt></ruby>
<ruby style="ruby-position: under">電腦<rt>コンピュータ</rt></ruby>
<span style="-webkit-text-emphasis: filled red">重要内容！</span> 
<span style="border-top: 1px solid red">重要内容！</span>

例

<ruby style="ruby-position: under">電腦<rt>コンピュータ</rt></ruby>
重要内容！ 重要内容！

7.8. 上付き文字と下付き文字

非Markdown標準：Obsidianは上付き/下付き文字の直接的なMarkdown構文をサポートしていませんが、以下の2つの方法で実現できます。

7.8.1. 方法1：MathJax

MathJax (LaTeX、MathML、AsciiMath表記のためのJavaScript表示エンジン) の構文を使用します（この記事ではQuick Latex for Obsidianプラグインを使用）。

構文

$テキスト^上付き文字$
$テキスト_下付き文字$

注意

数式モードでは、英字は通常イタリック体になります。

* $E=MC^2$
* $CO_2$

$E=MC^2$
$CO_2$

7.8.2. 方法2：HTMLタグを使用

構文

テキスト上付き文字
テキスト下付き文字

* E=MC<sup>2</sup>
* CO<sub>2</sub>

E=MC2
CO2

7.9. インラインコード

インラインコード (テキストを1つのバッククォートで囲む) も文字の表示を変えるために使用できます。

8. 引用ブロック (Blockquotes)

行頭に「> 」（大なり記号とスペース）を置くことで引用ブロックを作成します。
行頭に「>> 」（2つの大なり記号とスペース）を置くことで、ネストされた（第2レベルの）引用ブロックを作成します。
引用ブロック内では、一部のMarkdownマークアップをさらに使用できます。使用可能なマークアップは、使用しているアプリケーションの実装によって異なります。

> 111
>> 222 **太字**
>>> AAA *イタリック体*
>>> BBB ***太字イタリック体***
>> 333
> 444

111

222 太字

AAA イタリック体
BBB 太字イタリック体
333
444

引用ブロックに関する推奨事項

引用ブロックの前後には空行を挿入することを推奨します。
ObsidianのCallouts機能で代替できます。

Calloutsの構文

> [!タイプ] タイトル
> 内容

9. リスト (Lists)

9.1. 順序付きリスト

行頭を「数字. 」（数字、ピリオド、スペース）または「数字) 」で始めます。
数字は順番通りである必要はありません。
開始番号はリストの最初の項目の数字から自動的にインクリメントされます。
リスト項目間に空行があると、各項目は段落として扱われます（通常、表示上もスペースが入ります）。空行の後にリスト以外のコンテンツがあると、次のリストブロックは指定された開始番号から新たに始まります。
自動再番号付け（Obsidian）：Tabを押してからShift+Tabを押します。
行頭に4つのスペースまたはTabを置くと、ネストされた（第2レベルの）リストになります。

順序付きリストに関する推奨事項

数字. 形式の使用を推奨します。

9.2. 順序なしリスト

行頭を「* 」（アスタリスク、スペース）、「- 」（ハイフン、スペース）、または「+ 」（プラス、スペース）で始めます。
リスト項目間に空行があると、各項目は段落として扱われます（通常、表示上もスペースが入ります）。
行頭に4つのスペースまたはTabを置くと、ネストされた（第2レベルの）リストになります。
項目内に「数字. 」（数字、ピリオド、スペース）が含まれると意図しないリストになる場合があるため、ピリオドの前にバックスラッシュ \ を使ってエスケープします。（例：1984\. 年）

順序なしリストに関する推奨事項

一貫して同じ記号を使用し、* の使用を推奨します。

10. コード (Code)

10.1. インラインコード

コードを1つのバッククォートで囲みます。
インラインコード内でバッククォート自体を表示するには、コード全体を2つのバッククォートで囲みます。（例： `code` ）

10.2. コードブロック

開始行と終了行を3つのバッククォート ``` で囲みます。
3つのチルダ ~~~ も使用できます。
コードの各行を少なくとも4つのスペースまたは1つのTabでインデントします。（これもコードブロックの代替構文です）

ヒント💡

コードブロックのマークダウン自体を表示するには：全体を4つのバッククォートで囲みます。

```
<kbd>Ctrl+Enter</kbd>
```

10.3. 拡張構文（シンタックスハイライト）

開始のバッククォート ``` の直後に言語識別子を指定することで、シンタックスハイライトを有効にできます。

```html
<kbd>Ctrl+Enter</kbd>
```

11. 水平線

3つ以上のアスタリスク (***)、ハイフン (---)、またはアンダースコア (___) を含む行で作成します。

---

水平線に関する推奨事項

水平線の上下には空行を挿入することを推奨します。

12. リンク

ツールチップ（title属性）は省略可能です。

構文

[表示テキスト](URL "ツールチップ")
<URL>
<メールアドレス@example.com>

[表示テキスト][参照ID]

[参照ID]: URL

💡 ヒント：覚え方

「前方（角括弧）後円（丸括弧）」のように覚えます：[テキスト](URL)

リンクに関する推奨事項

URLにスペースが含まれる場合：

スペースを %20 に置換する。
URLを < > で囲む。（例：<http://example.com/my file.html>）
Obsidianでは、http:// または https:// で始まるURLテキストは自動的にハイパーリンクになります。

Obsidianの内部リンク

[[ノートパス]]
[[ノートパス|指定した表示テキスト]]
[[ノートパス#見出し]]
[[ノートパス^ブロックID]]

13. 画像

構文

![代替テキスト](画像URL "ツールチップ")
![代替テキスト|表示幅](画像URL "ツールチップ")
![代替テキスト|表示幅x高さ](画像URL "ツールチップ")
![代替テキスト](ローカル画像パス)
![代替テキスト][参照ID]

[参照ID]: 画像URL

Obsidianの画像構文

![[ローカル画像パス]]
![[ローカル画像パス|表示幅]]
![[ローカル画像パス|表示幅x高さ]]

内部リンクの埋め込み

![[内部リンク]]
![[内部リンク|指定した表示テキスト]]
![[内部リンク#見出し]]
![[内部リンク^ブロックID]]

画像リンク

画像自体にリンクを設定する場合：
[![代替テキスト](画像URL)](リンク先URL)

14. テーブル

14.1. 整列機能付きテーブル

| ヘッダー1 | ヘッダー2 | ヘッダー3 |
| :------ | :-----: | ------: |
| 111     |   222   |     333 |
| 444     |   555   |     666 |

ヘッダー1	ヘッダー2	ヘッダー3
111	222	333
444	555	666

14.2. シンプルなテーブル

ヘッダー1 | ヘッダー2 | ヘッダー3
---|---|---
111 | 222 | 333
444 | 555 | 666

ヒント

セル内での改行：  タグを使用します。
セル内でパイプ文字 (|) を使用する場合：\| のようにバックスラッシュでエスケープします。

15. ブロック参照 (Block Reference)

段落の末尾に ^ブロックID を挿入することで、内部リンクからそのブロックを参照できます。（Obsidianの機能）

16. 脚注

[^ID]：脚注への参照を指定します。IDは数字または文字列です。表示時には自動的に番号が振られます。
[^ID]: 説明テキスト：脚注の内容を定義します。

Markdownマークアップ言語¹はJohn Gruberによって開発されました。

紅樓夢の作者は曹雪芹² 、紅樓夢又名石頭記³

17. タスクリスト

タスクの説明を入力した後、Ctrl+Enter（Obsidianのショートカット）を押すとタスクリストの構文を素早く作成できます。行頭の記号はハイフン (-)、プラス (+)、アスタリスク (*) が使用できます。

構文

- [ ] 未完了タスクの説明
- [x] 完了タスクの説明

18. コメント

HTMLに出力されない内容がコメントです。

構文

 で終わるHTMLコメント。
%% で囲まれた内容（Obsidian独自のコメント構文）。

19. ウェブページの埋め込み

<iframe src="URL"></iframe>

20. サードパーティ連携

20.1. Mermaid: フローチャートなど

Obsidianコアでサポートされています。

Online FlowChart & Diagrams Editor - Mermaid Live Editor

```mermaid
sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!
```

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

```mermaid
pie title 今週のポモドーロ
    "月曜日": 5
    "火曜日": 11
    "水曜日": 12
    "木曜日": 22
    "金曜日": 10
    "土曜日": 7
    "日曜日": 6
```

pie title 今週のポモドーロ
    "月曜日": 5
    "火曜日": 11
    "水曜日": 12
    "木曜日": 22
    "金曜日": 10
    "土曜日": 7
    "日曜日": 6

20.2. Excalidraw

20.3. Diagrams (Draw.io)

20.4. 絵文字 (Emoji)

21. YAMLフロントマター

主要なキー：

21.1. tags

スペースは使用できません。
単語の区切りにはアンダースコア (_) またはハイフン (-) を使用できます。
全て数字のタグは使用できません（例：#3c はOK、#2022 はNG）。
スラッシュ (/) を使用して階層構造のタグを作成できます（例：3c/notebook）。

ヒント💡

tagsの記述方法は柔軟で、以下のいずれの形式も使用可能です：

tags: test1, test2, tet3/test3-1

tags: [ test1, test2, tet3/test3-1 ]

tags: 
  - test1
  - test2
  - tet3/test3-1

# 以下はより一般的ではないが、機能する可能性がある形式
tags: 
  - test1 test2 tet3/test3-1

21.2. aliases

ノートファイル名の別名。1つのノートに複数の名前（リンク元として使える名前）を付けることができます。

---
aliases: [Markdown使い方, Markdown構文まとめ]
---

21.3. cssClasses

cssClass または cssClasses が使用可能です。特定のCSSクラスをこのノートに適用します。

21.4. publish

publish: true はObsidian Publishサイトに公開、publish: false は公開しません。

22. 関連リンク

💡 解說文章(繁體中文): https://jdev.tw/blog/7066/
💡 Explanation article(English): https://quaily.com/jdevtw-en/p/obs-use-obsidian-learn-markdown
💡 解説記事(日本語): https://quaily.com/jdevtw-jp/p/obs-use-obsidian-learn-markdown

23. チュートリアル動画

▼ YouTube

▼ Bilibili

脚注の説明テキスト ↩︎
曹雪芹，名霑，字夢阮，號雪芹、芹圃、芹溪，清朝小說家、詩人、畫家，中國古典名著《紅樓夢》的作者。生於大清江寧府，祖籍遼陽，清內務府正白旗包衣世家出身。他被考證為三國時代漢朝相國曹操的後代 ↩︎
故事是從女媧補天時所剩下的一塊石頭講起，因此又名《石頭記》。乾隆四十九年甲辰夢覺主人序本題為《紅樓夢》。1791年在第一次活字印刷後，《紅樓夢》便取代《石頭記》成為通行的書名。 ↩︎