


コードブロックを表すMarkdownをコードブロックの中に表示する方法

【WordPress】SyntaxHighlighterをCSSでお好みにカスタマイズ

WordPressでブログを書いているとサイトのデザインをいじりたくなってきますよね。管理画面からの編集でももちろん十分なのですが、使い慣れたエディタで編集できたほうが生産性アップ!まちがいなしです。
そこで今回は、エックスサーバー上のファイルをVisual Studio CodeからSSH接続で編集する方法をご紹介します。もちろん、CSSファイルだけでなくサーバ上のJSファイルなども編集できるようになりますよ。
Visual Studio Codeの「Remote VSCode」という拡張機能をインストールします。
cmd+p
ext install remote-vscode
Code > 基本設定 > 設定 のユーザー設定に下記のコードを記述します。
//-------- Remote VSCode configuration --------
// Port number to use for connection.
"remote.port": 52698,
// Launch the server on start up.
"remote.onstartup": true
サーバへのSSH接続の際にポート転送を行います。
ssh -R 52698:localhost:52698 user@example.org
あるいは、configファイルに設定を記述しておくと楽です。
vi ~/.ssh/config
Host yourXserverName
HostName xxx.xsrv.jp
Port 10022
User root
IdentityFile ~/.ssh/id_rsa
ForwardAgent yes
RemoteForward 52698 localhost:52698
エックスサーバーにSSH接続を行い、rmateをインストールします。
ssh yourXserverName
mkdir ~/bin
wget -O ~/bin/rcode https://raw.github.com/aurora/rmate/master/rmate
chmod a+x ~/bin/rcode
サーバ上で次のコマンドを打つとVisual Studio Codeが立ち上がり、リモートファイルを編集できます。
rcode remote_file_name.css
以上、エックスサーバー上のリモートファイルをVisual Studio Codeで編集する方法のご紹介でした。みなさんもぜひ試してみてください。
今回の記事では下記のサイトを参考にさせていただきました。
Remote editing files over SSH with Visual Studio Code
aurora/rmate: Remote TextMate 2 implemented as shell script