大阪のホームページ制作会社 株式会社TREVO
スタッフブログ

WordPressでソースコードを紹介する時に便利なプラグインSyntaxHighlighter Evolved

2016.02.01.

WordPress

twitter Facebook Pocket LINE はてブ

株式会社TREVOの月額制ホームページ制作サービス
PR

20160201-3WEB制作などの技術情報をブログで紹介する場合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]

まとめ

簡単に利用できて、しかもソースコードが見栄えよくなるのでプログラムなどの技術系のブログを運営している方には使い勝手のよいプラグインです。

twitter Facebook Pocket LINE はてブ

関連の記事

お見積もり