document_title	dest
ドキュメントテンプレート	./output/ドキュメントテンプレート.pdf

ドキュメントテンプレート

v1.0.0

yyyy-MM-dd

1. ドキュメントの全体設定

1.1. タイトルの設定

Markdown ファイルの先頭に付与されている document_title 属性にドキュメントのタイトルを設定してください。出力する PDF のヘッダー部分にドキュメントタイトルが印刷されます。

ヘッダーの後に続くのは表紙の設定です。 <div class="title">ドキュメントテンプレート</div> の部分を置き換えてください。

1.2. ドキュメントバージョンの設定

表紙にドキュメントバージョンの表示領域を確保してあります。 <div class="version">v1.0.0</div> の部分を置き換えてください。

1.3. 発行日の設定

表紙に発行日の表示領域を確保してあります。 <div class="date">yyyy-MM-dd</div> の部分を置き換えてください。

1.4. ロゴの差し替え

ドキュメントの表紙には、著者の所属会社や、コミュニティー、著者自身のロゴを表示する領域が用意してあります。ロゴファイルは /docs/_shared-images/logo.svg を利用するように構成してあります。このダミー画像の差し替えか、 ![your logo](/docs/_shared-images/logo.svg) の部分を別のロゴ画像パスに置き換えてください。

1.5. コピーライトの設定

1.6. PDF 出力先の設定

Markdown ファイルの先頭に付与されている dest 属性に、 PDF 化したファイルの出力パスを設定してください。ビルドパイプラインを既定値のまま利用する場合、 ./output フォルダー以下のパスを指定してください。なお dest 属性に指定したフォルダーが存在しない状態で PDF 化スクリプトを実行するとエラーになります。

1.7. 目次の作成

表紙の次のページに目次ページを配置することを推奨します。ドキュメントテンプレートにも、目次ページが入るよう構成してあります。

目次ページには、見出しレベル 1 の「目次」という見出しをつけるようにしてください。これを変更したい場合は、 /docs/base-style.css の修正が必要です。

2. 簡単な構文の例

よく利用する構文について例示します。その他の構文については以下をご覧ください。

https://github.github.com/gfm/

2.1. 通常の本文

本文は 1 文につき 1 行にしてください。マークダウン上の改行は PDF 化の時無視されます。

2.2. 段落

空行を入れるとその部分で段落が分割されます。

最初の文。
次の文。

段落分割後の文。

これは次のようにレンダリングされます。

最初の文。次の文。

段落分割後の文。

2.3. 強調

** で文字列を囲うと、太字にできます。

明日は**9 時集合**です。

これは次のようにレンダリングされます。

明日は9 時集合です。

2.4. 取り消し線

チルダ 2 つで囲うと、取り消し線を引けます。

会議室は ~~705~~ 805 です。

これは次のようにレンダリングされます。

会議室は ~~705~~ 805 です。

2.5. 見出し

「#」を並べると、見出しを作成できます。

# 見出しレベル 1
## 見出しレベル 2
### 見出しレベル 3

Markdown All in One の機能を利用して目次を作成する場合、見出しレベル 3 までが表示されるよう設定してあります。

2.5.1. 見出しレベル 3 のサンプル

見出しレベル 3 の本文。

見出しレベル 4 のサンプル

見出しレベル 4 の本文。

2.6. コードブロック

コードブロックはバッククォート 3 つで囲ってください。バッククォートの前後は空行にします。最初のバッククォートの後ろに言語名を指定することで、きれいなシンタックスハイライトが使えます。

Java の例。

```java
public static void main(String[] args) {
    System.out.println("Hello, World!");
}
```

これは次のようにレンダリングされます。

public static void main(String[] args) {
    System.out.println("Hello, World!");
}

C# の例。

```csharp
static void Main(int[] args)
{
    Console.WriteLine("Hello, World!");
}
```

これは次のようにレンダリングされます。

