ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

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

      2015/02/16

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

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

スポンサーリンク

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」と検索 → 「いますぐインストール」をクリックして、インストール後忘れず「有効化」をします。

スポンサーリンク

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] ブログにソースコードを綺麗に表示

スポンサーリンク

完成

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

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

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

 - WORDPRESS

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

wordpress人気テーマSTINGER3の広告を2つ並べるカスタマイズ
WordPress[Stinger3] 広告を2つ並べるカスタマイズ
WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更
WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更
WordPress[Public Post Preview] 記事を限定公開する
WordPress[Public Post Preview] 記事を限定公開する
WordPress[Stinger3用 子テーマ]favicon(ファビコン)を変更する方法
WordPress[Stinger3用 子テーマ]favicon(ファビコン)を変更する方法
WordPress[Stinger3用 子テーマ] サイトマップ(目次)を設置する方法
WordPress[Stinger3用 子テーマ]サイトマップ(目次)を設置する方法
WordPress 蛍光ペン風テキスト装飾をCSSに設定
WordPress 蛍光ペン風テキスト装飾をCSSに設定
WordPress[Limit Login Attempts] ログイン試行回数を制限してブルートフォースアタックを防ぐ
WordPress[Limit Login Attempts] ログイン試行回数を制限してブルートフォースアタックを防ぐ
WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法
WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法
WordPress[Preserve Editor Scroll Position] エディターのスクロール位置を記憶
WordPress[Preserve Editor Scroll Position] エディターのスクロール位置を記憶
WordPress[Acunetix WP Security] テーブル接頭辞を簡単に変更する
WordPress[Acunetix WP Security] テーブル接頭辞を簡単に変更する