プラグイン「Crayon Syntax Highlighter」（以下Crayon）を使うと、ソースコードを簡単にWordPressに埋め込むことができます。
コンテンツ
Crayonのポイント
- 初心者でも簡単にソースコードを表示できる
- サイトに合わせて色やフォントを変更できる
- 読者にとって見やすく、直感的にコピペしやすい
エンジニアやウェブデザイナー向けにソースコードを紹介しているブログでもよく見かけます。
たとえば上の画像のように、ソースコードを紹介する時に便利です。
注意点
数年前に開発が止まってしまっていることもあり、テーマや既に使用しているプラグインによっては、うまく作動しないことがあります。
それほどコードを埋め込む機会がなければ、プラグインなしで表示することもできます。詳しくはこちらの記事で紹介しています。
http://pulpfingers-com.check-xserver.jp/486
Crayonの使い方
ダウンロード＆有効化
プラグインの詳しいダウンロード方法はこちら＞＞
http://pulpfingers-com.check-xserver.jp/273
投稿画面でコードを書く
記事投稿画面を開きます。
ビジュアルエディタの場合
<>ボタンをクリックします。
テキストエディタの場合
「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
コードを新規ウィンドウで見る
