こんにちは！ あますた(@amaguristar)です。

先日色々とあって意気消沈。「そろそろ自分もエディタを使う時がきたのか？」と思い色々と調べる事にしました。とは言え、課金するのはまだ早い。「無料で使えるエディタってなんだ？」と調べたら「VS Code」で対応できそう。これ幸いと早速設定開始です。

標準機能で行けそう

色々と調べた結果。無料で使うなら「Visual Studio Code(以下、VSCode)」が良さそう。VSCodeは「Microsoft社」が作ったエディタで基本無料。様々な拡張機能があり、開発環境を整えるのも楽そう。

だいぶ昔にVC++を使用して開発していた自分。その後はMacになってからしばらくMicrosoftとはさよならしてましたが、再び巡り合いました。これもまた運命か？

とは言え、「VSCode」自体はPHPの編集作業に使用していた自分。色々と調べていると「Markdown」方式を標準装備してる様子。これ幸いと記事をカタカタ打ち始めました。

標準機能でもある程度問題無いのですが、「せっかくならできる限り自分のサイトに表示を近づけたい！」って事で「css」をカタカタ設定。「完全に同じ」とまでは流石に行きませんが、「なんとなく雰囲気は掴めるかな？」ぐらいにはなったと思います。

現状書いてるこのメモも、VSCodeのプレビューを見ながら書きました。割と本物に近いのでイメージが湧きやすいです。

設定の仕方

VSCodeのインストールの仕方は今回は割愛。すでにインストールされてる事を前提に説明します。

主にやることは下記のみ。

• WordPress用のワークスペース作成
• cssの設定

基本はこの２つ。特段プラグインをインストールなしで簡単に設定できます。

ワークスペースの作成

適当な場所に「WordPressの記事用のフォルダ」を作成。今回はとりあえず「ダウンロードフォルダ」に「Blog」という名前で作成。その後VSCodeの「ファイル」→「フォルダーをワークスペースに追加」を選択。

追加をしたら、「ファイル」→「名前を付けてワークスペースを保存」を選択。

今回は「test」という名前で作成しました。「test」後の「.code-workspace」という物はデフォルトで作成されます。“VSCodeのワークスペースファイルですよ”という意味なので消さない様にしましょう。

これでワークスペースの設定は完了です。今回は分かりやすさ優先の説明のため上記の方法を取りました。

cssの設定

ワークスペースを作成するのに使用した「Blog」フォルダ内に「css」ファイルを作成。今回は仮に「test.css」というファイル名で作成。内容は実際に使用している「WordPress」にログイン後、「外観」→「テーマエディター」→「テーマの編集」画面で「スタイルシート(style.css)」の内容を全コピ。こうすることでほぼ同じ見た目になります。

cssを対応させる

せっかく作った「css」ファイルも設定しないと反映されません。反映させる為には、先ほど作成した「ワークスペースファイル」の「test.code-workspace」ファイルを編集。ファイルを開くと、初期状態ではおそらく下記の様になっているはず。

{
	"folders": [
		{
			"path": "."
		}
	]
}

このファイルを下記の様に編集。

{
	"folders": [
		{
			"path": "."
		}
	],
	"settings": {
		"markdown.styles":[
			"test.css",
		],
	}
}

「“test.css”」の部分は作成した「cssファイル名」を入力。もし複数ファイルを指定したい場合は、

{
	"folders": [
		{
			"path": "."
		}
	],
	"settings": {
		"markdown.styles":[
			"test.css",
            "~~~~.css",
            "---.css"
		],
	}
}

という様に「,(カンマ)」区切りで追加可能。「markdown.styles」と書いてある様にマークダウン形式で書くことを想定している様ですが、タグの直打ちでも特に問題無いです。たったこれだけの設定で記事を書きながらリアルタイムに表示を確認できるので、いちいちプレビューを開く必要がなくスラスラかけるので嬉しい限り。

作成したワークスペースフォルダ内に記事用の拡張子「.md」のファイルに記事を書いていけば問題無し。自分は「article」というフォルダを作成してその中に記事をまとめて書いてます。

具体的な表示方法やWordPressへの貼り方は別のメモにて紹介します。