【WordPress】SyntaxHighlighterをCSSでお好みにカスタマイズ

WordPressでブログを書いているとたまにソースコードを記述することがあります。そんな時、きれいにかっこよくコードを表示したいですよね。

というわけでWordPressプラグインのSyntaxHighlighterを導入してみました。ただ、単にプラグインを導入するだけでは好みのスタイルにならなかったのでCSSをいじってさらにカスタマイズしてみました。

スポンサーリンク

まずはプラグインのインストール

インストール自体は他のプラグイン同様とても簡単で、WordPress管理画面からプラグイン検索ボックスに「syntaxhighlighter」と入力。表示された「SyntaxHighlighter Evolved」をインストールします。

この時点で、プラグインの編集から7つのスタイルを選択できます。ここでは Midnight を選びました。

しかし見た目が気に入らない

うわっ…コードの余白、狭すぎ…?

1
2
a = 100;
b = 50;

かっこいいサイトを参考にする

ちょうどSyntaxHighlighterをかっこよくカスタマイズしているサイトがあったのでまるパクり参考にします。

WordPress管理画面 > 外観 > テーマの編集 から、style.cssを編集。
下記のコードを適当に追加。

.syntaxhighlighter {
  font-size: 0.8em !important;
  padding: 20px;
  border-radius: 3px;
}

あるいは、 wp-content > plugins > syntaxhighliter > syntaxhighliter2 styles > shThemeDefault.css を直接編集しても良いかもしれません。

かっこいいサイトと同じくらいかっこよくなった

余白にゆとりが出て、いい感じです。

a = 100;
b = 50;

ちなみに、JetpackでMarkdownを有効にしておくと捗る

この記事の途中で出て来るコードは下記のようにマークダウンで書いています。

```javascript
a = 100;
b = 50;
```

さらにちなみに、上記のMarkdown記法をコードとして表示するためには↓のように書きました。

````
```javascript
a = 100;
b = 50;
```
````

さらにさらにちなみに…

`````
````
```javascript
a = 100;
b = 50;
```
````
`````

このように書くことでバッククオートを使った複数行コードをエスケープできるんですね。知りませんでした。

まとめ

WordPressプラグインのSyntaxHighlighterは、style.cssにてsyntaxhighlighterクラスを定義することでデフォルトのスタイルが上書き(カスケード)され、好みのスタイルに変更することができる。もちろん、デフォルトに戻したかったらstyle.cssに追記したsyntaxhighlighterクラスを削除やコメントアウトなどで無効にする。

この記事が気に入ったら
カリノバにいいね ! しよう

by

コメントを残す

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