プロジェクションマッピング

エンターテインメントから工業利用まで、プロジェクションマッピングの活用・運用をお考えの方へ

more

インタラクティブ&サイネージ

情報表示用のデジタルサイネージから、センサーを利用したインタラクティブ要素などをお考えの方へ

more

VR/360MOVIE

VRHMD用コンテンツからプラットフォームを利用した360度ムービーを活用したPRをお考えの方へ

more
CONTACT 052-253-9866

シンタックスハイライターをCrayon Syntax Highlighterに変更しました!

2014.03.26 水曜日 07:36:32

MS251_memotonewsp_02

当ブログでは記事内でソースコードを表示させる際、視認性を良くするため、
WordpressプラグインのSyntaxhighlighter evolvedを使用していました。

いつも見て下さっている方はご存知だと思いますが、これを使用することによりソースコードのタグがハイライトされ、
見やすくなるという便利なプラグインです。

このSyntaxhighlighter evolvedには、Objective-Cが一応対応言語として入っているのですが、
ハイライトされる部分が2箇所ほどしか無く、少し気になる部分ではありました。

そこで今回、新たなシンタックスハイライトのプラグインとして、Crayon Syntax Highlighterを導入しました。

1.Crayon Syntax Highlighterをインストール

手順としては、一般的なWordpressプラグインと同様です。
まず、こちらから、プラグインをダウンロードします。
ダウンロードしたらファイルを解凍し、Wordpress内のディレクトリ、wp-content/plugins/ に解凍したフォルダをアップロードします。

WordPressのダッシュボード、プラグイン→インストール済みプラグインから有効化します。

2.Crayon Syntax Highlighterの設定

設定→Crayon から設定が可能です。
テーマも20パターン程もあるので良い感じです。今回は、以下のものを選択しました。

スクリーンショット 2014-03-26 7.19.57

フォントサイズ、マージン等、かなり細かい部分まで調整が可能で、これには驚きました。
今回は「Crayonsとして[php][/php]のようなミニタグをキャプチャします。」にチェックを入れました。

スクリーンショット 2014-03-26 6.36.34

これで、Syntaxhighlighter evolvedと同様のタグでソースコードを括れば、表示が可能になります。

3.設定完了!

設定完了です!結果をご覧ください!

before(Syntaxhighlighter evolvedの場合)

スクリーンショット 2014-03-26 6.40.13

after(Crayon Syntax Highlighter適応後)

スクリーンショット 2014-03-26 6.39.02

実際にコードを記述すると以下のようになります。

なかなかいい感じですね!右上をオンマウスであれこれ出来ます。
今後は細かい調整もしていけば更に使い易くなるのではないでしょうか。

今回参考にさせて頂いたサイトはこちらです。ありがとうございました!
Category:Development , PHP/Javascript , Tools , その他ツール     Tag:
Authorブログの著者について
田中 義弘

田中 義弘

イベントプロダクション・グラフィックデザイナーを経て、2010年3月に株式会社アイデアクラウドを設立。近年、WEBから得た技術をベースに、プロジェクションマッピング事業をはじめとした先端事業をスタート。

Our Business
最近の記事
人気記事
Our Project