🍊

mikanBox

Markdownサンプル

Markdown記法の使い方をご紹介します。

見出し

Markdown


# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

表示

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6

テキスト装飾

Markdown


**太字（アスタリスク）** 

*イタリック（アスタリスク）* 

~~打ち消し線~~

`インラインコード`

**太字と*イタリック*の組み合わせ**

表示
太字（アスタリスク）

イタリック（アスタリスク）

打ち消し線

インラインコード

太字とイタリックの組み合わせ

リスト

Markdown


### 箇条書き（ハイフン）
- 項目A
- 項目B
- 項目C

### 箇条書き（アスタリスク）
* 項目1
* 項目2

### 番号付きリスト
1. 第一
2. 第二
3. 第三

表示

箇条書き（ハイフン）

  • 項目A
  • 項目B
  • 項目C

箇条書き（アスタリスク）

  • 項目1
  • 項目2

番号付きリスト

  1. 第一
  2. 第二
  3. 第三

引用

Markdown


> これは引用文です。

表示

これは引用文です。

コードブロック

markdownはページ編集画面を参照

表示


function hello() {
    echo 'Hello, mikanBox!';
}

リンク

Markdown→HTML


[トップページへ](index)　→　<a href="ページ「index」のURL">トップページへ</a>

[外部リンク](https://example.com)　→　<a href="https://example.com">外部リンク</a>

表示
トップページへ

外部リンク

画像

Markdown→HTML


![画像の説明](mikanBox.jpg)　→　<img src="画像のパス/mikanBox.jpg" alt="画像の説明">

画像のパスはシステムが自動的に判断します。

マークダウン記号とコンテンツの間

マークダウン記号とコンテンツの間には半角か全角のスペースが必要です。

Markdown


### 半角スペース後の見出し

- 半角スペースの箇条書き

1. 半角スペースの番号付きリスト

###　全角スペース後の見出し

-　全角スペースの箇条書き

1.　全角スペースの番号付きリスト

###スペースなし後の見出し

-ペースなし後の箇条書き

1.ペースなし後の番号付きリスト

表示

半角スペース後の見出し

  • 半角スペースの箇条書き
  1. 半角スペースの番号付きリスト

全角スペース後の見出し

  • 全角スペースの箇条書き
  1. 全角スペースの番号付きリスト

###スペースなし後の見出し（Markdownが機能しない）

-ペースなし後の箇条書き（Markdownが機能しない）

1.ペースなし後の番号付きリスト（Markdownが機能しない）

テーブル

Markdown


| 左寄せ | 中央 | 右寄せ | 指定なし |
|:-------|:----:|-------:|-|
| A      |  B   |      C |    D |

2行目があることが必須条件です。その上が見出し行。「-」は、1個以上必要です。

表示

左寄せ中央右寄せ指定なし
ABCD

カスタム属性 {.class #id}　独自仕様

ブロック要素（見出し・段落など）

行末に{.className} {#idName}を書くと、その行のブロック要素にclass/idを付けられます。

重要： 対象テキストと同じ行の末尾に書くこと。複数行にわたる段落では最後の行の末尾に書けば段落全体に適用されます。

Markdown→HTML


## 見出し{.highlight}          → <h2 class="highlight">見出し</h2>

表示

見出し

インライン（文中の一部だけ）

[テキスト]{.className}の形で、<span>にclass/idを付けられます。クラス・IDは複数組み合わせ可能（スペース区切り）。

Markdown→HTML


文章のなかの[赤いテキスト]{.red}、[太字で背景色]{.highlight .bold}をつけてみます。
  ↓
文章のなかの<span class="red">赤いテキスト</span>、<span class="highlight bold">太字で背景色</span>をつけてみます。

表示
文章のなかの赤いテキスト、太字で背景色をつけてみます。

入れ子にすることもできます。内側の[...]{...}から順に処理され、外側のスパンがそれを包みます（三重以上の入れ子も可能）。Material Symbolsなどのアイコンフォントのアイコンを、ボタン風スパンやバッジの中に埋め込む場合に便利です。ただし、[...]{...}の内容に、対応する{...}を持たない裸の[を含めることはできません（入れ子のブラケットはスパンとして解釈されるため）。

Markdown→HTML


[[重要]{.red}なお知らせ]{.highlight}
  ↓
<span class="highlight"><span class="red">重要</span>なお知らせ</span>

表示
重要なお知らせ

これらはmikanBox独自の拡張なので、GitHubなど他のMarkdownレンダラーでは動作しません。

MarkdownとHTMLブロックの混在

本文は基本的にMarkdownとして処理されますが、次のHTMLタグで始まる行はHTMLコードとしてそのまま扱われます（Markdown変換されません）。

html head body div section article aside header footer main nav form p h1〜h6 ul ol li dl dt dd table thead tbody tr th td blockquote pre figure figcaption details summary dialog a span button select video audio script style link meta <!-- コメント --> など

開始タグ・終了タグ（</div> </a> など）どちらも対象です。前後に改行を入れる必要はありません（入れても表示は変わりません）。
前後に空行があり、HTMLタグやMarkdown記号がなければ「段落」として扱われ<p>〜</p>で囲まれます。段落内の改行は<br>になります（HTMLタグの直前・直後には入りません）。段落の中にHTMLタグを混ぜることも可能です。
Markdown＋HTML混在では対応しきれない複雑なレイアウトの場合は、ページ編集画面の「Raw HTML」チェックボックスをONにすると、Markdown処理を完全に無効化してHTMLをそのまま出力できます。