モッピー!お金がたまるポイントサイト

WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示

2018/09/23

WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示

wordpressのカスタマイズでソースコードを表示させたい時、今までは「SyntaxHighlighter Evolved」使用していました。こちらのプラグインでも、ソースコードを綺麗に表示していてくれたのですが、とにかく表示が遅くて重い。表示する量が増えれば増える程遅くなって行くので解決策を探して色々ググってみました。その中で、日本のブロガーの方々で特にお勧めしている方が多かったのが「Crayon Syntax Highlighter」でした。

[adsense]

WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示

dmgadget(ディーエムガジェット)でも導入をしてしばらく経ちますが、過去の記事でまだ移行が終わっていない投稿も多いので、「SyntaxHighlighter Evolved」も「Crayon Syntax Highlighter」も両方インストールしたままですが、時間を見つけて早めに全部移行したいです。他にも「Crayon Syntax Highlighter」はこの様にコードを表示出来ます。殆どのソースコードに対応しているので問題なく使用して頂けると思います。

WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示

WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示

WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示

ブログにソースコードを綺麗に表示させる為に「Crayon Syntax Highlighter」を導入

カスタマイズ系ブログをやっている方以外では、ソースコードをブログに表示させる事は殆どないと思いますが、やってみたい方へ向けて導入備忘録として残したいと思います。早速インストールしてみましょう。

管理画面 → プラグイン → 新規追加 → 「Crayon Syntax Highlighter」と検索 → 「いますぐインストール」をクリックして、インストール後忘れず「有効化」をします。

[adsense]

WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示

「有効化」を行った後、管理画面から設定 → 「Crayon」に行くと詳細設定が表示されます。ちょっと前に日本語にも対応したので、日本語で表示されているはずです。一般設定では主にテーマの変更や表示されるフォントの種類が選択出来ます。

WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示

他にも沢山詳細設定があるのですが、dmgadget(ディーエムガジェット)ではソースコードにマウスを当てた場合、ツールバーをソースコードに被せない様に表示させるために、一般設定にある「ツールバー」設定欄の一番上「コードを押し下げるのではなく、コード上に重ねて表示」だけチェックボタンを外しています。

WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示

「Crayon Syntax Highlighter」を使って実際にコードを投稿してみましょう

エディタ内に「Crayon」と書かれたボタンが表示されるので、クリックしてコードを登録します。

WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示

「挿入画面」では「コードのタイトル」や「ソースコードの種類」そして「ソースコード」を入れて、右上の「挿入」ボタンを押せばエディターに挿入されます。自分は普段「タイトル」は入れてません。

WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示

[adsense]

完成

プレビューしてブログ上での表示を確認してみましょう。

WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示

いかがだったでしょうか?ソースコードを簡単に綺麗に表示させる事が出来ました。読んで頂いてありがとうございました。

この記事を書いた人

ディーエムガジェット 

非IT系エンジニア。日々の出来事や自分の好きな物などの紹介をメインに色々発信していきます。2012 年から禁煙を開始して68キロぐらいだった体重が2012年6月には75キロまで増加。ヤバい!と感じてダイエットを開始。一回65キロまで落としましたが、2018年8月現在また72キロまで増加。こんな身体でもトライアスロンに出場予定「プロフィールはこちら

このエントリーをはてなブックマークに追加

WORDPRESS

Posted by dmgadget