mnmpep-readme 利用方法-機能の利用方法

文章中に埋め込む画像をモーダル表示化したい場合

通常のmarkdown記法による画像の指定ではなく、下記のテンプレートに従った特殊な記法でmarkdownファイル内に記述することで、ビルド後のHTMLファイルで画像をクリックするとモーダル表示がされるようになります。

[![](画像ファイルのパス)[画像に付け加えたいキャプション文]{.fc}](#画像に付与するID){#画像に付与するID}[![](./mnmpep/close.svg)](#!){.clsbtn}

例えば、ビルドしたHTMLファイルに対して、./img/sample-photo.jpgという相対パスに存在する画像に、“説明用の写真です”というキャプションを付けたモーダル表示をしたい場合、

[![](./img/sample-photo.jpg)[説明用の写真です]{.fc}](#photo01){#photo01}[![](./mnmpep/close.svg)](#!){.clsbtn}

という記述を、画像を挿入したい部分に記します。
上記例の#photo01は、HTMLのid属性として利用するため、必ず頭に#を付与する必要があります。
二カ所とも、必ず同じ文字列を記述してください。
photo01の部分は任意の文字列で構いませんが、同じmarkdownファイル内の他の画像と重複しないように命名してください。

mermaidコードブロックを図として埋め込む場合

markdownテキスト内のコードブロック内で、mermaidコードとして記述した内容は、PandocによるHTMLビルド時に指定するluaフィルターによって自動的に、SVG画像に変換されます。

例えば、他ページにあった目次用HMTL編集の流れセクションの図は、ビルドした結果、下記の記述が文中に埋め込まれたものです。

```mermaid
flowchart TD
    A["1. タイトルを編集"] --> B["2. 左上タイトルリンクを編集"]
    B --> C["3. 初期表示ページ(HOME)を設定"]
    C --> D["4. メニュー項目(details)を追加"]
    D --> E["5. 必要ならサブメニューを入れ子で追加"]
```

mermaidコードを図に変換されることを回避したい部分には、mermaid宣言なしのコードブロックを記述しましょう。

```
flowchart TD
    A["1. タイトルを編集"] --> B["2. 左上タイトルリンクを編集"]
    B --> C["3. 初期表示ページ(HOME)を設定"]
    C --> D["4. メニュー項目(details)を追加"]
    D --> E["5. 必要ならサブメニューを入れ子で追加"]
```