【作業効率化】WordPressでキレイにソースコードを表示する

コード表示のプラグイン「Crayon Syntax Highlighter」

技術系のブログ等を書いている人におすすめのプラグイン、
「Crayon Syntax Highlighter」の導入と記事への追加方法をお伝えします。

この記事は以下の人向けに書いています。

本プラグインで表示した結果

「Crayon Syntax Highlighter」を使うことで
次のような表示をさせることが可能です。

プログラムを書いていて、ネットで情報を集めている人にとっては
見たことがある人が多いのではないでしょうか。
実はとても簡単にこのようなコードを挿入することができます。

導入手順

では実際に導入していきましょう。
①まずはWordpressのダッシュボードから[プラグイン]を選択し、
[新規追加]ボタンを押します。

②検索の入力欄に「Crayon Syntax Highlighter」を入力

③すると以下のプラグインが出てきますので
[今すぐインストール]を押します。

④インストールが完了したら、そのまま[有効化]を押しましょう。
これで導入は完了です！！

⑤では実際に使用してみます。
まず記事の編集画面(ビジュアルエディター)に移動し以下の
[<>]ボタンを押します。

⑥以下の画面が表示されますので、
[Title]にはその名の通りタイトル(ファイル名等)を
そして[Code]部分に表示させたいコードを入力し、
右上の[Add]ボタンで記事に追加することができます。

↓実際に記事に埋め込んだコードです。

まとめ

どうだったでしょうか。
とても簡単に記事に挿入できましたね。
Wordpressでいくつか記事を書いたことがある人にとっては
数分で導入から記事への埋め込みができるのではないかと思います。

今回はとにかく記事内にコードを載せる！ということで紹介しましたが、
見た目をブログに合わせ変更したり、サイズを変更したりと
紹介した部分以外にもできることがありますので
別途ご紹介していきたいと思います。