【更新もれ問題解決】手順書を書くなら Markdown Preview Enhanced を使おう

.markdown-preview.markdown-preview {

    font-family: Meiryo, メイリオ;

    p {
        margin-bottom: .25rem;
        line-height: 1.4;
        font-size: .95rem;
        color: #444;
        text-indent: .5rem;
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
        margin-bottom: .25rem;
        padding-bottom: 0;
        color: #222;
    }

    h1 {
        font-size: 1.5rem;
        font-weight: normal;
        counter-reset: h2SectionCounter;
    }

    h2 {
        font-size: 1.2rem;

        &:not(.toc) {
            counter-increment: h2SectionCounter;
            counter-reset: h3SectionCounter;
        }
    }

    h3 {
        font-size: 1.1rem;
        counter-increment: h3SectionCounter;
        counter-reset: h4SectionCounter;
    }

    h4 {
        font-size: 1.1rem;
        counter-increment: h4SectionCounter;
        counter-reset: h5SectionCounter;
    }

    h5 {
        font-size: 1rem;
        counter-increment: h5SectionCounter;
    }

    h2:not(.toc):before {
        content: counter(h2SectionCounter) ".";
    }

    h3:before {
        content: counter(h2SectionCounter) "."counter(h3SectionCounter) ".";
    }

    h4:before {
        content: counter(h2SectionCounter) "."counter(h3SectionCounter) "."counter(h4SectionCounter) ".";
    }

    h5:before {
        content: counter(h2SectionCounter) "."counter(h3SectionCounter) "."counter(h4SectionCounter) "."counter(h5SectionCounter) ".";
    }
}

│  sample.md
│  style.less
│  _environment.md
│
├─configs
│      sample.yaml
│
├─csvs
│      sample.csv
│
├─draws
│      sample.drawio.png
│
├─images
│      drawio-convert.png
│      drawio-drawio-png.png
│      drawio-editor.png
│      mpe-create-toc.png
│
└─scripts
        sample.sh

@import "./style.less"

# Markdown Preview Enhanced 便利機能

<!-- @import "[TOC]" {cmd="toc" depthFrom=2 depthTo=6 orderedList=true} -->

<!-- code_chunk_output -->

1. [自動更新目次](#自動更新目次)
2. [ファイルの挿入(基本)](#ファイルの挿入基本)
3. [drawio図形の挿入](#drawio図形の挿入)
4. [設定ファイルの挿入](#設定ファイルの挿入)
5. [PlantUML図形の挿入](#plantuml図形の挿入)
6. [Markdownの挿入](#markdownの挿入)

<!-- /code_chunk_output -->

## 自動更新目次

1. `ctrl + shift + p` でコマンドパレットを表示
2. Markdown Preview Enhanced: Create TOC を選択
@import "./images/mpe-create-toc.png"
3. カーソル行に以下の行が挿入され、以後自動更新される
'''
<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->
'''
4. depthFrom=1 で生成するが、`#`のタイトルも目次対象となるので、depthFrom=2 に修正する

## ファイルの挿入(基本)

`@import "ファイル名"`で挿入する。
拡張子に合わせて、画像、図、表、コードブロックとして取り込まれる。

例) `@import "./images/mpe-create-toc.png"`
@import "./images/mpe-create-toc.png"

例) `@import "./csvs/sample.csv"`
@import "./csvs/sample.csv"

## drawio図形の挿入

drawioファイルは mpe では直接取り込む事ができないが、【drawio.png】 は画像として取り込む事ができる。
手順書の冒頭には概要図を描く事が多いので大変重宝する。

1. [Draw.io Integration](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio)をインストール
2. 拡張子 .dio ファイルを作成する(例：test.dio)
3. VSCode で開くとdrawioの図形エディタが表示される
@import "./images/drawio-editor.png"
4. drawio.png に変換する
@import "./images/drawio-convert.png"
@import "./images/drawio-draio-png.png"
5. 他画像と同様に、import する。
@import "./draws/sample.drawio.png"

## 設定ファイルの挿入

sh や js ファイル等一部のファイルは import した際にコードとして認識してしまい内容が表示されない。
import 時に、コードブロックであることを明記および行番号の表示有無も指定して挿入する。

例)`@import "./scripts/sample.sh" {code_block=true class="line-numbers"}`
@import "./scripts/sample.sh" {code_block=true class="line-numbers"}

例)`@import "./configs/sample.yaml" {code_block=true class="line-numbers"}`
@import "./configs/sample.yaml" {code_block=true class="line-numbers"}

## PlantUML図形の挿入

他ファイル同様、import 文で挿入可能であるが、`puml`で始まるコードブロックを記述することで直接記述も可能。

'''puml
actor sample
participant A as "要素A"
participant B as "要素B"

sample -> A : コメント1
A -> B : コメント2
A <-- B : 戻り値1
sample <-- A : 戻り値1
'''

## Markdownの挿入

他ファイル同様、import 文で挿入可能。そのまま文章として展開される。

例) `@import "./_environment.md"`
@import "./_environment.md"

例) `@import "./_environment.md" {code_block=true}`
@import "./_environment.md" {code_block=true}

html {
    -webkit-print-color-adjust: exact;
}

choco install graphviz