こんにちは、WebマーケッターのYoshimiです。Web解析や分析が好きです!

ソースコードをブログ上にきれいに表示させたいときに役に立つプラグインのご紹介です。
今更ながらですが、いざ必要なときに意外と忘れてしまっているプラグインなので、備忘録的にご紹介させていただきます。

[ad#txtimg468]

導入方法

wordpressのプラグイン追加画面から「SyntaxHighlighter Evolved」を検索、インストールし、有効化して終わりです。なんら難しいことありません。

対応しているコードの種類

html,actionscript3,bash,coldfusion,cpp,csharp,css,
delphi,erlang,fsharp,diff,groovy,javascript,java,javafx,
matlab (keywords only),objc,perl,php,text,powershell,
python,r,ruby,scala,sql,vb,xml

とっても簡単な使い方

使い方は至って簡単です。
[言語]hogehoge[/言語]でくくるだけです。
そうするとプラグインがソースコードを形成してくれ、きれいに見せてくれるのです。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />

とか・・・

では、応用編をご紹介

・開始する行数の指定
[html firstline=”10″]
※[]は半角で書いてください

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />

・行を強調させる。カンマで複数設定可能
[html highlight=”2,4,7″]
※[]は半角で書いてください

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>ソースコードに色をつけるプラグイン「SyntaxHighlighter Evolved」</title>
<link rel="profile" href="http://gmpg.org/xfn/11"/>
<link rel="pingback" href=""/>
<link rel="shortlink" href=""/>
<link rel="author" href="http://admin"/>
<link rel="canonical" href=""/>

ダウンロード:SyntaxHighlighter Evolved

最後に

ほかにも、背景色が選べたりもしますので、いろいろ使ってみてください。
wordpressを利用されているデザイナーやプログラマーの方はインストールしているかもしれませんが、これからを見据えて入れておいても損はしないプラグインだと思います。

コメントを残す

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