Crayon Syntax Highlighterの使い方ーWordPressプラグイン【初心者向け】

WordPressの記事内でソースコードを表示させるとき、コピー&ペーストした際にエラーが出ることなどもあります。ここではWordPressでコードを表記する際に便利なプラグインCrayon Syntax Highlighterの使い方について解説していきます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

WordPressの記事内でソースコードを表示させるとき、

ビジュアルエディタでそのまま入力すると記事として公開されたコードが見にくかったり、コピー&ペーストした際にエラーが出ることなどもあります。

ここではWordPressでコードを表記する際に便利なプラグインCrayon Syntax Highlighterの使い方について解説していきます。

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

大石ゆかり

田島メンター!!HTMLの参考サイトを見ていたんですけど、ソースコードがきれいに表示されているのってどうやってるんですか?

田島悠介

あぁ、それならプラグインを使うとできるよ。いくつかあるけど、「Crayon Syntax Highlighter」がいいかなぁ。

大石ゆかり

使い方、教えてください!

 

Crayon Syntax Highlighterとは

このプラグインは、技術ブログなどソースコードを載せているサイトを運営している人に重宝しそうです。

エディタなどで表示されているソースコードと同じようにWordPressの記事に表示させることができるのです。

とても見やすくなりますので、ぜひ活用してみてください。

以下では、その使い方を紹介しています。

 

記事内にソースコードを挿入する

Crayon Syntax Highlighterは記事作成時にそのままエディタから使用することができます。

また、メニューが最初から日本語化されています。

「プラグイン」「新規追加」からインストール・有効化した後、WordPressの管理画面から「投稿」「新規追加」を選択します。

csh_p_1

 

記事作成のエディタが「ビジュアル」になっている場合は「テキスト」タブをクリックします。

csh_p_2

 

メニューボタンから「crayon」をクリックします。

csh_p_3

 

Crayon Syntax Highlighterのメニュー画面が表示されます。

タイトル:コードの内容について任意でタイトルを付けることができます。
プログラム言語:表示させるコードの種類を選択します。DefaultのままでもOKです。
コード:表示したいソースコードを入力します。
テーマ:記事内に挿入された際の表示デザインを複数の中から選ぶことができます。

csh_p_4

 

他にもフォントの種類やサイズ、ツールバーの表示形式なども詳細設定することが可能です。

csh_p_5

 

各項目を入力したら右上の「挿入」をクリックします。

csh_p_6

 

これで記事内にCrayon Syntax Highlighterを使用したソースコードが追加されました。
エディタを「ビジュアル」に戻すとこのように表示されます。

csh_p_7

 

記事を公開すると設定に沿ってコードが表示されます。

csh_p_10

 

[PR] WordPressで挫折しない学習方法を動画で公開中

一度挿入したソースコードを編集する方法

ビジュアルエディタから該当のソースコードの部分をクリックし、このメニューボタンをクリックします。
(このボタンはビジュアルエディタからコードを新規追加する時にも使えます)

csh_p_8

 

Crayon Syntax Highlighterの編集画面が表示されます。
訂正が終わったら「更新」ボタンを押します。

csh_p_9

 

記事からコードをコピー&ペーストする

記事内でCrayon Syntax Highlighterを使用したコードが表記されている場合、閲覧者は簡単にコードをコピペすることが可能です。
ソースコード上にマウスを合わせると、上にメニューバーが表示されます。次にこのCopyボタンを押します。

csh_p_11

 

そのbox内のコードが全選択されました。
Ctrl+cでコピー・Ctrl+vでペーストすることができます。(Macの場合はcommand+cでコピー・command+vでペーストになります)

 

csh_p_12

 

以上で解説は終わりです。

ぜひ、WordPressの使い方を覚えましょう!
 

大石ゆかり

色々なプログラミング言語に対応しているんですね♪

田島悠介

そうだね。テックブログなんかはじめるんだったら必須のプラグインだね♪

大石ゆかり

そうですね♪

 

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。