static void Main(int[] args)
{
    Console.WriteLine("Hello, World!");
}

2.7. インラインコード

コードをインラインで表示する場合はバッククォートで囲ってください。

このようにコード `inline code` を行内に埋め込めます。

これは次のようにレンダリングされます。

このようにコード inline code を行内に埋め込めます。

2.8. リンク

リンク付きの文字列は次のようにしてください。

[リンクの例](https://github.com/tsuna-can-se/md2pdf-doc-template)

これは次のようにレンダリングされます。

リンクの例

URL を < > で囲うと、そのままリンクにできます。

<https://github.com/tsuna-can-se/md2pdf-doc-template>

これは次のようにレンダリングされます。

https://github.com/tsuna-can-se/md2pdf-doc-template

2.9. 画像

2.9.1. 画像ファイル

画像は draw.io で作成した SVG 画像を使用してください。 *.drawio ファイルと、作成した *.svg ファイルを images フォルダーに配置します。画像内に文字を入れる場合は、フォントを Yu Gothic UI に、フォントサイズを 16 ポイントに設定してください。

画像の挿入は次のようにします。

![demo 画像](/docs/_document-template/images/demo.svg)

これは次のようにレンダリングされます。

2.9.2. mermaid

簡単な図は、 mermaid で作成できます ( Beta )。 ```mermaid ～ ``` で囲った範囲に mermaid 記法で図を記述できます。

```mermaid
flowchart TD
    開始 --> 終了
```

これは次のようにレンダリングされます。

flowchart TD
    開始 --> 終了

Loading

2.10. テーブル

2.10.1. 基本のテーブル

テーブルは以下のようにしてください。区切り線の左右に : を入れると、左寄せ / 右寄せ / 中央寄せを設定できます。

| ヘッダー 1 | ヘッダー 2 | ヘッダー 3 |
| ---------- | ---------: | :--------: |
| 左寄せ     |     右寄せ |  中央寄せ  |
| 内容 1     |     内容 2 |   内容 3   |

これは次のようにレンダリングされます。

ヘッダー 1	ヘッダー 2	ヘッダー 3
左寄せ	右寄せ	中央寄せ
内容 1	内容 2	内容 3

2.10.2. 列の結合

セルの最後に複数の | を並べると、列の結合ができます。

| 列 1  | 列 2  | 列 3 |
| ----- | ----- | ---- |
| 列の結合ができます |||

この例では 3 つの | を並べているため、 3 列が結合されます。これは次のようにレンダリングされます。

列 1	列 2	列 3
列の結合ができます

!!! info セル内の改行マークダウンの構文だけでは、セル内改行ができません。セル内に改行の必要な文を書きたい場合は、テーブルではない別の表現方法の採用を検討してください。

どうしても改行したい場合は、セル内に <br /> タグを入れることで、強制的に改行できます。 !!!

2.10.3. 行の結合

セルを閉じる | の前に ^ を並べると、前の行のセルと結合できます。行結合できるのは、列の数が同じものに限られます。「列の結合」と組み合わせる場合、同じ数の列を結合しておく必要があります。

| 列 1    | 列 2   |
| ------- | ------ |
| 3 行の  | セル 1 |
| セルを ^| セル 2 |
| 結合   ^| セル 3 |

この例では ^ をつけたセルを 2 つ並べているため、 3 行のセルが結合されます。これは次のようにレンダリングされます。

列 1	列 2
3 行の	セル 1
セルを ^	セル 2
結合 ^	セル 3

セル内の改行は、結合しても行われません。各セルの文字列は、空白文字 1 つを入れて連結されます。

2.10.4. ヘッダーの結合

ヘッダーに対しても「列の結合」と「行の結合」は適用できます。

| 2 行 2 列の         || ヘッダー A |
| ヘッダーを作れます ^|| ヘッダー B |
| --------- | -------- | -----------|
| セル 1    | セル 2   | セル 3     |

これは次のようにレンダリングされます。

| 2 行 2 列の || ヘッダー A |

ヘッダーを作れます ^		ヘッダー B
セル 1	セル 2	セル 3

!!! attention オートフォーマットと Lint に注意「列の結合」/「行の結合」/「ヘッダーの結合」の構文は、多くのオートフォーマッターで対応していません。このリポジトリの推奨拡張機能としている shuworks.vscode-table-formatter も非対応です。オートフォーマットを実行すると、テーブルが崩れるため注意してください。

また各種 Lint ツールも、これらの構文に対応していません。必要に応じて、解析ルールを無効にしてください。 !!!

2.11. 箇条書き

- で作成してください。半角空白文字を 4 つ入れると、階層構造が作れます。

- 箇条書き 1
- 箇条書き 2
    - 箇条書き 2-1
    - 箇条書き 2-2

      箇条書きの下に文章を追加する場合は、空行を入れてから、半角空白文字を行頭に入れてインデントをそろえます。
      複数文を入れることもできますが、 PDF 化すると 1 行にまとめられます。

- 箇条書き 3

これは次のようにレンダリングされます。

箇条書き 1
箇条書き 2
- 箇条書き 2-1
- 箇条書き 2-2
  
  箇条書きの下に文章を追加する場合は、空行を入れてから、半角空白文字を行頭に入れてインデントをそろえます。複数文を入れることもできますが、 PDF 化すると 1 行にまとめられます。
箇条書き 3

2.12. タスクリスト

チェックボックスを先頭に持つリストをタスクリストと呼びます。チェックボックスのオン / オフを設定できます。

- [ ] タスク 1
    - [x] タスク 1-1
    - [ ] タスク 1-2
- [x] タスク 2

これは次のようにレンダリングされます。

タスク 1
- タスク 1-1
- タスク 1-2
タスク 2

2.13. 番号付きリスト

1. で作成してください。半角空白文字を 4 つ入れると、階層構造が作れます。

1. 番号付きリスト 1
1. 番号付きリスト 2
    1. 番号付きリスト 2-1
    1. 番号付きリスト 2-2

       番号付きリストの下に文章を追加する場合は、空行を入れてから、半角空白文字を行頭に入れてインデントをそろえます。
       複数文を入れることもできますが、 PDF 化すると 1 行にまとめられます。

1. 番号付きリスト 3

これは次のようにレンダリングされます。

番号付きリスト 1
番号付きリスト 2
1. 番号付きリスト 2-1
2. 番号付きリスト 2-2
  
  番号付きリストの下に文章を追加する場合は、空行を入れてから、半角空白文字を行頭に入れてインデントをそろえます。複数文を入れることもできますが、 PDF 化すると 1 行にまとめられます。
番号付きリスト 3

2.14. 引用

引用は > で作成してください。

> 引用の例です。
> 引用の中には、箇条書きなど別の要素を入れることができます。
>
> - 箇条書き 1
> - 箇条書き 2

これは次のようにレンダリングされます。

引用の例です。引用の中には、箇条書きなど別の要素を入れることができます。

箇条書き 1

箇条書き 2

2.15. 水平線

水平線を引く場合は *** を利用します。

***

これは次のようにレンダリングされます。

2.16. エスケープ

半角句読点の文字は、 \ でエスケープできます。

\# \" \| \( \) \. \"

これは次のようにレンダリングされます。

# " | ( ) . "

2.17. アラート

コンテンツの重要な部分を目立たせるために、本文内に囲み記事（アラート）を作成できます。アラートは、以下の構文で作成します。

!!! <アラートの種類> <タイトル>
アラートの本文。
!!!

アラートの種類は、次から選択します。アラートの種類に応じて、配色とアイコンが変わります。

abstract / attention / bug / caution / danger / error / example / failure / hint / info / note / question / quote / success / tip / warning

!!! tip アラートの例
アラートの種類に応じて配色が変わります。
アラートの種類に前述の文字列を指定しないと、正しく表示されません。
`!!!` で囲った範囲には、複数の行を配置できます。

空行を設けると、本文と同様に改行できます。
コードブロックも配置できます。

```java
System.out.println("Hello, World!");
```

画像の配置や `mermaid` の利用もできます。

![demo 画像](/docs/_document-template/images/small-image.svg)

```mermaid
flowchart LR
    開始 --> 終了
```

!!!

これは次のようにレンダリングされます。

!!! tip アラートの例アラートの種類に応じて配色が変わります。アラートの種類に前述の文字列を指定しないと、正しく表示されません。 !!! で囲った範囲には、複数の行を配置できます。

空行を設けると、本文と同様に改行できます。コードブロックも配置できます。

System.out.println("Hello, World!");

画像の配置や mermaid の利用もできます。

flowchart LR
    開始 --> 終了

Loading

!!!

アラートの種類ごとの配色およびアイコンの例は、次のとおりです。

!!! abstract abstract abstract の内容。 !!!

!!! attention attention attention の内容。 !!!

!!! bug bug bug の内容。 !!!

!!! caution caution caution の内容。 !!!

!!! danger danger danger の内容。 !!!

!!! error error error の内容。 !!!

!!! example example example の内容。 !!!

!!! failure failure failure の内容。 !!!

!!! hint hint hint の内容。 !!!

!!! info info info の内容。 !!!

!!! note note note の内容。 !!!

!!! question question question の内容。 !!!

!!! quote quote quote の内容。 !!!

!!! success success success の内容。 !!!

!!! tip tip tip の内容。 !!!

!!! warning warning warning の内容。 !!!

2.18. 数式

KaTeX で数式を記述できます。インラインに数式を入力する場合は、 $ で囲った中に、 KaTeX の構文を記述してください。 $ の前後にスペースを 1 つ以上入れてください。

インラインに数式を $c = \pm\sqrt{a^2 + b^2}$ のように記述できます。

これは次のようにレンダリングされます。

インラインに数式を $c = \pm\sqrt{a^2 + b^2}$ のように記述できます。

$$ で囲うと、ブロック要素として KaTeX の構文を記載できます。 $$ の前後に空行を設けてください。

$$
\begin{cases}
   &10x &+ &3y  &= &2 \\
   &3x  &+ &13y &= &4
\end{cases}
$$

これは次のようにレンダリングされます。

$$ \begin{cases} &10x &+ &3y &= &2 \\ &3x &+ &13y &= &4 \end{cases} $$

ブロック要素とした場合、数式は中央寄せで配置されます。

3. 参考資料

詳細な構文については、以下をご覧ください。

https://github.github.com/gfm/

Files

contents.md

Latest commit

History

contents.md

File metadata and controls

目次

1. ドキュメントの全体設定

1.1. タイトルの設定

1.2. ドキュメントバージョンの設定

1.3. 発行日の設定

1.4. ロゴの差し替え

1.5. コピーライトの設定

1.6. PDF 出力先の設定

1.7. 目次の作成

2. 簡単な構文の例

2.1. 通常の本文

2.2. 段落

2.3. 強調

2.4. 取り消し線

2.5. 見出し

2.5.1. 見出しレベル 3 のサンプル

見出しレベル 4 のサンプル

2.6. コードブロック

2.7. インラインコード

2.8. リンク

2.9. 画像

2.9.1. 画像ファイル

2.9.2. mermaid

2.10. テーブル

2.10.1. 基本のテーブル

2.10.2. 列の結合

2.10.3. 行の結合

2.10.4. ヘッダーの結合

2.11. 箇条書き

2.12. タスクリスト

2.13. 番号付きリスト

2.14. 引用

2.15. 水平線

2.16. エスケープ

2.17. アラート

2.18. 数式

3. 参考資料