このページはテーマの書き方を日本語訳したものです。自身の記事作成用です。
見出し
H1 — 見出し
H2 — 見出し
H3 — 見出し
H4 — 見出し
記法:
1
2
3
4
5
6
# H1 — 見出し
## H2 — 見出し
### H3 — 見出し
#### H4 — 見出し
##### H5 — 見出し
###### H6 — 見出し
段落
これは段落のサンプルテキストです。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum malesuada egestas. Duis consectetur porta risus, sit amet vulputate urna facilisis ac. Phasellus semper dui non purus ultrices sodales. Aliquam ante lorem, ornare a feugiat ac, finibus nec mauris. Vivamus ut tristique nisi. Sed vel leo vulputate, efficitur risus non, posuere mi. Nullam tincidunt bibendum rutrum. Proin commodo ornare sapien. Vivamus interdum diam sed sapien blandit, sit amet aliquam risus mattis.
記法:
1
2
3
これは段落のサンプルテキストです。Lorem ipsum dolor sit amet...
段落を分けるには空行を挿入します。
リスト
順序付きリスト
- 第一に
- 第二に
- 第三に
記法:
1
2
3
1. 第一に
2. 第二に
3. 第三に
順序なしリスト
- 章
- セクション
- 段落
- セクション
記法:
1
2
3
- 章
- セクション
- 段落
TODOリスト
- 作業
- ステップ1
- ステップ2
- ステップ3
記法:
1
2
3
4
- [ ] 作業
- [x] ステップ1
- [x] ステップ2
- [ ] ステップ3
説明リスト
- 太陽
- 地球が周回する恒星
- 月
- 地球の自然衛星で、太陽からの反射光によって見える
記法:
1
2
3
4
5
太陽
: 地球が周回する恒星
月
: 地球の自然衛星で、太陽からの反射光によって見える
引用ブロック
この行は_引用ブロック_を示しています。
記法:
1
> この行は_引用ブロック_を示しています。
プロンプト
tipタイプのプロンプトの例です。
infoタイプのプロンプトの例です。
warningタイプのプロンプトの例です。
dangerタイプのプロンプトの例です。
記法:
1
2
3
4
5
6
7
8
9
10
11
> `tip`タイプのプロンプトの例です。
{: .prompt-tip }
> `info`タイプのプロンプトの例です。
{: .prompt-info }
> `warning`タイプのプロンプトの例です。
{: .prompt-warning }
> `danger`タイプのプロンプトの例です。
{: .prompt-danger }
テーブル
| 会社名 | 担当者 | 国 |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | ドイツ |
| Island Trading | Helen Bennett | イギリス |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | イタリア |
記法:
1
2
3
4
5
| 会社名 | 担当者 | 国 |
| :--------------------------- | :--------------- | -------: |
| Alfreds Futterkiste | Maria Anders | ドイツ |
| Island Trading | Helen Bennett | イギリス |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | イタリア |
リンク
記法:
1
2
3
<http://127.0.0.1:4000>
[リンクテキスト](URL)
[リンクテキスト](URL "タイトル")
脚注
フックをクリックすると脚注1に移動し、こちらは別の脚注2です。
記法:
1
2
3
4
フックをクリックすると脚注[^footnote]に移動し、こちらは別の脚注[^fn-nth-2]です。
[^footnote]: 脚注のソース
[^fn-nth-2]: 2番目の脚注のソース
インラインコード
これはインラインコードの例です。
記法:
1
これは`インラインコード`の例です。
ファイルパス
こちらが/path/to/the/file.extendです。
記法:
1
こちらが`/path/to/the/file.extend`{: .filepath}です。
コードブロック
一般的なもの
1
This is a common code snippet, without syntax highlight and line number.
記法:
1
2
3
```text
This is a common code snippet, without syntax highlight and line number.
```
特定の言語
1
2
3
4
if [ $? -ne 0 ]; then
echo "The command was not successful.";
#do the needful / exit
fi;
記法:
1
2
3
4
5
6
```bash
if [ $? -ne 0 ]; then
echo "The command was not successful.";
#do the needful / exit
fi;
```
特定のファイル名
1
2
3
@import
"colors/light-typography",
"colors/dark-typography";
記法:
1
2
3
4
5
6
```sass
@import
"colors/light-typography",
"colors/dark-typography";
```
{: file='_sass/jekyll-theme-chirpy.scss'}
数学
MathJaxにより提供される数学表記：
\[\begin{equation} \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} \label{eq:series} \end{equation}\]この式は\eqref{eq:series}として参照できます。
$a \ne 0$のとき、$ax^2 + bx + c = 0$には2つの解があり、それらは
\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}\]記法:
1
2
3
4
5
6
7
8
9
10
11
12
$$
\begin{equation}
\sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6}
\label{eq:series}
\end{equation}
$$
この式は\eqref{eq:series}として参照できます。
$a \ne 0$のとき、インライン数学は$a \ne 0$のように記述します。
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
Mermaid SVG
gantt
title Adding GANTT diagram functionality to mermaid
apple :a, 2017-07-20, 1w
banana :crit, b, 2017-07-23, 1d
cherry :active, c, after b a, 1d
記法:
1
2
3
4
5
6
7
```mermaid
gantt
title Adding GANTT diagram functionality to mermaid
apple :a, 2017-07-20, 1w
banana :crit, b, 2017-07-23, 1d
cherry :active, c, after b a, 1d
```
画像
デフォルト（キャプション付き）
フルスクリーン幅と中央揃え
記法:
1
2
{: width="972" height="589" }
_フルスクリーン幅と中央揃え_
左揃え
記法:
1
{: width="972" height="589" .w-75 .normal}
左フロート
これは左フロート画像の例です。テキストが画像の右側に回り込むように配置されます。Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien.
記法:
1
2
{: width="972" height="589" .w-50 .left}
これは左フロート画像の例です。テキストが画像の右側に回り込むように配置されます。
右フロート
これは右フロート画像の例です。テキストが画像の左側に回り込むように配置されます。Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilibus leo magna accumsan sapien.
記法:
1
2
{: width="972" height="589" .w-50 .right}
これは右フロート画像の例です。テキストが画像の左側に回り込むように配置されます。
ダーク/ライトモードとシャドウ
下の画像はテーマ設定に基づいてダーク/ライトモードが切り替わり、シャドウが付いていることにご注意ください。
記法:
1
2
{: .light .w-75 .shadow .rounded-10 w='1212' h='668' }
{: .dark .w-75 .shadow .rounded-10 w='1212' h='668' }
動画
記法:
1
2
3
4
5
6
7
8
9
10
<iframe
class="embed-video"
loading="lazy"
src="https://www.youtube.com/embed/Balreaj8Yqs"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
テキストスタイル
太字、斜体、太字斜体、打ち消し線
記法:
1
**太字**、*斜体*、***太字斜体***、~~打ち消し線~~
水平線
記法:
1
2
3
4
5
---
または
***
または
___
HTML要素
Ctrl + C
ハイライトされたテキスト
記法:
1
2
<kbd>Ctrl</kbd> + <kbd>C</kbd>
<mark>ハイライトされたテキスト</mark>