WordPress | コマンドやコードをかっこよくブログに表示させたい！

こんにちは、tapunです。

まだまだブログの書き方に関して模索中です。

Raspberry Piに限らず技術ブログを書いている方は、コードやコマンドをブログに記載することが多いと思います。

これまで、何も考えずに普通にコピペしていましたが、普通のテキスト形式で書いても分かりにくいし、かっこ悪いなぁ～と思いませんか？

他の人のブログを見ると、凄く見やすく表示されていて、「どうやってやってるんだ・・・」と調べたので、備忘録がてらメモします。

---

プラグインを使いましょう

いくつか方法がありそうでしたが、せっかくWordPressを使っているので、プラグインを使いましょう！

今回私は「Enlighter WordPress Plugin」をインストールしました！

例として、Raspberry Piの無線lan設定箇所の説明をします～

＜使用前＞

$ sudo vi /etc/wpa_supplicant/wpa_supplicant.conf

ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
network={
  ssid="YOUT_SSID"
  proto=WPA2
  key_mgmt=WPA-PSK
  psk="YOUR_PASSWORD"
}

＜使用後＞

$ sudo vi /etc/wpa_supplicant/wpa_supplicant.conf

ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
network={
  ssid="YOUT_SSID"
  proto=WPA2
  key_mgmt=WPA-PSK
  psk="YOUR_PASSWORD"
}

 

どうですか？使用後のほうが見やすいですよね？？

---

Enlighter WordPress Pluginのインストールと設定と使い方

1. WordPress管理画面からプラグインの新規インストール画面に移り、「Enlighter WordPress Plugin」で検索します。

2. プラグインをインストールします。
3. 管理画面の[設定]-[Enlighter]に移ります。
4. デフォルトの言語とテーマを設定し、保存します。
   私は {デフォルト言語：Generic Highlighting、テーマ：Atomic} を選択しています。
   ※テーマはこちらのリンクでデモを見ることができます。
5. 記事の投稿画面に移り、ビジュアルエディタを開きます。
   編集ツールボタンに、このマークが追加されていますので、クリックします。
   
   
6. するとポップアップが出てくるので、そこにコードを書きます。
   
   
7. そうするとこんな感じでコードが挿入できます。

   ここにコードを書きます。
   ２行目
   ３行目
   /* ここはコメントのテスト */
   

---

まとめ

ブログ記事にコードやコマンドをかっこよく挿入するためには、プラグインを使うことで簡単にできることがわかりました！

これまでの記事も、書き直したいと思います～