WordPressブログのソースコード埋め込みは「Crayon」が便利です

プログラムを書いたからブログで共有してみたいけど、ソースコードってどうやって埋め込むんだろう? どうやればエンジニアブロガーみたいにカッコよく表示できるの?

今回はエンジニア&ブロガー向けに、WordPressブログにソースコードをクールに埋め込む方法を共有しますね。

結論から言うと、「Crayon Syntax Highlighter」ってプラグインを使うと良いです。

いろんな方法を試してきたのですが、この方法が一番クールかと。技術的な内容になので、サクサク行きます。

スポンサーリンク

Crayon Syntax Highlighterを使ってみよう!

Crayon Syntax Highlighterを実際に使った様子がこちらです。

うーん、かっちょいい!

Crayon Syntax Highlighterの設定方法

まずは管理画面「プラグイン」→「新規追加」で、「Crayon Syntax Highlighter」をインストール&有効化します。

スクリーンショット 2018 09 02 14 03 07

続きまして、管理画面「設定」→「Crayon」に進みまして、少しだけ設定を変更します。

オリジナルのままでも使えるんですが、一部オススメの設定方法を共有しますね。

 

▼テーマは「Twilight」に、フォントは「Monaco」を使ってます。ブログデザインにもマッチしやすく、目に優しい色合いなのでオススメです。

スクリーンショット 2018 09 02 14 10 07

▼ソースコードが知りたい人にとって、デフォルトのツールバーは必要ないので、非常時設定にしておくといいです。

スクリーンショット 2018 09 02 14 09 39

▼また、「その他」欄の「必要な時だけ〜」にはチェックを入れるといいです。記事の読み込みに悪影響を与えにくいです。

スクリーンショット 2018 09 02 14 09 39

Crayon Syntax Highlighterの日本化

英語があまり得意ではない人は、インストール後に、プラグインの日本語化をあらかじめやっておくと良いですね。

FTPで「wp-content/languages/pluguin/」にアクセスしまして、こちら2つのファイルを除去すればOKです。

  • crayon-syntax-highlighter-ja.mo
  • crayon-syntax-highlighter-ja.po

Crayon Syntax Highlighterの使い方

設定が終わりましたら、実際に使ってみましょう。

記事の新規作成ページに行きますと、エディターに「< >」のアイコンがあります。こちらをクリックです。

スクリーンショット 2018 09 02 14 21 15

すると、コードを入力するポップアップが開くので、①埋め込みたいコードをコピペして、②「挿入」に進みます。

そのほかの設定は、特に変更の必要はありません。

スクリーンショット 2018 09 02 14 23 13

ここまでやれば、ソースコードがかっちょ良い感じで埋め込めますね!

スクリーンショット 2018 09 02 14 25 57

おまけ①:プラグインなしでソースコードを埋め込む

プラグインを使わずとも、<pre></pre>タグを使って、ソースコードを埋め込むこともできます。

スクリーンショット 2018 09 02 14 28 41

スポンサーリンク

おまけ②:Githubを使って、ソースコードを埋め込む

Githubを使って、自作コードをシェアすることもできます。

便利なんですが、個人的にはCrayon使った方がクールで好きです。

WEBエンジニアはコードをどんどんシェアしよう!

実体験として、自分の書いたコードやブログのカスタマイズをシェアしていると、そこから仕事もらえることもあります。

コードをシェアしたところで、ブログのどこに、どうやってコードを入れれば良いかわからない人はいるんです。なにより面倒臭い。

 

仕事につながることも多いので、自作のコードはどんどんシェアするといいですよ。

僕もブログカスタマイズやWordPressの活用ノウハウを記事で書いていきますね。

 

▼WordPressサイトのカスタマイズの方法を他にも解説してます。

UdemyでWordPress制作を学べるおすすめコース4つ【全部買った】

2018.06.13

WordPress制作で月10万円稼ぐための最速勉強法【未経験から3ヶ月】

2018.05.30

ABOUT

海外ノマド系フリーランス, ブロガー, WEBエンジニア, 24歳。フットワーク軽く生きたくて、新卒でフリーに。その後、海外35カ国を旅しながらノマドワーク。現在は1ヶ月ごとに拠点を変えつつ、旅生活を継続中です。勉強が大好きで年に3回語学留学をします。 

>>詳しいプロフィールはこちら!