
2021-01-17
Markdownで書いた記事のコード部分をシンタックスハイライトする『rouge』というGemがあります。当ブログでも使っており、導入や使い方については以前記事にしました。
『rouge』にはいくつかのカラーテーマが用意されています。カラーテーマ一覧はこちらで確認できるのですが、実はここに載っていないカラーテーマもあったりします。
また、カラーテーマの指定方法(書き方)がちょっと特殊な場合もあるので、各カラーテーマの指定方法とセットでまとめてみようと思います。
なお、カラーテーマの指定方法はapp/assets/stylesheets/_rouge.scss.erb
を作成してそこにコードを貼り付けてください。
用意されているカラーテーマは全部で15種類あります。カラーテーマによってはDarkMode
とLightMode
が指定できたりするのですが、見た目に変化はなかったので用途は不明です。
# 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') %>
# 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') %>
# 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') %>
# Normal
<%= Rouge::Themes::BlackWhiteTheme.render(:scope => '.highlight') %>
# Normal
<%= Rouge::Themes::Colorful.render(:scope => '.highlight') %>
# Normal
<%= Rouge::Themes::Github.render(:scope => '.highlight') %>
# Normal
<%= Rouge::Themes::Gruvbox.render(:scope => '.highlight') %>
# Normal
<%= Rouge::Themes::IgorPro.render(:scope => '.highlight') %>
# Normal
<%= Rouge::Themes::Magritte.render(:scope => '.highlight') %>
# Normal
<%= Rouge::Themes::Molokai.render(:scope => '.highlight') %>
# Normal
<%= Rouge::Themes::Monokai.render(:scope => '.highlight') %>
# Normal
<%= Rouge::Themes::MonokaiSublime.render(:scope => '.highlight') %>
# Normal
<%= Rouge::Themes::Pastie.render(:scope => '.highlight') %>
# Normal
<%= Rouge::Themes::ThankfulEyes.render(:scope => '.highlight') %>
# Normal
<%= Rouge::Themes::Tulip.render(:scope => '.highlight') %>
シンタックスハイライトはコードの可読性が格段に向上するので、技術系ブログなどを運営されている方はマストで導入してほしいですね。シンタックスハイライトのないコードだと読む気になりません。
『rouge』のカラーテーマを探していたり、指定方法がわからなくて困っていたという方は参考にしていただければと思います。
坂井 光太郎 (Kotaro Sakai)
東京都世田谷区在住のフリーランスエンジニア。Ruby on Rails を中心とした Web アプリ開発全般に関する技術情報をまとめています。業務に関するご依頼・ご相談、当サイトに対するご感想やメッセージはコンタクトフォームからお気軽にお問い合わせください。