SyntaxHighlighter Evolved を使ってみる - Wordpress plugin ホームページ制作 | 墨田区

SyntaxHighlighter Evolved を使ってみる – WordPress plugin

LINEで送る
Pocket

WordPress プラグイン SyntaxHighlighter Evolved をご紹介します。
このプラグインは ソースコードをキレイに表示する のに便利です。

WordPress のプラグイン管理画面から SyntaxHighlighter Evolved を検索し、インストール後 有効化 してください。もしくは、以下のサイトからダウンロードできますので、自分で配備して利用することも可能です。
WordPress › SyntaxHighlighter Evolved « WordPress Plugins

注意!!自作テーマをご利用の方へ。
header.php</head> の上に <php wp_header();> を記述してください。
footer.php</body> の上に <php wp_footer();> を記述してください。
これがないと css や javascript ファイルが読み込まれません。
設定画面を開くと Version 2.xVersion 3.x が出てきます。




【PR】マジか?!「アレ」してるLINEスタンプっていったい・・・


Version 2.x

以下の画面にて、ツールバーを表示するとした場合、コード表示エリアにマウスオーバーすると、右上に 「ソース表示」「クリップボードへコピー」「印刷」「プラグインについて」のツールバーが表示されます。

SyntaxHighlighter設定画面

ツールバーを表示するにチェックを入れる。

Version 3.x

ツールバーの表示は「プラグインについて」だけになります。
マウスカーソルを使って、行選択をしても行番号は選択されません。
ソース表示エリアでダブルクリックすれば、ソース全体が選択できるのでクリップボードにコピーすることができます。
個人的には、ビジュアル的にもわかりやすい Version 2.x を使っています。

使い方は簡単

使い方はとっても簡単です。
ソースコードを、[表記したい言語] と [/表記したい言語]のタグで、”[]”で囲むだけです。後は、プラグインがソースコードを整形して吐き出してくれます。
実際にやってみましょう。

SyntaxhigHlighterサンプルソース

[言語]ソース[/言語]のように記述する。


結果はこんな感じです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>PHP Code Example</title>
</head>
<body>
 <h1>PHP コードサンプル</h1>

 <p><?php echo 'Hello World!'; ?></p>

 <p>この行はハイライトされました</p>

 <div class="foobar">
  この 行は スマート
  タブ の 例
  です。
 </div>

 <p><a href="http://wordpress.org/">WordPress</a></p>
</body>
</html>

んー、簡単ですねー^^

上の設定画面で、「自動リンクを有効にする」のチェックを外しておけば、余計なリンクがなくなり、うっかりクリックしてしまっても、リンクされることもありません。

また、都度 [ ] で利用する際に、以下の設定も可能です。
これをショートコードといいます。


ショートコードパラメータ

ショートコードパラメータの一覧です。

パラメータ 説明
auto-links falsehttp:// から始まるURL記述がアンカー対応になるのを回避できます。
gutter false行頭番号無しに設定できます。
toolbarfalseツールバーを表示しません。
lighttrue行頭番号もツールバーも表示しません。
highlight[1,2,3]指定した数値の行をハイライトします。カンマ区切りで設定しましょう。
collapse trueソースコードを折りたたんだり、展開したりできます。
長いソースの時などに利用しましょう。
first-line 3途中の行頭番号からの開始する値です。<ol start=”3″>と同じです。
tab-size4tab インデントの幅サイズを設定できます。
wrap-linesfalse改行しないでスクロールします。
overflow:auto; の white-space:nowrap; と同じです。

使える言語も豊富

使える言語もこんなにたくさんあります。全23種類も利用できます。

Brush nameBrush aliases
ActionScript3as3, actionscript3
Bash/shellbash, shell
C#c-sharp, csharp
C++cpp, c
CSScss
Delphidelphi, pas, pascal
Diffdiff, patch
Groovygroovy
JavaScriptjs, jscript, javascript
Javajava
JavaFXjfx, javafx
Perlperl, pl
PHPphp
Plain Textplain, text
PowerShellps, powershell
Pythonpy, python
Rubyrails, ror, ruby
Scalascala
SQLsql
Visual Basicvb, vbnet
XMLxml, xhtml, xslt, html, xhtml

スタイルシートを変更

初期設定ですと、文字が日本語向けになっていないので、スタイルシートを変更します。
以下のスタイルシートを変更します。
/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/styles/shCore.css

53 行目、54 行目辺りに line-height, font-family, font-size がありますので、サイトにあわせて好きに変更します。ここでは、以下のように変更しました。

/*	line-height: 1.1em !important; Updater saka-en.*/
	line-height: 1.5em !important;
/*	font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; Updater saka-en.*/
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;	font-weight: normal !important;
/*	font-size: 1em !important; Updater saka-en.*/
	font-size: 10px !important;

※プラグインがアップデートされると元に戻ってしまうので注意が必要です。


クリップボードアイコンが表示されない

っと、ここでおかしなことに気がつきました・・・。
下図のようにツールバーに、クリップボードアイコンの表示がないのです。

SyntaxHighlighterツールバー

クリップボードアイコン表示なし


本来であれば、下図のようにクリップボードアイコンが表示されるはずなのに・・・。

SyntaxHighlighterツールバー

クリップボードアイコン表示あり


syntaxhighlighter.php の 651 行目辺りに clipboard.swf へのパスが書いてあります。

echo "" SyntaxHighlighter.config.clipboardSwf = '"" . esc_js( apply_filters( 'syntaxhighlighter_clipboardurl', plugins_url('syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf') ) ) . ""';\n"";

clipboard.swf が以下のディレクトリに配備されていないのかと思い、確認してみました。
しかし、ありますね・・・・。なんで??

/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf

とにかく、何かの原因で読み込めないようですね。
ひとつ上のディレクトリに、FTP でコピーしてみました。

/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/clipboard.swf

続いて syntaxhighlighter.php の 651 行目辺りの clipboard.swf へのパスを変更します。

//    echo " SyntaxHighlighter.config.clipboardSwf = '" . esc_js( apply_filters( 'syntaxhighlighter_clipboardurl', plugins_url('syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf') ) ) . "';\n";
    echo " SyntaxHighlighter.config.clipboardSwf = '" . esc_js( apply_filters( 'syntaxhighlighter_clipboardurl', plugins_url('syntaxhighlighter/syntaxhighlighter2/clipboard.swf') ) ) . "';\n";// Updater saka-en.

すると、表示が出ました^^
SyntaxHighlighterツールバー



んー、いったい何故なのでしょうか。
原因を理解できませんでしたが、解決したのでここまでとします。

どなたか原因をご存知の方がいらっしゃれば、コメントをいただけるとありがたいです。


LINEで送る
Pocket

この記事がお役に立ちましたら シェア をお願いいたします。

コメント - Thank you for the comment.

コメントを残す

お名前 (必須)
メールアドレス
(アドレスは公開されません)

コメント(必須)

Trackback URL