WordPressで記事にソースコードを表示できるプラグインCrayon Syntax Highlighter

プラグイン「Crayon Syntax Highlighter」(以下Crayon)を使うと、ソースコードを簡単にWordPressに埋め込むことができます。

Crayonのポイント

  • 初心者でも簡単にソースコードを表示できる
  • サイトに合わせて色やフォントを変更できる
  • 読者にとって見やすく、直感的にコピペしやすい

エンジニアやウェブデザイナー向けにソースコードを紹介しているブログでもよく見かけます。

たとえば上の画像のように、ソースコードを紹介する時に便利です。

注意点

数年前に開発が止まってしまっていることもあり、テーマや既に使用しているプラグインによっては、うまく作動しないことがあります。

それほどコードを埋め込む機会がなければ、プラグインなしで表示することもできます。詳しくはこちらの記事で紹介しています。

WordPressの投稿記事で、ちょっとしたソースコードを表示したいときに使えるHTMLタグ<...

Crayonの使い方

ダウンロード&有効化

プラグインの詳しいダウンロード方法はこちら>>

プラグインをインストールすることで、WordPressを自分好みにカスタマイズできます。 アク...

投稿画面でコードを書く

記事投稿画面を開きます。

ビジュアルエディタの場合

<>ボタンをクリックします。

テキストエディタの場合

「Crayon」というボタンをクリックします。

新規ウィンドウ「Edit Code」でコードを入力

Edit Codeというウィンドウが開きます。
タイトル、コードを入力したら、「Save」で保存

保存すると、一旦ビジュアルエディタにはこのように表示されます。

「プレビュー」で実際の見た目を確認します

実際の記事ではこのように表示されます。

Crayonの表示・機能の設定を変更する

Crayonはデフォルトのままでも使えますが、設定を変更するには、管理画面にログインします。

「設定」→「Crayon」を選択


このような画面が表示されます。表示や機能の設定、変更ができます。


★英語で表示されるので、見にくければ右クリック→「日本語に翻訳」を選択。

ソースコードのテーマを変える

Theme(テーマ)から好きなテーマをプレビューしながら選べ、自分のサイトに合ったテーマに変更できます。

ソースコードのフォント、行の高さを変える

Font(フォント)から設定します。

フォントの下にも多くの設定項目があります。

  • ソースコードの高さ、幅などを変更する
  • 重要な箇所をマークアップする
  • 行の縞模様を除く…など

設定が終わったら

それぞれ設定が終わったら「Save Changes(変更内容を保存)」で設定保存を忘れずに!

読者が使いやすい各ボタンの機能

記事に埋め込んだソースコードの上の線にカーソルを合わせると、タイトルと各ボタンが表示されます。

各ボタンの機能について

①Toggle Line Numbers

行数の表示/ 非表示を切り替える。

②Toggle Plain Code

プレーンなコード表示/ 通常のコード表示を切り替える。

【プレーンなコード】

【通常のコード】

③Toggle Line Wrap

1行が長いコードを、そのまま表示/ 折り返し表示に切り替える。

④Copy(便利!)

Ctrl+Cでコピーし、Ctrl+Vで貼り付ける。

読者がすぐにコピーして使えるので、このボタンはとても便利ですね!

⑤Open Code in New Window

コードを新規ウィンドウで見る