Rails v6集成Rouge语法高亮后CSS样式未生效如何解决

问题根因 #

你当前仅引入了Rouge的基础库配置，未加载对应的语法高亮主题样式。Rouge生成的.k（关键字）、.nf（函数名）、.nb（内置对象）、.s1（字符串）等类是语法标记类，必须搭配对应主题的CSS规则才能渲染出高亮效果，@import "rouge"本身不会自动加载主题样式。

修复步骤 #

• 第一步：生成主题CSS文件
  Rouge内置了数十种高亮主题，可通过官方命令行工具直接生成对应主题的CSS文件，示例生成github主题：

rougify style github > app/assets/stylesheets/rouge_theme.css

如需查看所有可用主题，执行命令：rougify help style，将上述命令中的github替换为目标主题名即可。

• 第二步：修改资产引入配置
  打开app/assets/stylesheets/application.css，将原来的@import "rouge";替换为：

@import "rouge_theme";

如果是Rails 7+使用资产管道或CSSbundling方案，需确认rouge_theme.css已经加入资产加载路径。

• 第三步：校验类名匹配
  你当前辅助方法中已经配置了formatter = Rouge::Formatters::HTML.new(css_class: 'highlight')，Rouge生成的主题样式默认绑定.highlight父类，无需额外修改。
• 第四步：重启服务清空缓存
  执行以下命令清理旧资产缓存后重启Rails服务即可：

rails assets:clobber
rails s

可选简化方案 #

如果你安装了rouge-rails适配gem，无需手动生成CSS文件，直接在application.scss中引入对应主题即可：

@import "rouge/themes/github";

内容的提问来源于stack exchange，提问作者David Nelson