WEB制作などの技術情報をブログで紹介する場合HTML、CSS、PHP、JavaScriptなどのプログラミングのコードを説明することがよくあります。
ただプログラミングのコードをそのままブログ記事にしてアップしてしまうと、プログラムが稼働して紹介するコードが表示しなくなったり、記事の投稿がエラーになったりします。
そんな時に便利な記事の中で表示されるソースコードをキレイに表示してくれるプラグイン「SyntaxHighlighter Evolved」をご紹介いたします。
WordPressで制作・技術関係のブログを運営している方がの多くが利用している便利なプラグインです。
使用できる言語
actionscript3、bash、clojure、coldfusion、cpp、csharp、css、delphi、erlang、fsharp、diff、groovy、html、javascript、java、javafx、matlab (keywords only)、objc、perl、php、text、powershell、python、r、ruby、scala、sql、vb、xml
公式サイトに詳細にも対応言語一覧がありますので参考にしてください。
■注意事項
テキストモードで使用してください。
ビジュアルモードで使用すると、ソースコードの一部が除去・変更されることがあります。
使い方
ソースコードを入力して言語名で囲みます。
例：HTMLの場合
[html]
<h1>これはテストです。</h1>
<p>これはテストです。</p>
[/html]
他のコードでも同じ方法で使用できます。
CSSは［CSS］、JavaScriptは［javascript］といったように記述します。
例：CSSの場合
［css］ソース［/css］
[css]
#text {
font-size: 14px;
font-weight: bold;
color: #F00;
}
[/css]
例：JavaScriptの場合
［javascript］ソース［/javascript］
[javascript]
function slideSwitch() {
var $active = $(‘#slideshow a.active’);
if ( $active.length == 0 ) $active = $(‘#slideshow a:last’);
var $next = $active.next().length ? $active.next()
: $(‘#slideshow a:first’);
$active.addClass(‘last-active’);
$next.css({opacity: 0.0})
.addClass(‘active’)
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass(‘active last-active’);
});
}
$(function() {
setInterval( “slideSwitch()”, 6000 );
});
[/javascript]
まとめ
簡単に利用できて、しかもソースコードが見栄えよくなるのでプログラムなどの技術系のブログを運営している方には使い勝手のよいプラグインです。
