LoginSignup
2
3

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-10-09

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

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

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

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

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

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

結果は私のブログを御覧ください↓↓
https://www.sirloin-nagurigaki.net/

追記

コメントで教えていただいたのですが、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 より引用

2
3
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3