WordPressの投稿内で、プログラムのコードを色付きで見やすくするプラグイン【Crayon Syntax Highlighter】

WordPressで、投稿にプログラムのコードを埋め込む際に、見た目をきれいにしたいと思ったことはありませんか?

今回は、「Crayon Syntax Highlighter」というプラグインを使ってコードの見た目をきれいにする方法を説明します。

Crayon Syntax Highlighter

このプラグインは、技術ブログなどソースコードを載せる場合に役に立ちます。
エディタなどで表示されているソースコードと同じように、WordPressの記事内にあるソースコードをシンタックスハイライトできます。
それでは、インストールと使い方を説明します。

プラグインのインストール

「Crayon Syntax Highlighter」のインストール方法について説明します。

  1. 「プラグイン」→「新規追加」から「crayon syntax hightlighter」をインストールします。
    「crayon syntax hightlighter」をインストールします。

  2. プラグインを有効化します。
    プラグインを有効化します。

コードの挿入方法

今回は例として、JavaScriptのHello Worldを例として説明します。

  1. 投稿ページでテキスト編集モードを選択します。
    投稿ページでテキスト編集モードになります。

  2. [crayon]をクリックします。
    [crayon]をクリックします。

  3. 表示されたメニュー画面でタイトルとコードを入力したら、右上の「add」をクリックします。タイトルとコードを入力し、右上の「add」をクリックします。

  4. テキストには以下のように入力されました。
    テキストには以下のように入力されました。

  5. プレビューをみると、シンタックスハイライトされていることがわかります。
    プレビュー

一度挿入したコードの更新方法

コードを更新する方法について説明します。

  1. 投稿ページでビジュアル編集モードを選択します。
    投稿ページでビジュアル編集モードを選択します。

  2. 編集対象のコードを選択して、「<>」をクリックします。
    編集対象のコードを選択して、「<>」をクリックします。

  3. コードを編集して、右上の「Save」をクリックします。
    コードを編集して、右上の「Save」をクリックします。

  4. コードが更新されました。
    プレビューを確認します。

まとめ

以上、ソースコードを見やすくするCrayon Syntax Highlighterの導入と使い方を説明しました。
コードをよく使う人は、ぜひ活用してください。