*

ソースコードの表示をCrayon Syntax Highlighterに変更しました。

公開日: : 最終更新日:2014/03/13 WordPress


スポンサードリンク



WordPressにgoogle code prettifyを導入する。で行った設定でソースコードの表示を行っていたのですが、Macのブラウザ(Firefox, Chrome)でうまく表示されていませんでしたので表示方法を変更する検討と変更を行いました。

ブログの管理にWordPressを利用しているのですが。

  1. できる限りPHPに手を加えたくない
  2. 動作が軽い
  3. 使い勝手が良い

 

を検討の前提としました。PHPの修正を行うことに抵抗がある訳ではないですが、当然ながら修正は必要最低限に留めるべきであり、このレベルの変更でその必要性を感じなかったからです。

 

検討の結果、以下の2つのWordPressのプラグインが候補となりました。

  • SyntaxHighlighter Evolved
  • Crayon Syntax Highlighter

試しにプラグインの追加を行い、実際に表示を行ってみました。
結果として、両プラグインともPHPに手を加え無くてもOKで、使い勝手も良いとの結果(あくまで自分の感覚ですが)が得られました。
しかし、まだ言及していない「動作が軽い」との基準に関しては、「SyntaxHighlighter Evolved」は満たしていないと判断しました。

ストップウォッチでデータを複数回取得し、客観的に判定した訳ではないのですが、明らかにもっさり感があります。
あと、動作が不安定でした。まあ使い方が悪いだけなのかもしれませんが、使い方によっては不安定になるプラグインより、使い方に依存せず安定しているプラグインを選ぶのが人情ですよね。

「SyntaxHighlighter」は、ダブルクリックでソースコードを全選択できる機能があります。これは「Crayon Syntax Highlighter」には存在しないので、その点だけ残念です。

 

ということで、簡単に「Crayon Syntax Highlighter」の説明をさせていただきます。

各種設定はWordPressの管理画面の「設定」→「Crayon」をクリックすることで変更可能です。
スクリーンショット 2013-12-10 17.07.45

設定画面とデフォルトの設定値は以下の通りです。
Crayon Syntax Highlighter 設定 ‹ な・な・な・なんでやねん — WordPress

いっぱいありますね・・・、とりあえずデフォルトで様子見ですが何か問題点orお勧めの設定変更などが見つかれば別エントリーを登録したいと考えています。

ブログ投稿時の利用方法ですが、ブログのテキストエディターで「crayon」ボタンをクリックするだけです。
スクリーンショット 2013-12-10 17.10.20

ボタンクリック後に以下の画面が表示されますので、「コード」に表示したいコードを貼付けるだけです。
スクリーンショット 2013-12-10 17.12.49

コードだけ指定した場合の実際の表示イメージは以下のようになります。
(各種設定はデフォルトとの意味です。)

 

プログラム言語にJavaScript、テーマにeclipseを指定した場合の実際の表示イメージは以下のようになります。

確認が終わったので「google code prettify」プラグインは無効にしました。競合するといけないので。
これでソースコードの表示が高機能&見やすくなりました。


スポンサードリンク



関連記事

no image

久しぶりに攻撃されました。

本当に怖い世の中になってますね。 久しぶりに攻撃されちゃいました。 古いWordPres

記事を読む

no image

WordPress 3.8にアップデートしました。

利用しているWordPressを3.8にアップデートしました。 利用しているテーマはStinger

記事を読む

no image

WordPressのテーマStinger3におけるstyle.cssの修正点の備忘録

WordPressのテーマStinger3におけるスタイルシート修正(style.css)の備忘録で

記事を読む

no image

ウェブマスター ツールの構造化データでauthor がありません、updated がありませんとエラーが出る。

前々から気になっていたのですが、 「ウェブマスター ツール」の「検索デザイン」>「構造化

記事を読む

no image

ウェブマスター ツールの構造化データでauthor がありません、updated がありませんとエラーが出る。[結果報告]

前回修正したウェブマスター ツールの構造化データのエラー発生の件の結果報告をさせていただきます。

記事を読む

no image

突然WordPressの「投稿一覧」画面に存在するはずの投稿がみつからないず「投稿が見つかりませんでした。」と表示される。

なんだか昨日からおかしいと思っていたのですが 突然WordPressの「投稿一覧」画面が以下のよう

記事を読む

no image

WordPressにGoogle Analyticsを導入する。

WordPressのアクセス解析には「StatPress Reloaded」を利用しているのですが、

記事を読む

no image

WordPress利用者向けPHP入門【基本的な利用方法と変数】

WordPressのソースを読むためのPHP入門として WordPressのソースを読むために必要

記事を読む

no image

WordPressのソースを読んでみる【その1】

少しずつですがWordPressのソースを読んでいこうと考えております。当然WordPressはPH

記事を読む

no image

WordPress(Stinger3テーマ)のナビゲーションメニュー追加

テーマはStinger3を利用しています。WordPressのバージョンは3.7.1です。 ナビゲ

記事を読む

Message

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

Optimization WordPress Plugins & Solutions by W3 EDGE
PAGE TOP ↑