WordPressプラグインSyntaxHighlighter Evolved 使い方

久しぶりにWordPressの記事です。
今まで気に入らないながらもCodeColorerというプラグインを使っていたのですが、なんとなく。
なんとなくも、探していたら、便利なものがあったので、乗り換えようと。

という訳で、ご紹介。

WordPressプラグイン SyntaxHighlighter Evolved

インストール
WordPress管理画面>プラグイン>新規追加>SyntaxHighlighter Evolvedで検索
すると、1番上段にバージョン3.1.3で星4と1ミリのやつがあるので、これをインストール。

設定
僕の設定を書いておきます。
バージョン:Version 2.x 右上に出るボタンは、このバージョンでないと出ません。
テーマ:Default 色んな人が利用してますが、やはりこのテーマなようです。
すべてのブラシを読み込む:オフ よくわからない人は~ってありますからね。

行番号を表示する:オン あった方がなんかそれっぽいです。
ツールバーを表示する:オン あのボタンが便利だと僕は思ってます。
自動リンクを有効にする:オフ コードを引っ張りたいから、これなわけですし。
コードボックスの表示を閉じておく:オフ 一々クリックさせたくはないですね。
軽い表示モードを使う:オフ これ、オンにすると右上のボタンが出ません。交互に背景色がつきません。
インデントタブを許容するスマートタブを使う:オン あった方がいいのではないでしょうか。
長い行を折り返す(v2.xのみ、横スクロールバーを無効にする):スクロールバーってあんまいい気分ではありません。

こんなものでしょう。
他はお好みで。

使用方法
以下のように、使いたい言語をカッコして、コードを挟むだけです。
aaaaaaaaaaaaaaaaaaaaaaaaa


詳しくは、以下の二つの記事が参考になります。
はなし半分なマトメ。 – SyntaxHighlighter Evolved 導入
ソースコードを表示するWPプラグイン「SyntaxHighlighter Evolved」の使い方 | FOOTMARK

さらに、HTML との混合コード (htmlscript)など、細かい記述も必要になってくるらしく、そこのところ詳しいのが以下の記事です。
まとめ:SyntaxHighlighter Evolved の使い方 (設定&記述例) | attosoft.info

これだけあれば、使えるはずです。

ちょっとしたカスタマイズ

CSS調整
デフォルトでは、これがまた文字が大きいです。
ほどほどな大きさがいいので、ここは変更しましょう。

/wp/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/styles/shCore.css
syntaxhighlighter2はバージョンがVersion 2.xの場合のCSSだと予測してます。Version 3.xの人は、syntaxhighlighter3の方のCSSを変更しましょう。
というわけで、以下のハイライト部分がフォントサイズで、お好みに変更。
.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody
{
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	background: none !important;
	text-align: left !important;
	float: none !important;
	vertical-align: baseline !important;
	position: static !important;
	left: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	height: auto !important;
	width: auto !important;
	line-height: 1.1em !important;
	font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
	font-weight: normal !important;
	font-style: normal !important;
	font-size: 13px !important;
	/*min-height: inherit !important; *//* For IE8, FF & WebKit */
	/*min-height: auto !important;*/ /* For IE7 */
	direction: ltr !important;
}

便利な使い方
この指定コードで囲む場合、いちいち入力するのも面倒でしょう。
表示する言語が決まっている人は、ボタン登録してしまいましょう。
というわけで、以下のプラグイン。
AddQuicktag
これでボタンを登録してしまえば、面倒無く使えるようになります。
以下の画像のような感じで登録ですね。
WS0000

ハイライトにしたり、そういったオプションを使いたい場合は、仕方ないので手入力しましょう。

まだまだ使い方はあるのでしょうが、これだけ抑えとけば、どうとでもなります。
こうした便利なプラグインはまだまだあるので、今後も探して紹介していこうと思います。

Be the first to comment

Leave a Reply

Your email address will not be published.


*