Zenn
Open12

VSCode で markdown

VS Code
Markdown
opparaoppara

見出し (table of contents) の作成

Markdown All in One の Table of contents を使う。

サンプル
sample.md
# タイトル

## セクション 1

### セクション 1-1

### セクション 1-2

#### セクション 1-2-1

## セクション 2

### セクション 2-1

## セクション 3

作成方法

見出しを作成した箇所で、コマンドパレットから Markdown All in One: Create Table of Contents を実行する。

実行結果
# タイトル

- [タイトル](#タイトル)
  - [セクション 1](#セクション-1)
    - [セクション 1-1](#セクション-1-1)
    - [セクション 1-2](#セクション-1-2)
      - [セクション 1-2-1](#セクション-1-2-1)
  - [セクション 2](#セクション-2)
    - [セクション 2-1](#セクション-2-1)
  - [セクション 3](#セクション-3)
  
## セクション 1

### セクション 1-1

### セクション 1-2

#### セクション 1-2-1

## セクション 2

### セクション 2-1

## セクション 3
opparaoppara

目次にする範囲を制限

settings.json
{
  "markdown.extension.toc.levels": "2..4"
}
実行結果
# タイトル

- [セクション 1](#セクション-1)
  - [セクション 1-1](#セクション-1-1)
  - [セクション 1-2](#セクション-1-2)
    - [セクション 1-2-1](#セクション-1-2-1)
- [セクション 2](#セクション-2)
  - [セクション 2-1](#セクション-2-1)
- [セクション 3](#セクション-3)

## セクション 1

### セクション 1-1

### セクション 1-2

#### セクション 1-2-1

## セクション 2

### セクション 2-1

## セクション 3
opparaoppara

セクション番号の追加/削除

コマンドパレットから Markdown All in One: Add/Update section numbers

実行結果
# タイトル
- [セクション 1](#セクション-1)
  - [セクション 1-1](#セクション-1-1)
  - [セクション 1-2](#セクション-1-2)
    - [セクション 1-2-1](#セクション-1-2-1)
- [セクション 2](#セクション-2)
  - [セクション 2-1](#セクション-2-1)
- [セクション 3](#セクション-3)

## 1. セクション 1

### 1.1. セクション 1-1

### 1.2. セクション 1-2

#### 1.2.1. セクション 1-2-1

## 2. セクション 2

### 2.1. セクション 2-1

## 3. セクション 3
opparaoppara

改行コードで改行判定させる

settings.json
{
  "markdown-preview-enhanced.breakOnSingleNewLine": true,
}
opparaoppara

PlantUML を使う

VSCodeの拡張機能のインストール

PlantUML まわりの設定

java 等諸々のインストールが面倒なので Docker で plantuml-server を動かす

docker-compose.yaml
version: "3"
services:
  plantuml-server:
    image: plantuml/plantuml-server
    container_name: plantuml-local-server
    ports:
      - "9876:8080"

コンテナを立ち上げる

docker compose up -d

VSCode の設定

settings.json
{
"markdown-preview-enhanced.plantumlServer": "http://localhost:9876/svg/",
"plantuml.server": "http://localhost:9876",
"plantuml.render": "PlantUMLServer"
}
opparaoppara

PDF の書き出し

Markdown Preview Enhanced の画面を右クリックして、Chrome(Puppeteer) -> PDF を選択

opparaoppara

「\」は「」に読み替える

\```plantuml
@startuml
skinparam classAttributeIconSize 0

title サンプルクラス

class Encoder{
    + translate()
}
Interface Reader
Reader <|-- CsvReader
Encoder .> Reader
@enduml
\```

opparaoppara

フォーマッター

markdownlint

settings.json
    "[markdown]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
    },

設定

.markdownlint-cli2.jsonc
{
    "config": {
        // MD013  行の長さ
        "line-length": false,
        // MD010 Markdown中にTSVを書くとエラーになるため
        "no-hard-tabs": false,
        // MD026 ヘディングに句読点（.,;:!?）を許容したい
        "no-trailing-punctuation": false,
        // MD033 HTMLは許容
        "no-inline-html": false,
        // MD034 URLのリンク化条件
        "no-bare-urls": false,
        // MD037  $$など数式で問題になったため外す
        "no-space-in-emphasis":false,
        // MD051 相対パス設定
        "link-fragments":false
    },
    "ignore": [
        ".git",
        "node_modules"
    ]
}
opparaoppara
  • 見出しを作成する
  • PlantUML を使う
  • 保存時にフォーマットする
  • PDF、もしくは HTML で書き出す
  • 書き出し時のヘッダー、フッターを調整する
opparaoppara

CLI で実行
shd101wyy/crossnote: Powerful markdown tool

npm install --save crossnote
md2pdf.js
#!/usr/bin/env node
// CJS
const { Notebook } = require('crossnote');

async function main() {
  const notebook = await Notebook.init({
    notebookPath: __dirname,
    config: {
      previewTheme: 'github-light.css',
      codeBlockTheme: 'auto.css',
      plantumlServer: 'http://localhost:9876/svg/',
      printBackground: true,
      enableScriptExecution: true,
    },
  });

  // Get the markdown engine for a specific note file in your notebook.
  const file = process.argv[2];
  const engine = notebook.getNoteMarkdownEngine(file);

  // // open in browser
  // await engine.openInBrowser({ runAllCodeChunks: true });

  // html export
  // await engine.htmlExport({ offline: false, runAllCodeChunks: true });

  // chrome (puppeteer) export
  await engine.chromeExport({ fileType: 'pdf', runAllCodeChunks: true, openFileAfterGeneration: true });

  return process.exit();
}

main();