2012年07月28日 category : WordPress tags :

プラグイン：SyntaxHighlighter Evolvedをハイライトにする方法

このエントリーをはてなブックマークに追加

SyntaxHighlighter

WordPressプラグイン「SyntaxHighlighter Evolved」の指定行をハイライト表示にしてみます。

WordPressはいろいろなプラグインがあり便利ですね。当ブログでも使っているソースコードを表示するWordPressプラグイン「SyntaxHighlighter Evolved」ですが、表示をより見やすくするために選択行をハイライト表示にすることができます。

SyntaxHighlighter Evolvedをハイライト表示にする方法と行番号表示の開始行を変更する方法を紹介します。

01 . SyntaxHighlighter Evolvedのインストール

WordPress管理画面→左のメニュー「プラグイン」→「新規追加」で「SyntaxHighlighter Evolved」を検索します。検索結果に表示されると思いますので「いますぐインストール」をクリックします。

インストール

インストールが完了したら「プラグインを有効化」をクリックして有効にしてください。

02 . SyntaxHighlighterの設定

有効化にするとWordPress管理画面→「設定」に「SyntaxHighlighter」が追加されますのでクリックして設定画面を表示します。

ここではテーマ（見た目）や行番号の表示有無、ツールバーの表示有無やタブのサイズなどが変更できます。「変更を保存」をクリックすることでプレビューに反映されますのでいろいろ変更してみてください。

03 . SyntaxHighlighterの使い方

コード表示のプラグインは<pre>タグを使う方法とショートコード:[使用言語]がありますが、SyntaxHighlighter Evolvedはショートコードを使用します。ショートコード記載は使用言語でソースコードをくくってあげればOKです。

[使用言語]ー[/使用言語]　※使用言語：php, html, css

こんな感じになります。

ショートコード

04 . 行をハイライトにする

ショートコードを[html highlight=”2″]というように書くと2行目がハイライト行になります。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="xxx" />
    <meta name="keywords" content="xxx,xxx" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" href="css/xxx.css" type="text/css" />
    <title>Title</title>
</head>
<body>
<p>本文</p>
</body>
</html>

複数行をハイライト行にするにはカンマで区切ります。[html highlight=”2,5″]

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="xxx" />
    <meta name="keywords" content="xxx,xxx" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" href="css/xxx.css" type="text/css" />
    <title>Title</title>
</head>
<body>
<p>本文</p>
</body>
</html>

複数行間をハイライト行にするにはハイフンで区切りますが、最初に単数字が必要になりますので[html highlight=”0,4-6″]という風に書きます。または次で紹介する行＋複数行を利用して[html highlight=”4,5-6″]でもOKです。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="xxx" />
    <meta name="keywords" content="xxx,xxx" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" href="css/xxx.css" type="text/css" />
    <title>Title</title>
</head>
<body>
<p>本文</p>
</body>
</html>

カンマとハイフンの併用もOKです。[html highlight=”2,4-6″]

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="xxx" />
    <meta name="keywords" content="xxx,xxx" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" href="css/xxx.css" type="text/css" />
    <title>Title</title>
</head>
<body>
<p>本文</p>
</body>
</html>

05 . 開始行を変更する

行ありの場合左側に行番号が表示されますが、大きなファイル内の一部分を抜粋して紹介したい場合、開始行の行番号を指定したい場合があると思います。[html firstline=”15″］と書くと最初の行番号が15になります。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="xxx" />
    <meta name="keywords" content="xxx,xxx" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" href="css/xxx.css" type="text/css" />
    <title>Title</title>
</head>
<body>
<p>本文</p>
</body>
</html>

以上WordPressプラグインSyntaxHighlighter Evolvedの紹介でした：）コードも文章も出来るだけ見やすくなるよう心がけていきたいと思います。

HOME >>  WordPress > プラグイン：SyntaxHighlighter Evolvedをハイライトにする方法

√ 関連記事：こんな記事も読まれています！

Comments

コメントを残す（反映までしばらくかかります）

*