【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】Webサーバー「Unicorn」の基本情報と実装方法
# はじめに Railsアプリを本番環境で稼働させるには、クライアントからのリクエストを捌くWebサーバーを導入する必要があります。WebサーバーはクライアントからのリクエストをRailsアプリに伝達し、Railsアプリで処理されたレスポンスをク [...]
2021年4月15日 12:17
【Rails】デプロイツール「Capistrano」の基本情報と実装方法
# はじめに アプリを本番環境にアップロードして誰でもアクセスできる状態にすることをデプロイと言います。デプロイで行うべきことは多岐にわたります。Railsアプリの場合で言えば、本番環境にアップロードすることはもちろんですが、Gemのインストール [...]
2021年4月14日 9:56
【Rails】Webpackerの基本情報と実装方法
# はじめに Rails 6からWebpackerが正式採用されました。Rails 5ではオプションで追加することができたWebpackerですが、Rails 6からは普通にアプリを作成するだけでWebpackerがインストールされ、必要な設定も [...]
2021年4月12日 14:36
【Rails】アセットパイプライン(Sprockets)の基本情報と実装方法
# はじめに Ruby on Railsにはアセットパイプラインという機能があります。アセットパイプラインは画像、CSS、JavaScriptといったアセットファイルを連結/圧縮することでRailsアプリを高速化します。また、より高級な言語で書か [...]
2021年4月11日 14:08
【Rails】Turbolinksの基本情報と実装方法
# はじめに Ruby on Railsにはページの遷移を高速化するTurbolinksという機能があります。Turbolinksは優れたJavaScriptライブラリですが、Rails 5からは標準で有効化されているため、Turbolinksを [...]
2021年4月10日 17:59