diff --git a/.textlintrc b/.textlintrc index 8db66d9..eef4888 100644 --- a/.textlintrc +++ b/.textlintrc @@ -43,6 +43,7 @@ "ja-no-orthographic-variants": true, "@textlint-ja/no-synonyms": { "allows": [ + "=", "運用", "開催", "完了", diff --git a/docs/_document-template/contents.md b/docs/_document-template/contents.md index 0550042..a86466c 100644 --- a/docs/_document-template/contents.md +++ b/docs/_document-template/contents.md @@ -2,7 +2,7 @@ document_title: ドキュメントテンプレート dest: ./output/ドキュメントテンプレート.pdf --- - +
ドキュメントテンプレート
@@ -42,6 +42,10 @@ dest: ./output/ドキュメントテンプレート.pdf - [2.9.1. 画像ファイル](#291-画像ファイル) - [2.9.2. mermaid](#292-mermaid) - [2.10. テーブル](#210-テーブル) + - [2.10.1. 基本のテーブル](#2101-基本のテーブル) + - [2.10.2. 列の結合](#2102-列の結合) + - [2.10.3. 行の結合](#2103-行の結合) + - [2.10.4. ヘッダーの結合](#2104-ヘッダーの結合) - [2.11. 箇条書き](#211-箇条書き) - [2.12. タスクリスト](#212-タスクリスト) - [2.13. 番号付きリスト](#213-番号付きリスト) @@ -294,6 +298,8 @@ flowchart TD ## 2.10. テーブル +### 2.10.1. 基本のテーブル + テーブルは以下のようにしてください。 区切り線の左右に `:` を入れると、左寄せ / 右寄せ / 中央寄せを設定できます。 @@ -311,8 +317,84 @@ flowchart TD | 左寄せ | 右寄せ | 中央寄せ | | 内容 1 | 内容 2 | 内容 3 | -セル内改行はできません。 -セル内に文を書きたい場合は、テーブルではない別の表現方法を検討してください。 +### 2.10.2. 列の結合 + +セルの最後に複数の `|` を並べると、列の結合ができます。 + +```md +| 列 1 | 列 2 | 列 3 | +| ----- | ----- | ---- | +| 列の結合ができます ||| +``` + +この例では 3 つの `|` を並べているため、 3 列が結合されます。 +これは次のようにレンダリングされます。 + +| 列 1 | 列 2 | 列 3 | +| ----- | ----- | ---- | +| 列の結合ができます ||| + +!!! info セル内の改行 +マークダウンの構文だけでは、セル内改行ができません。 +セル内に改行の必要な文を書きたい場合は、テーブルではない別の表現方法の採用を検討してください。 + +どうしても改行したい場合は、セル内に `
` タグを入れることで、強制的に改行できます。 +!!! + +### 2.10.3. 行の結合 + +セルを閉じる `|` の前に `^` を並べると、前の行のセルと結合できます。 +行結合できるのは、列の数が同じものに限られます。 +「列の結合」と組み合わせる場合、同じ数の列を結合しておく必要があります。 + +```md +| 列 1 | 列 2 | +| ------- | ------ | +| 3 行の | セル 1 | +| セルを ^| セル 2 | +| 結合 ^| セル 3 | +``` + +この例では `^` をつけたセルを 2 つ並べているため、 3 行のセルが結合されます。 +これは次のようにレンダリングされます。 + +| 列 1 | 列 2 | +| ------- | ------ | +| 3 行の | セル 1 | +| セルを ^| セル 2 | +| 結合 ^| セル 3 | + +セル内の改行は、結合しても行われません。 +各セルの文字列は、空白文字 1 つを入れて連結されます。 + +### 2.10.4. ヘッダーの結合 + +ヘッダーに対しても「列の結合」と「行の結合」は適用できます。 + +```md +| 2 行 2 列の || ヘッダー A | +| ヘッダーを作れます ^|| ヘッダー B | +| --------- | -------- | -----------| +| セル 1 | セル 2 | セル 3 | +``` + +これは次のようにレンダリングされます。 + + +| 2 行 2 列の || ヘッダー A | +| ヘッダーを作れます ^|| ヘッダー B | +| --------- | -------- | --------------------------------------------------- | +| セル 1 | セル 2 | セル 3 | + + +!!! attention オートフォーマットと Lint に注意 +「列の結合」/「行の結合」/「ヘッダーの結合」の構文は、多くのオートフォーマッターで対応していません。 +このリポジトリの推奨拡張機能としている `shuworks.vscode-table-formatter` も非対応です。 +オートフォーマットを実行すると、テーブルが崩れるため注意してください。 + +また各種 Lint ツールも、これらの構文に対応していません。 +必要に応じて、解析ルールを無効にしてください。 +!!! ## 2.11. 箇条書き diff --git a/md-to-pdf-config.js b/md-to-pdf-config.js index e9dae0b..2b0daf0 100644 --- a/md-to-pdf-config.js +++ b/md-to-pdf-config.js @@ -1,5 +1,6 @@ const admonition = require('marked-admonition-extension'); const markedKatex = require('marked-katex-extension'); +const extendedTables = require("marked-extended-tables"); const markedKatexOptions = { throwOnError: false @@ -21,7 +22,7 @@ module.exports = { "docs/base-style.css" ], body_class: 'markdown-body', - marked_extensions: [ admonition.default, markedKatex(markedKatexOptions) ], + marked_extensions: [ admonition.default, markedKatex(markedKatexOptions), extendedTables() ], marked_options: [{ mermaid_renderer }], pdf_options: { format: 'a4', diff --git a/package-lock.json b/package-lock.json index 8732d37..d292eba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "cspell-cli": "^8.17.0", "markdownlint-cli2": "^0.16.0", "marked-admonition-extension": "^0.0.4", + "marked-extended-tables": "^1.0.10", "marked-katex-extension": "^5.1.3", "md-to-pdf": "^5.2.4", "npm-run-all2": "^7.0.2", @@ -5179,6 +5180,16 @@ "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", "dev": true }, + "node_modules/marked-extended-tables": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/marked-extended-tables/-/marked-extended-tables-1.0.10.tgz", + "integrity": "sha512-zvRS0GPTkxq8UWawSDecd1Rxd2KD8crrmq2QALGDdrgkcgRNQzHlbnlujBGuXxdgDJg7f6UTv+JpcfejBpKdSg==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "marked": ">=3 <15" + } + }, "node_modules/marked-katex-extension": { "version": "5.1.3", "resolved": "https://registry.npmjs.org/marked-katex-extension/-/marked-katex-extension-5.1.3.tgz", diff --git a/package.json b/package.json index d50c619..c6af70d 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "cspell-cli": "^8.17.0", "markdownlint-cli2": "^0.16.0", "marked-admonition-extension": "^0.0.4", + "marked-extended-tables": "^1.0.10", "marked-katex-extension": "^5.1.3", "md-to-pdf": "^5.2.4", "npm-run-all2": "^7.0.2", diff --git a/pdf-sample.md b/pdf-sample.md index 971d864..3d96709 100644 --- a/pdf-sample.md +++ b/pdf-sample.md @@ -54,6 +54,14 @@ ![テーブルのサンプル](https://github.com/user-attachments/assets/ff980539-0c87-443c-9fdd-bc1427a1007f) +拡張構文を用いれば、セルの結合ができます。 + +![列の結合サンプル](https://github.com/user-attachments/assets/e9821346-3c06-4b89-9aad-00cabb18ee6d) + +![行の結合サンプル](https://github.com/user-attachments/assets/266c9bcb-27c9-4089-91b3-6798f2ab59a4) + +![ヘッダーの結合サンプル](https://github.com/user-attachments/assets/058ac42e-06b5-4db1-a1ee-0fd6d5fc106a) + ## 箇条書き 箇条書きは、インデントをつけると階層化できます。