如何让Asciidoctor渲染带颜色的代码块？

你用npm安装的Asciidoctor 2.2.6生成网页时，代码块只显示纯文本没有彩色高亮——虽然已经在命令和文档里指定了source-highlighter=rouge，也设置了样式，但本质是生成的HTML里没加载Rouge对应的CSS文件，所以没有样式效果。

下面是具体解决步骤：

1. 生成Rouge样式CSS文件 #

首先得生成对应样式的CSS，用Rouge的命令行工具就能搞定：

rougify style monokai > rouge-monokai.css

这里的monokai是你文档里设置的:rouge-style，如果要换其他样式，把monokai换成对应的名称就行，比如github、solarized-dark这些都可以。

如果你的环境里没有rougify命令，先装Ruby版的Rouge（npm版Asciidoctor依赖它处理高亮逻辑）：

gem install rouge

2. 在生成HTML时引入CSS #

有两种简单的方式把CSS加到生成的网页里：

方式一：在文档头部配置样式路径 #

打开你的README.adoc，在最顶部的属性块里加上样式文件的配置：

= 你的文档标题
:source-highlighter: rouge
:rouge-style: monokai
:stylesheet: rouge-monokai.css

== Introduction
# 后面的内容...

这样生成HTML时，会自动在页面头部插入这个CSS的引用，注意要把生成的rouge-monokai.css和最终的HTML文件放在同一目录下。

方式二：生成命令里直接指定样式 #

执行Asciidoctor命令时，额外加一个stylesheet参数：

asciidoctor -b xhtml5 -a source-highlighter=rouge -a stylesheet=rouge-monokai.css .\README.adoc

3. 优化文档配置 #

建议把:source-highlighter: rouge和:rouge-style: monokai统一放在文档最顶部的属性块里，不要重复设置，避免出现冲突。

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