コードを綺麗に表示したい!SyntaxHighlighter Evolved

プラグインは重くなるし最低限で、不要なものは極力入れ無いようにと考えているのですが、
記事を書いていてHTMLやJavaScriptコードを記述するのが結構手間なので
検索してみたら、直ぐに見つかりました(^ ^)

[SyntaxHighlighter Evolved]の追加

まずは、「プラグイン」→「新規追加」画面で[SyntaxHighlighter Evolved]を検索して有効化します。

syntax-20150909_1

有効化したら「設定」から[SyntaxHighlighter]をクリック。

syntax-20150909_2

設定項目はソースコードを入力する際にその都度設定できますが、Default値としてここで指定出来ます。

syntax-20150909_3
今回は出来るだけシンプルな設定にしてみました。
テーマ:Fade to Grey
一般:軽い表示モードを使う

[SyntaxHighlighter Evolved]の使い方

使い方は、「新規投稿を追加」の本文を入力する際に
用意されたショートコードでソースコードを囲みます。
例えば、先日「自作のJavaScriptをWordPressで利用してスマホからのアクセスのみリダイレクトする」の記事で記載したこちらのJavaScript

// 転送前のURL
var targetURL = “http://●●●.●●●/”;
var nowURL = location.href;
// 転送先のURL
var mobaURL = “http://●●●.●●●/”;
if ( nowURL == targetURL
    && ( navigator.userAgent.indexOf(‘iPhone’) > 0
    || (navigator.userAgent.indexOf(‘Android’) > 0
    && navigator.userAgent.indexOf(‘Mobile’) > 0) ) ) {
      location.href = mobaURL;
    }


この前後を[js]、[/js]で囲むと

// 転送前のURL
var targetURL = "http://●●●.●●●/";
var nowURL = location.href;
// 転送先のURL
var mobaURL = "http://●●●.●●●/";
if ( nowURL == targetURL
    && ( navigator.userAgent.indexOf('iPhone') > 0
    || (navigator.userAgent.indexOf('Android') > 0 
    && navigator.userAgent.indexOf('Mobile') > 0) ) ) {
      location.href = mobaURL;
    }


こんな感じの表示になります。
追加でCSSのclassを追加出来るのも便利です。

ハイライトを行に書ける場合は
[html highlight=”2,5″]のように記述、
ボックス左側の数字の開始番号を指定する場合は
[html firstline=”67″]のように記述します。

ソースコードの種別ごとに用意されたショートコードの一部です。

ソースコードの種別 ショートコード
HTML html
CSS css
JavaScript js, jscript, javascript
PHP php
XML xml, xhtml, xslt, html, xhtml
SQL sql
Visual Basic vb, vbnet

プラグインに出来るだけ頼ら無いでやりたいと思っていたのですが、やはり便利ですね…(-。-;
だいぶ時間の短縮につながりました!!
今さらながらと思いつつ、次の記事からはソースコードも見やすいと思います(笑)

応援よろしくお願いします。
いいね ! してもらえると嬉しいです。

Twitter で

自己紹介

松田 大 と申しますm(_ _)m
インディーズでミュージシャンをやっていたのですがいつのまにか...

とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。

現在勤めているJTクラウドシステムでは、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発「 Excel VBA 」を活用した効率化ツールの開発を中心に「 ネットワーク・サーバー構築 」や「 Office365製品の導入支援 」、最近は、ホームページ制作に加え、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

今年7月、代表取締役に選任され、8月に第一子が誕生、公私ともに慌ただしくしています(笑)

お問い合わせはJTクラウドシステムホームページからお願いします。
スポンサーリンク