• デフォルト「hero」画像について
  • shortcodesの使い方
  • ショートカットの「{{< >}}」は、「\{\{< >\}\}」に置き換えています。
  • ショートカットは、使わない方が文書の移管性に優れます。

１. アラートの修飾

アラートの修飾が有効です。

\{\{< alert type="success" >\}\}
サンプルアラートの修飾 `type="success"`.
\{\{< /alert >\}\}

\{\{< alert type="danger" >\}\}
サンプルアラートの修飾 `type="danger"`.
\{\{< /alert >\}\}

\{\{< alert type="warning" >\}\}
サンプルアラートの修飾 `type="warning"`.
\{\{< /alert >\}\}

\{\{< alert type="info" >\}\}
サンプルアラートの修飾 `type="info"`.
\{\{< alert type="dark" >\}\}
サンプルアラートの修飾 `type="dark"`.
\{\{< /alert >\}\}

\{\{< alert type="primary" >\}\}
サンプルアラートの修飾 `type="primary"`.
\{\{< /alert >\}\}

\{\{< alert type="secondary" >\}\}
サンプルアラートの修飾 `type="secondary"`.
\{\{< /alert >\}\}

アラートの修飾が有効です。

サンプルアラートの修飾 type="success".
サンプルアラートの修飾 type="danger".
サンプルアラートの修飾 type="warning".
サンプルアラートの修飾 type="info".
サンプルアラートの修飾 type="dark".
サンプルアラートの修飾 type="primary".
サンプルアラートの修飾 type="secondary".

２. 画像

属性なしの画像
\{\{< img src="/posts/5-markdown/51-markdown/004-shortcodes/015.webp" title="立体ボール" >\}\}
行間
\{\{< vs 3 >\}\}
立体ボール
高さheightと幅width属性ありの画像
\{\{< img src="/posts/5-markdown/51-markdown/004-shortcodes/015.webp" height="400" width="600" title="立体ボール" >\}\}
立体ボール
高さ height 幅 width 中央水平配置
\{\{< img src="/posts/5-markdown/51-markdown/004-shortcodes/015.webp" height="400" width="600" align="center" title="立体ボール" >\}\}
立体ボール
フロート配置 float
\{\{< img src="/posts/5-markdown/51-markdown/004-shortcodes/015.webp" height="200" width="500" float="right" title="立体ボール" >\}\}
立体ボール

　杜子春は一日の内に、洛陽の都でも唯ただ一人という大金持になりました。あの老人の言葉通り、夕日に影を映して見て、その頭に当る所を、夜中にそっと掘って見たら、大きな車にも余る位、黄金が一山出て来たのです。

　大金持になった杜子春は、すぐに立派な家うちを買って、玄宗げんそう皇帝にも負けない位、贅沢ぜいたくな暮しをし始めました。蘭陵らんりょうの酒を買わせるやら、桂州けいしゅうの竜眼肉りゅうがんにくをとりよせるやら、日に四度よたび色の変る牡丹ぼたんを庭に植えさせるやら、白孔雀しろくじゃくを何羽も放し飼いにするやら、玉を集めるやら、錦にしきを縫わせるやら、香木こうぼくの車を造らせるやら、象牙ぞうげの椅子を誂あつらえるやら、その贅沢を一々書いていては、いつになってもこの話がおしまいにならない位です。

３. Split

複数のカラムを使ったページが表示できます。

３-１．２個のカラムcolumn split
\{\{< split 6 6>\}\}

###### **Left Column**

「お前は何を考えているのだ」と、声をかけるではありませんか。

---

###### Right Column

「私は今夜寝る所もないので、どうしたものかと考えているのです」と、恐る恐る返事をしました。

\{\{< /split >\}\}
Left Column

「お前は何を考えているのだ」と、声をかけるではありませんか。

Right Column

「私は今夜寝る所もないので、どうしたものかと考えているのです」と、恐る恐る返事をしました。

３-２. ３個の column split
\{\{< split 4 4 4 >\}\}

###### Left Column

老人はこう言ったと思うと、今度もまた人ごみの中へ、掻かき消すように隠れてしまいました。

---

###### Middle Column

杜子春はその翌日から、忽たちまち天下第一の大金持に返りました。

---

###### Right Column

ですから車に一ぱいにあった、あの夥おびただしい黄金も、又三年ばかり経つ内には、すっかりなくなってしまいました。

\{\{< /split >\}\}
Left Column

老人はこう言ったと思うと、今度もまた人ごみの中へ、掻かき消すように隠れてしまいました。

Middle Column

杜子春はその翌日から、忽たちまち天下第一の大金持に返りました。

Right Column

ですから車に一ぱいにあった、あの夥おびただしい黄金も、又三年ばかり経つ内には、すっかりなくなってしまいました。

４. Vertical Space

行間の追加

１行目

\{\{< vs 4>\}\}

２行目：スペースの高さ4rem

５.Video

\{\{< video src="/videos/sample.mp4" >\}\}

<!-- markdown-link-check-disable-next-line -->
Video by [Rahul Sharma](https://www.pexels.com/@rahul-sharma-493988) from [Pexels](https://www.pexels.com).

Video by Rahul Sharma from Pexels.

６. Mermaid

  1. Graph:
\{\{< mermaid align="left" >\}\}
graph LR;
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
\{\{< /mermaid >\}\}
graph LR; A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two]
  1. Sequence Diagram:
\{\{< mermaid >\}\}
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
\{\{< /mermaid >\}\}
sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
  1. Gantt diagram:
\{\{< mermaid >\}\}
gantt
  dateFormat  YYYY-MM-DD
  title Adding GANTT diagram to mermaid
  excludes weekdays 2014-01-10

section A section
  Completed task            :done,    des1, 2014-01-06,2014-01-08
  Active task               :active,  des2, 2014-01-09, 3d
  Future task               :         des3, after des2, 5d
  Future task2               :         des4, after des3, 5d
\{\{< /mermaid >\}\}
gantt dateFormat YYYY-MM-DD title Adding GANTT diagram to mermaid excludes weekdays 2014-01-10 section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d
  1. Class Diagram:
\{\{< mermaid >\}\}
classDiagram
  Class01 <|-- AveryLongClass : Cool
  Class03 *-- Class04
  Class05 o-- Class06
  Class07 .. Class08
  Class09 --> C2 : Where am i?
  Class09 --* C3
  Class09 --|> Class07
  Class07 : equals()
  Class07 : Object[] elementData
  Class01 : size()
  Class01 : int chimp
  Class01 : int gorilla
  Class08 <--> C2: Cool label
\{\{< /mermaid >\}\}
classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label
  1. Git Graph:
\{\{< mermaid background="black" align="right" >\}\}
gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
\{\{< /mermaid >\}\}
gitGraph: options { "nodeSpacing": 150, "nodeRadius": 10 } end commit branch newbranch checkout newbranch commit commit checkout master commit commit merge newbranch
  1. ER Diagram:
\{\{< mermaid >\}\}
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
\{\{< /mermaid >\}\}
erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

7. Gist

\{\{< gist hossainemruz 4ad86c9b6378677e14eff12713e75e44 >\}\}
以上