はじめに
Markdownで書いた記事のコード部分をシンタックスハイライトする『rouge』というGemがあります。当ブログでも使っており、導入や使い方については以前記事にしました。
『rouge』にはいくつかのカラーテーマが用意されています。カラーテーマ一覧はこちらで確認できるのですが、実はここに載っていないカラーテーマもあったりします。
また、カラーテーマの指定方法（書き方）がちょっと特殊な場合もあるので、各カラーテーマの指定方法とセットでまとめてみようと思います。
なお、カラーテーマの指定方法はapp/assets/stylesheets/_rouge.scss.erbを作成してそこにコードを貼り付けてください。
カラーテーマ一覧
用意されているカラーテーマは全部で15種類あります。カラーテーマによってはDarkModeとLightModeが指定できたりするのですが、見た目に変化はなかったので用途は不明です。
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』のカラーテーマを探していたり、指定方法がわからなくて困っていたという方は参考にしていただければと思います。
【Markdown拡張記法】テキストを書くだけでフローチャートなどが作図できる「Mermaid」の導入方法
DeepLのページ全体翻訳を無料で試す方法
SSH設定済みのリモートサーバーに別のPCからSSH接続する方法
【Rails】M1チップ搭載MacでRuby on Railsの開発環境構築
【Rails】Rakeタスクの基本情報と作成・実行方法
【Rails】モデルに外部キーを設定する方法とよく起こるエラー内容について
【Rails】Capybaraのfill_inメソッドを実行すると「既存レコードの内容＋指定した内容」がセットされる事象の原因と対処【RSpec】
【Rails】GitHubのセキュリティアラートで発見された脆弱性を解消する方法
【Rails】忘れがちなルーティングの書き方を総復習
MySQL Workbenchでリモートサーバー上のMySQLにSSH接続する方法【接続できない場合の対処法あり】
【CSS+JS】モーダルウィンドウを表示しその中にYouTube動画を動的に埋め込む
【CSS+JS】背景画像の視差効果（パララックス）を実装する方法
【Rails】Webサーバー「Unicorn」の基本情報と実装方法
【Rails】Action Textの基本情報と実装方法
【Rails】bundle updateでGemがアップデートされない原因
【Laravel】Amazon S3へのアップロードが「403 Access Denied」で失敗する原因と対処方法