SyntaxHighlighter Evolvedプラグインを導入しましたが、個人的には一行毎に色が変わっている旧デザインのほうが好きなので、プラグイン更新してもCSSが変更されないように独自テーマを追加するカスタマイズしました。
SyntaxHighlighter Evolvedプラグインに、オリジナルのテーマを追加する
参照元 「（ちょっとメモ）SyntaxHighlighter 3.0.83 の使い方」
参照元 「SyntaxHighlighter EvolvedにオリジナルのCSSを適用する方法」
前者のサイトでどのCSSをベースにするか考え、具体的にオリジナルテーマを追加する方法は後者を参考にさせてもらいました。
functions.phpを編集する
管理画面を開き、「外観」→「テーマの編集」→「テーマのための関数 (functions.php)」に以下を追加します。
[php title=”functions.php”]
/***** SyntaxHighlighter Evolvedにオリジナルテーマを追加 *****/
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;
}
add_filter( ‘syntaxhighlighter_themes’, ‘my_evolved_theme’ );
[/php]
- テーマ名…2箇所あります。半角小文字の英数字で設定してください。
- cssファイル名…http、httpsから始まる、cssファイルのURLを入力します。
- 設定画面での表示名…半角英数字で設定します。大文字小文字混在可能、日本語使用可能かは未確認。
CSSファイルをアップする
先ほど設定したURLにCSSファイルをアップします。
私は子テーマを使用しているのでWordpress上で編集できるように
https://ac34.info/***/themes/simplicity2-child/shTheme***.css
にアップしました。
後々何のファイルか分からなくならないようCSS内にもプラグイン名を記述していますが、ファイル名も後述のベースにしたファイルの命名ルールに準じています。
このブログの設定例は長くなるので、このページ最後にまとめています
当ブログではSyntaxHighlighter EvolvedのVer.3を使用しているため
plugins/syntaxhighlighter/syntaxhighlighter3/styles/shThemeDefault.css
をベースに、サイトのデザインに合わせて緑基調でハイライトにピンクを設定しました。
SyntaxHighlighter EvolvedのVer.2を使うなら
plugins/syntaxhighlighter/syntaxhighlighter2/styles/shThemeDefault.css
をベースにしましょう。
オリジナルテーマを適用する
管理画面を開き、「設定」→「SyntaxHighlighter」を開きます。
テーマ欄の一番下に、functions.phpで設定した表示名が追加されていますので、それを選んで「変更を保存」したら完了です！
この方法を使うメリット
functions.phpも追加した独自テーマCSSも子テーマのフォルダ内にあるため、WordpressやSyntaxHighlighter Evolvedプラグインを更新しても再設定し直す必要がほぼありません。
何か不具合が出たときぐらいですね。
また、Wordpressの管理画面から編集可能になるので、デザイン少し変えたいな～と思った時に、いつでもちょこちょこ修正できます。
このブログの設定例
いちいち「!important」が設定されているのは外してもいいような気がするんですが、元ファイルがそうなっているので一応残しています。
コメントがない2項目は、どこが変わるのかちょっとわからなくて…中途半端でスミマセン；
.syntaxhighlighter.collapsedが「overflow: visible」になっているのも、特に変更する必要性がわからなかったのでコメント付けてません。
[css title=”shTheme***.css”]
/***** pre要素のスタイル *****/
.syntaxhighlighter {
border:solid 1px #D6E9C6 !important;
background-color: #D6E9C6 !important;
-webkit-border-radius:10px !important;
-moz-border-radius:10px !important;
-ms-border-radius:10px !important;
-o-border-radius:10px !important;
border-radius: 10px !important;
}
/***** 偶数行のスタイル *****/
.syntaxhighlighter .line.alt1 {
background-color: #f7fff2 !important;
}
/***** 奇数行のスタイル *****/
.syntaxhighlighter .line.alt2 {
background-color: white !important;
}
/***** ハイライト時 *****/
.syntaxhighlighter .line.highlighted.alt1,
.syntaxhighlighter .line.highlighted.alt2 {
background-color: #ffe4e1 !important;
}
.syntaxhighlighter .line.highlighted.number {
color: white !important;
}
/***** title属性でのキャプション *****/
.syntaxhighlighter table caption {
}
.syntaxhighlighter .gutter {
color: #F4B4D0 !important;
}
/***** 行番号の右ライン *****/
.syntaxhighlighter .gutter .line {
border-right: 2px solid #D6E9C6 !important;
}
/***** 行番号のハイライト時 *****/
.syntaxhighlighter .gutter .line.highlighted {
background-color: #F4B4D0 !important;
color: white !important;
}
/***** 行番号の設定 *****/
.syntaxhighlighter.printing .line .content {
border: none !important;
}
.syntaxhighlighter.collapsed {
overflow: visible !important;
}
/***** 折りたたみ時のボックス全体の設定 *****/
.syntaxhighlighter.collapsed .toolbar {
color: #6C9BD2 !important;
background: #f7fff2 !important;
border: 1px solid #D6E9C6 !important;
-webkit-border-radius:10px !important;
-moz-border-radius:10px !important;
-ms-border-radius:10px !important;
-o-border-radius:10px !important;
border-radius: 10px !important;
}
/***** 折りたたみ時のリンク色 *****/
.syntaxhighlighter.collapsed .toolbar a {
color: #6C9BD2 !important;
}
/***** 折りたたみ時のリンクホバー色 *****/
.syntaxhighlighter.collapsed .toolbar a:hover {
color: #D04255 !important;
}
/***** 右上のツールバーの設定 *****/
.syntaxhighlighter .toolbar {
background: #6ce26c !important;
border: none !important;
}
/***** 右上のツールバーのリンク色 *****/
.syntaxhighlighter .toolbar a {
color: #6C9BD2 !important;
}
/***** 右上のツールバーのリンクホバー色 *****/
.syntaxhighlighter .toolbar a:hover {
color: #D04255 !important;
}
/******************************
ここからコードの表示色設定
******************************/
.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
color: black !important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
color: #008200 !important;
}
.syntaxhighlighter .string, .syntaxhighlighter .string a {
color: blue !important;
}
.syntaxhighlighter .keyword {
color: #006699 !important;
}
.syntaxhighlighter .preprocessor {
color: gray !important;
}
.syntaxhighlighter .variable {
color: #aa7700 !important;
}
.syntaxhighlighter .value {
color: #009900 !important;
}
.syntaxhighlighter .functions {
color: #ff1493 !important;
}
.syntaxhighlighter .constants {
color: #0066cc !important;
}
.syntaxhighlighter .script {
font-weight: bold !important;
color: #006699 !important;
background-color: none !important;
}
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
color: gray !important;
}
.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
color: #ff1493 !important;
}
.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
color: red !important;
}
.syntaxhighlighter .keyword {
font-weight: bold !important;
}
[/css]
SimplicityでSyntaxHighlighter Evolveの表示がおかしくなる ※2018/01/28追記
参照元 たくじろう.net
Simplicity2の2.1.6から、プラグインなしでSimplicityの機能でソースコードを表示できるようになっていました。
機能が競合するため、SyntaxHighlighter Evolveの機能で装飾に使われていたspanが表示されてしまっていたのですね。
私も参照元のたくじろうさん同様、SyntaxHighlighter Evolveのバグか何かだと思っていました。
対策としては、SyntaxHighlighter Evolveを削除するか、Simplicityのソースコード表示をオフにするかです。
私はデザインの再設定が煩わしかったため、Simplicityのほうをオフにしました。
コメント