SyntaxHighlighter Evolvedのインストール


記事のコード部分に色をつけれる、WordPressのプラグイン「SyntaxHighlighter Evolved」をインストールしたので、使い方とカスタマイズについて残しておきます。

1.使い方

HTMLコードを載せたい場合は、コードを[html]と[/html]でくくります。
そうすると下記の用に表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>テスト</title>
</head>
<body>
テスト
</body>
</html>

他にも、PHPなどの各種プログラム言語や、css、単なるテキストの場合のplainなど多数用意されています。
対応しているコード一覧

2.カスタマイズ

1行ずつ交互に背景色を変える

まずは、変えたいテーマのcssを開きます。
cssは「wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/」以下にあります。
「Default」のテーマを使用している場合は、「shThemeDefault.css」となります。
バージョンによって、行は変わってくるでしょうが、私がインストールしたバージョンでは20行目からでした。

元のcss

.syntaxhighlighter .line.alt1 {
  background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: white !important;
}

 

変更後のcss

.syntaxhighlighter .line.alt1 {
  background-color: #ffffff !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: #f3f3f3 !important;
}

21行目は「white」のままでもよいのですが、24行目と比較しやすいように「#ffffff」に書き換えています。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です