コードを綺麗に表示したい!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

 

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

自己紹介

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

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

「Excel VBA」からスタートして、Yamaha RTX シリーズで VPN環境構築、Hyper-V環境構築、Windowsアプリ開発などを経験した後、「 WordPress 」に出会い、どっぷりハマっています。

現在勤めているETBS合同会社では、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

現在、代表兼二児のパパ。子育てを通じて、こどもたちにもプログラミングの楽しさに触れてほしいと思うようになり、「 こどもICTかつしか教室 」を開講中。最近は童心に帰り、簡単なゲーム制作なんかも楽しんでいます(^_^)。

コメントを残す

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