応用的な使い方

¶文字列装飾

装飾したい文字列に対して、CSSの記法を用いてスタイルを定義できます。

装飾したい文字列
<!--rehype:style=....-->

¶例: 文字色の指定

文字を赤くすることができます。
<!--rehype:style=color: red;-->

¶脚注

脚注（フットノート）を作成すると、本文中の語句に注釈番号を付け、その説明を文末にまとめて表示できます。 本文中で脚注を入れたい箇所に [^1] のように記述し、文書内の任意の場所に [^1]: 脚注の説明 と定義します。

文章中の特定の用語に対して、脚注リンクを作成できます[^1].
また、一つの記事内に複数の脚注を定義することも可能です[^2].
[^1]: 画面下部に表示される、このような補足説明のことです。

[^2]: 脚注内のテキストが長くなる場合は、

このように途中で改行して

複数行にわたって記述することもできます。




ここから、さらに本文の続きを記述していきます。

¶Mermaid 記法

Mermaid.js によるダイアグラム作成 (公式サイト)

コードブロックの言語指定を mermaid にすることでダイアグラムを描画できます。

```mermaid
flowchart LR
  A[開始] --> B{条件分岐}
  B -- はい --> C[処理A]
  B -- いいえ --> D[処理B]
  C --> E[終了]
  D --> E
```

¶数式

KaTex 記法に対応(公式サイト)

¶本文での数式

`$$` で囲んで以下のように記載

出力は `$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$` のようになります。

¶コードブロック内

コードブロック内で以下のように記載

```KaTeX
\displaystyle \left( \sum\limits_{k=1}^n a_k b_k \right)^2 \leq \left( \sum\limits_{k=1}^n a_k^2 \right) \left( \sum\limits_{k=1}^n b_k^2 \right)
```

¶目次

記事内で使用されている見出し（ヘッダー）を自動的に抽出し、その階層構造に基づいたリンク付きの目次を生成します。抽出される見出しは、#（h1）から ###（h3）までの3階層分です。

以下のように記載すると目次が生成されます。

[[toc]]
# 見出し1
## 見出し2
### 見出し3

以下のように記載すると目次が右寄せで文章に回り込んで生成されます。

[[>toc]]
# 見出し1
## 見出し2
### 見出し3

¶非表示コメント

表示はしない文章を定義できます。

<!--rehype:ignore:start-->
この内容は表示されません
<!--rehype:ignore:end-->

¶折り畳み

HTML の <details> タグと <summary> タグを使って、クリックで開閉できる折り畳みコンテンツを作成できます。<summary> タグで見出しテキストを指定し、その後に折り畳みたい内容を記述します。<summary> タグを省略することもでき、その場合は「詳細」という既定のラベルが表示されます。

<details>
<summary>折りたたみ、ここをクリックで開閉できます</summary>
ここに折り畳まれた内容を記載します。
### 見出し等のマークダウン記法も使用できます
</details>

¶警告

警告のタグを使うことができます。

> [!NOTE]
> ユーザーが知っておくべき有益な情報です。

> [!TIP]
> より良く簡単に行うためのヒントです。

> [!IMPORTANT]
> 重要な情報です。

> [!WARNING]
> 注意を払うべき緊急の情報です。

> [!CAUTION]
> 注意喚起です。

¶保存とエクスポート

• kintone 付属の印刷機能から出力してください。
• 設定からPDFダウンロードを有効にした場合、詳細表示画面およびプレビュー画面右上にPDFダウンロードボタンが表示されます。 こちらは、ベータ版としており、現状、一部のスタイルでの画面崩れが起きる場合がございます。また、画像として生成されるため、文字をコピー可能なPDFとしては生成されません。 KaTex の数式をPDFダウンロードで出力したい場合は、外部サイトからフォントファイルを取得する必要があるため、「数学記号フォントを外部リソース（CDN）から取得する」のチェックボックスにチェックを入れてください。

¶改ページ

PDF出力時に改ページ（ページ送り）を行いたい箇所に、以下のHTMLタグを挿入します。

<div style="page-break-before:always"></div>

¶ショートカットキー一覧

¶Windows

• Ctrl + Alt + H：画面全体に編集画面を広げます
• Ctrl + Alt + K：編集画面すべてをプレビューにします
• Ctrl + Alt + O：編集画面右半分をプレビューにします

¶Mac

• ⌘ + ⌥ + H：画面全体に編集画面を広げます
• ⌘ + ⌥ + K：編集画面すべてをプレビューにします
• ⌘ + ⌥ + O：編集画面右半分をプレビューにします

¶マークダウン描画イベント（カスタムHTML書き換え用）

この機能は kintone の一覧画面（カスタマイズビュー） でのみ動作します。
マークダウン文字列をHTMLに変換して描画したい場合は、 以下のカスタムイベント kz:markdown-render を利用できます。
このイベントは各レコードの描画タイミングで描画対象のDOM要素を指定してイベント発火することで描画処理を行うことができます。

¶サンプルコード

document.dispatchEvent(
  new CustomEvent('kz:markdown-render', {
    detail: {
      container: container,
      markdown: md,
      record: r,
      viewId: viewId
    }
  })
);

¶イベント詳細

引数の説明

¶フィールドコードの自動展開（{{フィールドコード}} 形式）

マークダウン文中に {{フィールドコード}} と記述することで、同一レコード内の該当フィールドの値を自動的に差し込んで表示できます。 詳細画面・一覧画面の両方で利用可能です。編集画面のプレビューでは差し込みは行われません。

¶使用例

### 本日の作業記録（{{作業日}}）
担当者：{{担当者}}
進捗率：{{進捗}}%
コメント：
{{コメント}}

¶対応フィールドタイプ

以下のフィールドタイプのフィールドコードに対応しています：

• 日付、日時、時刻
• 文字列（1行）、文字列（複数行）
• 数値、ラジオ、ドロップダウン、複数選択
• ルックアップ、リンク、計算、リッチエディタ
• 作成者、更新者、作成日時、更新日時、レコード番号
• ユーザー選択、組織選択、グループ選択
• 添付ファイル
• テーブル

¶対応していない項目

• 関連レコードフィールド
• テーブルの中のフィールド（{{subtable_フィールドコード}} のような記述は無効）

¶注意点

• {{フィールドコード}} の周囲には空白を含めないでください（例：{{ 担当者 }} は無効）
• フィールドコードが一致しない場合、そのまま出力されます
• 複数選択やユーザー選択など複数値を持つ場合はカンマ区切りで展開されます
• 添付ファイルは画像ファイル（拡張子 png, jpeg, jpg, gif, webp）のもののみ、最大3枚まで対応しております