WordPressでカッコいいシンタックスハイライトを導入する

Web

シンタックスハイライトとは

コードを見やすくするためのカラーリングのこと。これがあるだけで可読性が大きく上がる。

SyntaxHighlighter Evolved

SyntaxHighlighter Evolved
Easily post syntax-highlighted code to your site without having to modify the code at all. As seen on WordPress.com.

WordPressにこのプラグインを入れるだけでそこそこかっこよくなります。

が、妙にフォントだったりカラーリングだったりがダサいです。

なのでワードプレスの追加CSS機能で上書きしてしまいましょう。

Qiita風シンタックスハイライト

wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCores.cssの中身を以下のように適当に編集

どんなテーマファイルを使っていても下のコード一発できれいに表示できるはずです。

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
  margin: 0;
  font-family: "Roboto Mono", monospace;
  color: inherit;
  background-color: #364549; 
  border: none;
  border-radius: 0;
  text-align: left;
}

code {
  background-color: #eee;
  color: #333;
  font-family: "Roboto Mono", monospace;
}

ただ、Roboto Monoという別フォントを読み込んでいるのでiOSだとこれがなくて表示がダサくなってしまう場合があります。なのでGoogle FontsからRoboto Monoを読み込むように設定を変更します。

完成したもの

以下のような感じできれいに表示できていれば成功です。Roboto Monoが気に食わん!!って方は各自好きなフォントを使ってください。

コメント

タイトルとURLをコピーしました