如何用Redcarpet与Kramdown渲染代码块而非HTML标签？

你的问题核心是重复解析导致HTML结构被破坏：Redcarpet已经能将围栏代码块转换成<pre><code>结构，但后续用Kramdown处理时，错误地把HTML内容当成普通文本转义，最终变成了行内<code>标签。以下是两种可行的解决方式：

方式1：单独使用Redcarpet（推荐） #

直接用Redcarpet处理原始Markdown，它原生支持生成<pre><code>结构：

markdown = Redcarpet::Markdown.new(Redcarpet::Render::HTML, fenced_code_blocks: true)
result = markdown.render("```hello```")
puts result
# 输出：<pre><code>hello</code></pre>

只要UI端的CSS给<pre>和<code>设置灰色背景等样式（比如background-color: #f6f8fa; padding: 1em; border-radius: 6px;），就能渲染出类似Stack Overflow的灰色代码块。

方式2：必须保留Kramdown流程时的调整 #

如果项目要求必须使用Kramdown，有两种子方案：

子方案A：直接用Kramdown处理原始Markdown #

Kramdown支持GFM（GitHub Flavored Markdown），原生识别围栏代码块：

result = Kramdown::Document.new("```hello```", input: 'GFM').to_html
puts result
# 输出：<pre class="language-"><code>hello</code></pre>

生成的结构和Redcarpet一致，同样能配合UI的CSS实现灰色代码块效果。

子方案B：Redcarpet处理后交给Kramdown保留HTML结构 #

如果必须先经过Redcarpet，需指定Kramdown以HTML模式解析输入，避免转义已有结构：

markdown = Redcarpet::Markdown.new(Redcarpet::Render::HTML, fenced_code_blocks: true)
redcarpet_output = markdown.render("```hello```")
kramdown_doc = Kramdown::Document.new(redcarpet_output, input: 'html')
result = kramdown_doc.to_html
puts result
# 输出：<pre><code>hello</code></pre>

注意：灰色代码块的视觉效果依赖UI端的CSS样式，只要你输出正确的<pre><code>结构，无需修改UI的HTML文件即可实现目标效果。

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