佐野市どこかの町の町会
マークダウンサンプル
📅
2026-02-07
プレビュー機能網羅的テストサンプル
このファイルは、Markdownエディタのプレビュー機能を徹底的に検証するためのサンプルです。
目次は以下の通りです。
[toc]
---
## 1. 見出し (Headings)
# H1 見出し
## H2 見出し
### H3 見出し
#### H4 見出し
##### H5 見出し
###### H6 見出し
---
## 2. テキスト装飾 (Text Formatting)
基本的な装飾から、プラグインによる拡張装飾まで。
| 装飾タイプ | 記法 | プレビュー |
| :--- | :--- | :--- |
| 太字 | `**Bold**` | **Bold** |
| 斜体 | `*Italic*` | *Italic* |
| 太字＆斜体 | `***Bold & Italic***` | ***Bold & Italic*** |
| 取り消し線 | `~~Strikethrough~~` | ~~Strikethrough~~ |
| インラインコード | `` `Code` `` | `const val = true;` |
| 上付き文字 | `^Superscript^` | X^2^ + Y^2^ = Z^2^ |
| 下付き文字 | `~Subscript~` | H~2~O, C~6~H~12~O~6~ |
| 属性付与 (Attrs) | `{.class-name}` | 赤いテキスト{.text-red} (CSS依存) |
| キーボード | `<kbd>Key</kbd>` | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Esc</kbd> |
### 2.1 特殊文字のエスケープ
Markdownの制御文字をそのまま表示します。
\*アスタリスク\*
\_アンダースコア\_
\# ハッシュ
\[角括弧\]
### 2.2 長い文章の折り返しテスト
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
---
## 3. リスト (Lists)
### 3.1 番号なしリスト (Unordered List)
- レベル 1
- レベル 2
- レベル 3
- アイテム A
- アイテム B
- レベル 2 戻り
- レベル 1
### 3.2 番号付きリスト (Ordered List)
1. ステップ 1
1. サブステップ A
2. サブステップ B
2. ステップ 2
- 番号付きの中の番号なし
3. ステップ 3 (番号指定)
10. 手動で番号を指定してもMarkdownパーサによっては自動採番されます
### 3.3 タスクリスト (Task List)
- [ ] 未完了のタスク
- [x] 完了したタスク
- [ ] `[ ]` 記法によるチェックボックス
- [x] ネストされた完了タスク
### 3.4 定義リスト (Definition List)
Apple
: 米国のテクノロジー企業。iPhoneやMacを製造。
Microsoft
: 米国のソフトウェア企業。WindowsやOfficeを開発。
: Xboxなどのハードウェアも手掛ける。
---
## 4. 引用 (Blockquotes)
> **格言:**
> <br>
> 千里の道も一歩から。
>
> > **ネストされた引用:**
> > これは引用の中にさらに引用を入れた例です。
> >
> > - リストも含めることができます
> > - 引用内でMarkdownも有効です
---
## 5. リンクと画像 (Links & Images)
### 5.1 リンク
- [Writer's Canvas 公式サイト](https://google.com) (外部リンク)
- [見出し1へ戻る](#1-見出し-headings) (内部リンク)
- 自動リンク: <https://www.example.com>
- メールリンク: <address@example.com>
- ツールチップ付きリンク: [ホバーしてください](https://example.com "これはタイトル属性です")
### 5.2 画像
**画像リンク (画像をクリックするとリンク先に飛びます):**
[](https://picsum.photos)
---
## 6. テーブル (Tables)
### 6.1 標準テーブル
| 文字列 (左揃え) | 数値 (右揃え) | 中央揃え |
| :--- | ---: | :---: |
| アイテム A | 1,500 | ○ |
| アイテム B | 200 | △ |
| 長い名前のアイテム C | 1,000,000 | × |
### 6.2 装飾付きテーブル
| コマンド | 説明 | 備考 |
| :--- | :--- | :--- |
| `git status` | **状態確認** | *よく使う* |
| `git commit` | ~~コミット~~ | `message`必須 |
---
## 7. コードブロック (Code Blocks)
### 7.1 JavaScript
```javascript
// フィボナッチ数列
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
console.log(fibonacci(10)); // Output: 55
```
### 7.2 Python
```python
import os
def list_files(startpath):
for root, dirs, files in os.walk(startpath):
level = root.replace(startpath, '').count(os.sep)
indent = ' ' * 4 * (level)
print('{}{}/'.format(indent, os.path.basename(root)))
for f in files:
print('{}{}'.format(indent, f))
```
### 7.3 Diff (コード差分)
```diff
- const foo = 'bar';
+ const foo = 'baz';
console.log(foo);
```
### 7.4 HTML (Raw HTML)
```html
<div class="container">
<p>Hello World</p>
</div>
```
---
## 8. HTML要素の直接記述
Markdown内で許可されているHTMLタグのテストです。
<details>
<summary>ここをクリックして詳細を展開 (Details/Summary)</summary>
ここに詳細な内容が表示されます。
Markdown記法も一部有効な場合があります。
- リスト項目1
- リスト項目2
</details>
<br>
**色付き文字 (span style):**
<span style="color: red;">Red Text</span>
<span style="color: green;">Green Text</span>
<span style="color: blue;">Blue Text</span>
---
## 9. 数式 (MathJax)
**インライン:**
オイラーの等式は $e^{i\pi} + 1 = 0$ です。
**ブロック:**
二次方程式 $ax^2 + bx + c = 0$ の解の公式:
$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$
**行列:**
$$
\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
\times
\begin{pmatrix}
x \\
y
\end{pmatrix}
=
\begin{pmatrix}
ax + by \\
cx + dy
\end{pmatrix}
$$
---
## 10. ダイアグラム (Mermaid)
### 10.1 フローチャート
```mermaid
graph TD
Start((開始)) --> Init[初期化]
Init --> Check{条件判定}
Check -- Yes --> Proc1[処理 A]
Check -- No --> Proc2[処理 B]
Proc1 --> End((終了))
Proc2 --> End
subgraph サブプロセス
Proc1
end
```
### 10.2 シーケンス図
```mermaid
sequenceDiagram
autonumber
Browser->>Server: GET /api/data
activate Server
Server-->>Database: Query
activate Database
Database-->>Server: Result
deactivate Database
Server-->>Browser: JSON Response
deactivate Server
```
### 10.3 ガントチャート
```mermaid
gantt
title プロジェクトスケジュール
dateFormat YYYY-MM-DD
section 設計
要件定義 :done, des1, 2024-01-01, 2024-01-05
基本設計 :active, des2, 2024-01-06, 3d
詳細設計 : des3, after des2, 5d
section 実装
コーディング : coding, after des3, 10d
```
### 10.4 クラス図
```mermaid
classDiagram
class Animal {
+String name
+makeSound()
}
class Dog {
+bark()
}
Animal <|-- Dog
```
---
## 11. チャート (Chart.js)
### 11.1 棒グラフ
```chart
{
"type": "bar",
"data": {
"labels": ["1月", "2月", "3月", "4月", "5月", "6月"],
"datasets": [{
"label": "売上 (万円)",
"data": [12, 19, 3, 5, 2, 3],
"backgroundColor": "rgba(54, 162, 235, 0.2)",
"borderColor": "rgba(54, 162, 235, 1)",
"borderWidth": 1
}]
},
"options": {
"responsive": true,
"scales": {
"y": {
"beginAtZero": true
}
}
}
}
```
### 11.2 ドーナツチャート
```chart
{
"type": "doughnut",
"data": {
"labels": ["赤", "青", "黄"],
"datasets": [{
"data": [300, 50, 100],
"backgroundColor": [
"rgb(255, 99, 132)",
"rgb(54, 162, 235)",
"rgb(255, 205, 86)"
],
"hoverOffset": 4
}]
}
}
```
---
## 12. その他 (脚注・略語・絵文字)
### 12.1 脚注 (Footnotes)
文中の特定の単語[^note1]に対して注釈を付けます。
複数の脚注[^note2]も可能です。
### 12.2 略語 (Abbreviations)
テキスト中の略語にマウスオーバーで説明を表示します。
CSS
HTML
*[CSS]: Cascading Style Sheets
*[HTML]: HyperText Markup Language
### 12.3 絵文字 (Emoji)
- 感情: :smile: :cry: :laughing:
- 物体: :rocket: :computer: :book:
- 記号: :warning: :checkered_flag: :heart:
---
## 13. エッジケース確認
### 長いURLの表示
<https://www.google.com/search?q=very+long+url+parameter+test+example+string+to+check+wrapping+behavior+in+preview+window>
### 巨大な見出し
# 非常に長い見出しテキストが入った場合の折り返し挙動を確認するためのテストセクション
---
[^note1]: 脚注のテストその1です。
[^note2]: 脚注のテストその2です。複数行の解説も記述可能です。