オススメ記事
SyntaxHighlighterカスタマイズ 行間を広く、先頭行と最終行に余白を付加

オクダヒロキ
リツアンSTCでプログラマをやっている、オクダヒロキです。

プログラミング系のブログでよく使われる、WordPressのプライン「SyntaxHighlighter」。技術系の記事を書くので僕のブログでも使用していますが、実は以下のような状態でした。

SyntaxHighlighterの問題点
  1. コードの行間が狭い
  2. 開始行と終了行に余白がない

もちろん読めなくはないけど、詰まり過ぎて息苦しい感じじゃないですか?

まあこの辺は多分に好みが出ますが、僕には合わず修正したいなと思っていたんですよ。でもプラグイン自体に上記の部分を変更する箇所は無かったため、cssを修正して問題に対応してみました。

今回はその内容を記事としてまとめています。同様の問題で悩んでいる方は一度試してみてください。

外観⇒カスタマイズ⇒追加CSS に追加する

まずは 外観⇒カスタマイズ⇒追加CSS にcssを追加する方法で実施します。この方法の良いところは、既存のcssファイルを壊すリスクが無く編集できる点です。特別な理由がない限りはこの方法を採用しましょう。

行間を広くする

追加CSSに以下を追加してください。

.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 {
  line-height: 1.3em !important;
}

 

修正後、以下のように変更されます。

1修正前

2修正後

ちょこっとだけ余裕が出た感じです。

開始行と終了行に余白を設ける

追加CSSに以下を追加してください。

.syntaxhighlighter {
  padding: 1em 0 1em 0 !important;
}

 

 

修正後、以下のように変更されます。

1修正前

2修正後

たいぶ見やすくなりましたね。

cssファイルを直接編集する

次にcssファイルを直接する編集方法も掲載しますが、この方法はあまりオススメできません。プラグインがアップデートされた場合、編集したファイルごと上書きされる可能性がありるし、修正ミスで他の要素を壊すリスクがあるからです。

必ずバックアップを取るように心がけましょう。

編集ファイル
/public_html/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css

 

行間を広くする

1修正前
.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 {
  -moz-border-radius: 0 0 0 0 !important;
  -webkit-border-radius: 0 0 0 0 !important;
  background: none !important;
  border: 0 !important;
  bottom: auto !important;
  float: none !important;
  height: auto !important;
  left: auto !important;
  line-height: 1.1em !important;
  margin: 0 !important;
  outline: 0 !important;
 (中略)
}
2修正後
.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 {
  -moz-border-radius: 0 0 0 0 !important;
  -webkit-border-radius: 0 0 0 0 !important;
  background: none !important;
  border: 0 !important;
  bottom: auto !important;
  float: none !important;
  height: auto !important;
  left: auto !important;
  line-height: 1.3em !important; /* 1.1em ⇒ 1.3em */
  margin: 0 !important;
  outline: 0 !important;
 (中略)
}

 

開始行と終了行に余白を設ける

1css修正前
.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  overflow-y: hidden !important;
  font-size: 1em !important;
}
2修正後
.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  overflow-y: hidden !important;
  font-size: 1em !important;
  padding: 1em 0 1em 0 !important; /* 追加 */
}

 

最後に:ブログは自分好みのデザインにカスタマイズしよう

今回はSyntaxHighlighterのcssをカスタマイズして、行間を広く、先頭行と最終行に余白を付加する方法をまとめました。

WordPressのテーマやプラグインは元々デザインが優れているものが多いですが、中にはこういった形で手を加えることも必要です。特にデザインともなると、cssの知識は必要不可欠。

僕はバックエンド中心のエンジニアということもあり、フロントエンドを触る機会は少ないですが、基本的な知識はあるので、ちょっとした変更ならできるレベルです。

業務経験がこういう場面でも活きてくるのは、エンジニアとして嬉しいところですね。

挫折させないRuby動画講座「Skill Hacks」

プログラミングを独学で習得する際に障壁となるのが、「環境構築」と「質問できない環境」です。予備知識もなくプログラミング言語を学習すると、この2つで9割近くの人が挫折します。

その点、プログラミングの動画講座「Skill Hacks」はこの問題点を解消。

Skill Hacksの特徴
  • AWSを使用して環境構築は一瞬で完了
  • LINE@で質問し放題

また、本講座で使用するRubyは未経験者でも比較的覚えやすく、日本語のドキュメントも充実しているプログラミング言語です。エンジニアとして働く前に一度講座を受けてみては?

「Skill Hacks」への申し込みは下記からどうぞ▼

Skill Hacks

おすすめの記事