Syntaxhighlighterの見た目を変えてみた ※追記あり

Wordpress関連
2024年9月5日

投稿内のコード表示で使わせてもらっているSyntaxhighlighter Evolved。
最近このページも外に向けて公開することにしたので、万が一見てくれてる人がいたらという事もあって
Syntaxhighlighterの見た目を少し変えてみたので覚書。
このサイトで使用してるのはヴァージョン２.xで、利用しているテーマはMidnight。
デフォルトだと、一行しかない場合は余白が少ないのでちょっと見づらいし、行番号も色が薄くてよくわからない。
和文字もちょっと大きいかな。
などちょっと見やすくしたかったのでカスタマイズ。

WordPress/wp-contentの
Plugins/Syntaxhighlighter/
Syntaxhighlighter2/styles
この中のshCofre.cssとshThemeMidnight.cssを変更すると反映される。

ただし、このプラグインが更新されたりした場合はstyles部分も上書きされる可能性があるので要注意。

テーマを自作して登録もできるようだ。その場合はfunctions.phpに必要コードを追加。
使わないと思うけど一応載せておきます。

function add_syntaxhighlighter_theme() {
    wp_register_style( 'syntaxhighlighter-theme-テーマ名（半角英数字）', 'オリジナルのcssへのパス', array( 'syntaxhighlighter-core' ) );
}
add_action( 'wp_print_styles', 'add_syntaxhighlighter_theme' );
 
function my_evolved_theme( $themes ) {
    $themes['テーマ名（半角英数字）'] = 'テーマの名称';
    return $themes;
}

※追記
バージョン2での見た目の変更は上記の通りなんですが、バージョン2ではyaml言語のブラシ対応がなく、下記のプラグインを入れてみても反応がないので、現在はバージョン3を使用しています。見た目の変更は施していません。
yaml対応のため、SyntaxHighlighter Evolved: Yaml Brushというプラグインを導入しました。ずいぶん古いのですがバージョン3ではちゃんと対応出来ているようなので一応リンクしておきます。
SyntaxHighlighter Evolved: Yaml Brush

PAGE TOP