ショートカットサンプル
- デフォルト「hero」画像について
- shortcodesの使い方
- ショートカットの「{{< >}}」は、「\{\{< >\}\}」に置き換えています。
- ショートカットは、使わない方が文書の移管性に優れます。
1. アラートの修飾
アラートの修飾が有効です。
\{\{< 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"
.2. 画像
属性なしの画像
\{\{< 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="立体ボール" >\}\}
杜子春は一日の内に、洛陽の都でも唯ただ一人という大金持になりました。あの老人の言葉通り、夕日に影を映して見て、その頭に当る所を、夜中にそっと掘って見たら、大きな車にも余る位、黄金が一山出て来たのです。
大金持になった杜子春は、すぐに立派な家うちを買って、玄宗げんそう皇帝にも負けない位、贅沢ぜいたくな暮しをし始めました。蘭陵らんりょうの酒を買わせるやら、桂州けいしゅうの竜眼肉りゅうがんにくをとりよせるやら、日に四度よたび色の変る牡丹ぼたんを庭に植えさせるやら、白孔雀しろくじゃくを何羽も放し飼いにするやら、玉を集めるやら、錦にしきを縫わせるやら、香木こうぼくの車を造らせるやら、象牙ぞうげの椅子を誂あつらえるやら、その贅沢を一々書いていては、いつになってもこの話がおしまいにならない位です。
3. Split
複数のカラムを使ったページが表示できます。
3-1.2個のカラムcolumn split
\{\{< split 6 6>\}\}
###### **Left Column**
「お前は何を考えているのだ」と、声をかけるではありませんか。
---
###### Right Column
「私は今夜寝る所もないので、どうしたものかと考えているのです」と、恐る恐る返事をしました。
\{\{< /split >\}\}
Left Column
「お前は何を考えているのだ」と、声をかけるではありませんか。
Right Column
「私は今夜寝る所もないので、どうしたものかと考えているのです」と、恐る恐る返事をしました。
3-2. 3個の column split
\{\{< split 4 4 4 >\}\}
###### Left Column
老人はこう言ったと思うと、今度もまた人ごみの中へ、掻かき消すように隠れてしまいました。
---
###### Middle Column
杜子春はその翌日から、忽たちまち天下第一の大金持に返りました。
---
###### Right Column
ですから車に一ぱいにあった、あの夥おびただしい黄金も、又三年ばかり経つ内には、すっかりなくなってしまいました。
\{\{< /split >\}\}
Left Column
老人はこう言ったと思うと、今度もまた人ごみの中へ、掻かき消すように隠れてしまいました。
Middle Column
杜子春はその翌日から、忽たちまち天下第一の大金持に返りました。
Right Column
ですから車に一ぱいにあった、あの夥おびただしい黄金も、又三年ばかり経つ内には、すっかりなくなってしまいました。
4. Vertical Space
行間の追加
1行目
\{\{< vs 4>\}\}
4rem
5.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.
6. Mermaid
mermaid shortcode
- 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]
- 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!
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
- 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
- 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
- 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
- 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 >\}\}
以上