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)"
}
}
}
完成形
バージョンによって変わる可能性があるので注意してください。
{
"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