WordPressでソースコードを記事に載せよう

スポンサーリンク

目次

ゴール


WordPressのプラグインであるCrayon Syntax Highlighterを使って下の画像のように記事内にソースコードを生成することを目指します。

必要なもの

必要なもの 価格(円)
1 PC ピンキリ
備考 インターネット接続可能なこと
2 WordPressのアカウント 無料
備考 持っていない場合は、こちらを参照→WordPressのインストール方法
3 Crayon Syntax Highlighter 無料
備考 直接プラグインをダウンロードする場合はこちらのサイトから→Crayon Syntax Highlighter

Crayon Syntax Highlighter

Crayon Syntax Highlighterのインストール


Table of Contents Plusのインストール方法をまとめます。
WordPressにログインし、左側のメニューでプラグインを選択します。
下の画像の様にプラグインの画面で”新規追加”ボタンをクリックします。

するとプラグインを追加する画面が表示されるので、右上にある検索フォームにCrayon Syntax Highlighterと入力します。
検索結果で下の画像の様に表示されたCrayon Syntax Highlighterをインストールします。

Crayon Syntax Highlighterの使用方法


Crayon Syntax Highlighterがインストールが完了すると、自動で記事画面に”crayon”ボタンが出来上がり、特に設定はなくてもそのまま使用できるようになります。

“crayon”ボタンをクリックすると、ソースコード記入フォームが表示されます。
・ソースコード名
・言語の種類
・ソースコードの入力
を行います。
設定はフォントや文字サイズなどを指定できるようですが、デフォルトのままで問題ないと思います。

“add”ボタンをクリックすれば、あとは自動でソースコードのリンクが生成されます。

以上!

スポンサーリンク

フォローする

スポンサーリンク