Markdownの入力環境を作りたい

もはやブログ等の入力フォーマットの標準になりつつMarkdown。
そのMarkdownの執筆環境を整えます。

Visual Stdudio Code とは

主に開発用に使用する高機能テキストエディタです。
開発者の方にはもうお馴染みのツールですね。

なぜ開発用のツールを使うの？

無料である

無料で使える。これは大きい。

開発もできる

フロントエンドエンジニアなら知ってて当然とも言えるツール。
これさえあればなんとかなるのはとても大きい。

WinでもMacでも使える。Linuxでも使える

仕事はWindows、個人はMacみたいな場合でもOK。
同じ設定にすればほぼ同じ環境になる。

日本語が使える

割と日本語が使えるツールが少ない。
特にMac用のソフトはどうも日本語をONにするとクラッシュしたりと使い勝手が多いものが多かった。

早速使ってみる

Visual Studio codeをインストール

下記からダウンロードしましょう。

Macの場合にはbrew tapでもインストールできます。

$ brew tap install visual-studio-code

起動する

起動すると、自動で日本語などのインストールするか聞かれますので、
従ってインストールを進めましょう。

拡張機能のインストール

Macの場合のみ

MacでVisual Studio Codeを使っていると、たまーに変な文字が入ることがあるので対応。

探したら対策があったので参考にインストールを進めます。
https://dev.classmethod.jp/etc/vscode-mac-control-character-0x08/

Remove backspace control character のインストール

下のリンクをひらけばインストールできます。
https://marketplace.visualstudio.com/items?itemName=satokaz.vscode-bs-ctrlchar-remover

Whitespace+をインストール

同様に、下記のリンクから拡張機能をインストールします。
https://marketplace.visualstudio.com/items?itemName=davidhouchin.whitespace-plus

設定

インストール後、「cmd + Shift + p(Mac)」 or 「Ctrl + Shift + p(Windows)」を押すと、
コマンドパレットが開きますので、下記のように入力すると設定画面が開きます。

Whitespace+ config

各自設定を変更していきます。

autostart : "true"
→自動起動をON

name:"space"/"tab"/"newline"の下のenableを"false"に
→空白、タブ、改行の強調表示をOFFに。

Macで発生する特殊文字を強調表示

Macのみ、下記のjsonを追加

{
        "name": "control",
        "enabled": true,
        "pattern": "[\\cA-\\cH\\cK-\\cL\\cN-\\cZ\\u001B-\\u001F\\u007F]+",
        "style": {
            "borderWidth": "5px",
            "borderRadius": "0px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(58, 70, 101, 0.3)",
                "borderColor": "rgba(58, 70, 101, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(255, 0, 0, 0.9)",
                "borderColor": "rgba(117, 141, 203, 0.4)"
            }
        }
    }

ちょっとした校正機能を入れてみる

[「という」と「こと」を減らすだけで、文章はぐっと読みやすくなる]
(https://dev.classmethod.jp/etc/vscode-notice-toiu-and-koto/)ということなので、設定してみる

{
    "name": "blog",
    "enabled": true,
    "pattern": "(という|こと)",
    "style": {
        "borderWidth": "2px",
        "borderRadius": "2px",
        "borderStyle": "solid",
        "light": {
            "backgroundColor": "rgba(255, 140, 0, 0.9)",
            "borderColor": "rgba(255, 165, 0, 0.3)"
        },
        "dark": {
            "backgroundColor": "rgba(255, 140, 0, 0.9)",
            "borderColor": "rgba(255, 165, 0, 0.3)"
        }
    }
}

完成形

バージョンによって変わる可能性があるので注意してください。

config.json

{
    "mode": "all",
    "autoStart": true,
    "refreshRate": 100,
    "elements":
    [{
        "name": "space",
        "enabled": false,
        "pattern": "\\s",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(58, 70, 101, 0.3)",
                "borderColor": "rgba(58, 70, 101, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(117, 141, 203, 0.3)",
                "borderColor": "rgba(117, 141, 203, 0.4)"
            }
        }
    },{
        "name": "tab",
        "enabled": false,
        "pattern": "\\t",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(170, 53, 53, 0.3)",
                "borderColor": "rgba(170, 53, 53, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(223, 97, 97, 0.3)",
                "borderColor": "rgba(223, 97, 97, 0.4)"
            }
        }
    },{
        "name": "newline",
        "enabled": false,
        "pattern": "\\n",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "borderColor": "rgba(38, 150, 38, 0.3)"
            },
            "dark": {
                "borderColor": "rgba(85, 215, 85, 0.4)"
            }
        }
    },{
        "name": "trailing",
        "enabled": "unlessCursorAtEndOfPattern",
        "pattern": "[^\\S\\r\\n]+$",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(58, 70, 101, 0.3)",
                "borderColor": "rgba(58, 70, 101, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(117, 141, 203, 0.3)",
                "borderColor": "rgba(117, 141, 203, 0.4)"
            }
        }
    }, {
        "name": "control",
        "enabled": true,
        "pattern": "[\\cA-\\cH\\cK-\\cL\\cN-\\cZ\\u001B-\\u001F\\u007F]+",
        "style": {
            "borderWidth": "5px",
            "borderRadius": "0px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(58, 70, 101, 0.3)",
                "borderColor": "rgba(58, 70, 101, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(255, 0, 0, 0.9)",
                "borderColor": "rgba(117, 141, 203, 0.4)"
            }
        }
    }, {
        "name": "blog",
        "enabled": true,
        "pattern": "(という|こと)",
        "style": {
            "borderWidth": "2px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(255, 140, 0, 0.9)",
                "borderColor": "rgba(255, 165, 0, 0.3)"
            },
            "dark": {
                "backgroundColor": "rgba(255, 140, 0, 0.9)",
                "borderColor": "rgba(255, 165, 0, 0.3)"
            }
        }
    }]
}

これで完成。
config.jsonを弄るともっと色々とできますので、自分だけの執筆環境を整えてみてください。

日本語用の校正ツールをインストール

日本語の校正をしてくれるらしい拡張機能も一緒にインストール。
https://marketplace.visualstudio.com/items?itemName=ICS.japanese-proofreading