Qiita
CSS
tips
備忘録

Qiita以外のサイトでもQiitaっぽくソースコードを表示したい

Qiitaのソースコードのシンタックスハイライトってすごくみやすいですよね。
メソッド・変数・クラス名によって文字色が決められていて、黒系の背景で目に優しい…。

私は個人でブログをやっていまして、そこでも技術系の記事を書いてるんですが、

いかんせんソースコードの表示の仕方がイマイチだったんでQiitaのスタイルを少し拝借しました。

(Chromeのデベロッパーツールを使って背景色や文字色を舐め回すように見漁りました)

そして自分のブログに適用させたスタイルがコチラ↓↓

style.css
/*ここにソースコード表示部分のセレクタ*/ {
  background-color: #364549;
  color: #e3e3e3;
}

結果は私のブログを御覧ください。私のプロフィールから飛べます。

追記

コメントで教えていただいたのですが、QiitaではRouge(ルージュ)というシンタックスハイライトを利用しています。

シンタックスハイライトには Rouge を利用しており、下記の対応言語リストは上記サイトに準ずるもの>ですが、最新の状況に対応していない可能性もありますのでご了承ください。(編集リクエストをいただけ>れば幸いです :wink: )

https://qiita.com/Qiita/items/e84f5aad7757afce82ba より引用

Rougeでは256色の色を用いることで100種類のプログラミング言語に対応しています。

Rouge is a pure-ruby syntax highlighter. It can highlight 100 different languages, and output HTML or ANSI 256-color text.

https://github.com/jneen/rouge より引用