【Rails】コードをシンタックスハイライトする『rouge』のカラーテーマ一覧と指定方法

2020年9月8日 8:29

はじめに

Markdownで書いた記事のコード部分をシンタックスハイライトする『rouge』というGemがあります。当ブログでも使っており、導入や使い方については以前記事にしました。

『rouge』にはいくつかのカラーテーマが用意されています。カラーテーマ一覧はこちらで確認できるのですが、実はここに載っていないカラーテーマもあったりします。

また、カラーテーマの指定方法(書き方)がちょっと特殊な場合もあるので、各カラーテーマの指定方法とセットでまとめてみようと思います。

なお、カラーテーマの指定方法はapp/assets/stylesheets/_rouge.scss.erbを作成してそこにコードを貼り付けてください。

カラーテーマ一覧

用意されているカラーテーマは全部で15種類あります。カラーテーマによってはDarkModeLightModeが指定できたりするのですが、見た目に変化はなかったので用途は不明です。

Base16

サンプル

指定方法

# Normal
<%= Rouge::Themes::Base16.render(:scope => '.highlight') %>

# DarkMode
<%= Rouge::Themes::Base16.mode(:dark).render(:scope => '.highlight') %>

# LightMode
<%= Rouge::Themes::Base16.mode(:light).render(:scope => '.highlight') %>

Base16.Monokai

サンプル

指定方法

# Normal
<%= Rouge::Themes::Base16::Monokai.render(:scope => '.highlight') %>

# DarkMode
<%= Rouge::Themes::Base16::Monokai.mode(:dark).render(:scope => '.highlight') %>

# LightMode
<%= Rouge::Themes::Base16::Monokai.mode(:light).render(:scope => '.highlight') %>

Base16.Solarized

サンプル

指定方法

# Normal
<%= Rouge::Themes::Base16::Solarized.render(:scope => '.highlight') %>

# DarkMode
<%= Rouge::Themes::Base16::Solarized.mode(:dark).render(:scope => '.highlight') %>

# LightMode
<%= Rouge::Themes::Base16::Solarized.mode(:light).render(:scope => '.highlight') %>

BlackWhiteTheme

サンプル

指定方法

# Normal
<%= Rouge::Themes::BlackWhiteTheme.render(:scope => '.highlight') %>

Colorful

サンプル

指定方法

# Normal
<%= Rouge::Themes::Colorful.render(:scope => '.highlight') %>

Github

サンプル

指定方法

# Normal
<%= Rouge::Themes::Github.render(:scope => '.highlight') %>

Gruvbox

サンプル

指定方法

# Normal
<%= Rouge::Themes::Gruvbox.render(:scope => '.highlight') %>

IgorPro

サンプル

指定方法

# Normal
<%= Rouge::Themes::IgorPro.render(:scope => '.highlight') %>

Magritte

サンプル

指定方法

# Normal
<%= Rouge::Themes::Magritte.render(:scope => '.highlight') %>

Molokai

サンプル

指定方法

# Normal
<%= Rouge::Themes::Molokai.render(:scope => '.highlight') %>

Monokai

サンプル

指定方法

# Normal
<%= Rouge::Themes::Monokai.render(:scope => '.highlight') %>

MonokaiSublime

サンプル

指定方法

# Normal
<%= Rouge::Themes::MonokaiSublime.render(:scope => '.highlight') %>

Pastie

サンプル

指定方法

# Normal
<%= Rouge::Themes::Pastie.render(:scope => '.highlight') %>

ThankfulEyes

サンプル

指定方法

# Normal
<%= Rouge::Themes::ThankfulEyes.render(:scope => '.highlight') %>

Tulip

サンプル

指定方法

# Normal
<%= Rouge::Themes::Tulip.render(:scope => '.highlight') %>

まとめ

シンタックスハイライトはコードの可読性が格段に向上するので、技術系ブログなどを運営されている方はマストで導入してほしいですね。シンタックスハイライトのないコードだと読む気になりません。

『rouge』のカラーテーマを探していたり、指定方法がわからなくて困っていたという方は参考にしていただければと思います。

関連記事

【Rails】ダウンロードしたフリーフォントをWebpackerを使って導入する方法
# はじめに Webサイトのデザインを彩るひとつの要素にフォントの種類があります。Google Fontsの登場により、様々なフォントが手軽に導入できるようになりました。しかし、世の中にはGoogle Fontsが提供するフォント以外にもたくさん [...]
2021年10月16日 13:26
【Rails】mimemagicに依存しているRailsアプリでbundle installコマンドが失敗する事象の対処法
# はじめに Railsアプリで`bundle install`コマンドを実行しようとしたところ、以下のエラーメッセージが出力されコマンドに失敗しました。 ``` Your bundle is locked to mimemagic (0 [...]
2021年10月14日 14:44
【Rails】macOSのアップデート後にrailsコマンドが失敗する事象の対処法
# はじめに 久しぶりにRailsアプリに手を入れようと思い、`rails server`コマンドを実行してRailsサーバーを立ち上げようとしたところ、エラーが出て起動に失敗してしまいました。 前回までの間にしたことの中で思い当たることと [...]
2021年10月14日 12:11
【Rails】Railsアプリのデバッグ《マルチデバイス篇》
# はじめに 近年のWebアプリはレスポンシブ対応が当たり前になっています。最低でもPCとスマートフォンに対応したデザイン、ときにはその中間のタブレットに対応したデザインなんかも作成する必要があります。 Webアプリの開発はPCを使って行う [...]
2021年5月23日 13:02
【Rails】Railsアプリのデバッグ《Better Errors篇》
# はじめに Railsアプリの開発中になんらかのエラーが発生すると、デフォルトでは以下のような画面が表示されます(画像をクリックすると拡大します)。 <a class="gallery" data-group="gallery" href [...]
2021年5月22日 19:42