Asciidoctor-RevealJS自定义CSS配置失效问题求助

问题原因 #

Asciidoctor Reveal.js 5.x版本对主题配置逻辑做了调整：

• 原有的stylesheet属性仅用于追加额外自定义样式，不再负责替换reveal.js的默认主题
• 替换默认主题需要使用专门的revealjs_theme属性

解决方案 #

1. 完全替换默认主题为自定义CSS #

如果你想替换掉默认的black.css，直接配置revealjs_theme属性指向你的自定义CSS文件：

const options = {
  safe: 'unsafe',
  backend: 'revealjs',
  attributes: { 
    'revealjs_theme': 'custom.css' 
  }
};
asciidoctor.convertFile(file.path, options);

2. 保留默认主题，追加自定义样式 #

如果只是想在默认主题基础上添加额外样式，同时配置revealjs_theme（可选，不配置则沿用默认black主题）和stylesheet：

const options = {
  safe: 'unsafe',
  backend: 'revealjs',
  attributes: { 
    'revealjs_theme': 'white', // 指定内置主题，比如white/league/beige等
    'stylesheet': 'custom.css' // 追加自定义样式
  }
};
asciidoctor.convertFile(file.path, options);

3. 切换内置主题 #

如果不需要自定义CSS，只想切换reveal.js的内置主题，直接给revealjs_theme传入主题名称即可：

const options = {
  safe: 'unsafe',
  backend: 'revealjs',
  attributes: { 
    'revealjs_theme': 'league' 
  }
};
asciidoctor.convertFile(file.path, options);

验证效果 #

修改配置后重新生成HTML，会看到主题链接变为你指定的路径：

<link rel="stylesheet" href="custom.css" id="theme">

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