使用Rouge无法实现代码高亮 求助排查问题

问题现象 #

页面源码中代码相关的HTML标签被转义为实体（如<span class="k">def</span>），浏览器仅显示纯文本，无代码高亮效果。

原因分析 #

1. HTML标签双重转义：生成的高亮HTML未被正确渲染，被Rails额外转义为文本实体，导致浏览器无法识别为HTML元素。
2. 样式作用域不匹配：CSS样式针对.highlight类容器下的元素，但当前Rouge未生成该容器，样式无法绑定到代码标签。
3. Helper加载逻辑问题：require 'rouge'放在模块内部，可能导致加载时机异常，影响Rouge功能正常运行。
4. （潜在）文章内容预转义：若article.text存储的是已转义的HTML实体，会导致Rouge处理的是转义后的文本而非原始代码。

解决方法 #

1. 修正Rouge Helper代码 #

# app/helpers/rouge_helper.rb
require 'rouge'
require 'cgi' # 用于处理可能的预转义内容

module RougeHelper
  def rouge(text, language)
    # 反转义可能存在的HTML实体，确保处理原始代码
    raw_text = CGI.unescapeHTML(text)
    # 生成带.highlight容器的HTML，匹配CSS作用域
    formatter = Rouge::Formatters::HTML.new(wrap: true)
    # 兜底处理未知语言，避免报错
    lexer = Rouge::Lexer.find(language) || Rouge::Lexers::PlainText
    formatter.format(lexer.lex(raw_text))
  end
end

2. 修正视图渲染逻辑 #

# app/views/articles/index.html.erb
<% @articles.each do |article| %>
  <p><%= article.title %></p>
  <%= raw rouge(article.text, 'ruby') %>
<% end %>

• 移除@articles. each中的多余点，确保循环语法正确；
• raw方法强制Rails不转义生成的HTML代码。

3. 确保CSS样式加载 #

1. 确认rouge.css.erb内容正确：

# app/assets/stylesheets/rouge.css.erb
<%= Rouge::Themes::Base16.mode(:light).render(scope: '.highlight') %>

2. 在application.css中引入该样式文件：

/* app/assets/stylesheets/application.css */
*= require rouge

验证步骤 #

1. 重启Rails服务器，确保代码修改生效；
2. 查看页面源码，确认代码部分生成的是如下结构：

<div class="highlight"><pre><code><span class="k">def</span> <span class="nf">test</span>
 <span class="nb">puts</span> <span class="s1">'Hello'</span>
<span class="k">end</span></code></pre></div>

3. 检查浏览器元素面板，确认.highlight下的span标签已应用对应颜色样式。

内容的提问来源于stack exchange，提问作者Vladimir Lozitskiy