Asciidoctor / RevealJS 默认生成的 CSS答案

【问题标题】：Asciidoctor / RevealJS default CSS generatedAsciidoctor / RevealJS 默认生成的 CSS
【发布时间】：2023-01-05 03:24:40
【问题描述】：

我正在通过 javascript API & gulp 启动 asciidoctor。

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

但是生成的 HTML 仍然会生成默认的 CSS：

<link rel="stylesheet" href="node_modules/reveal.js/dist/theme/black.css" id="theme">
  <!--This CSS is generated by the Asciidoctor reveal.js converter to further integrate AsciiDoc's existing semantic with reveal.js-->
  <style type="text/css">
    .reveal div.right {

我也尝试了很多 asciidoc 标签（ customsheet 等）但没有任何效果。

供参考：

> npx asciidoctor-revealjs --version
Asciidoctor reveal.js 5.0.0-rc.1 using Asciidoctor.js 2.2.6 (Asciidoctor 2.0.17) [https://asciidoctor.org]
Runtime Environment (node v18.2.0 on win32)
CLI version 3.5.0

谢谢你的帮助

【问题讨论】：

标签： javascript reveal.js asciidoc asciidoctor-revealjs

【解决方案1】：

您可以使用 :revealjs_theme: 配置 reveal.js 主题或使用 :revealjs_customtheme: 覆盖它。

见：https://docs.asciidoctor.org/reveal.js-converter/latest/converter/revealjs-options/

【讨论】：

我知道这个选项，但我想自定义“ascidoctor css 生成的部分”。

【解决方案2】：

正如@mogztter 回答的那样，您需要使用:revealjs_theme: 或:revealjs_customtheme:。

我知道这个选项，但我想自定义“ascidoctor css 生成的部分”。

如果我可以这么大胆，那不是你想做的。

我认为您想用自己的 CSS 自定义 RevealJS 的 CSS 提供的表示，这与自定义 Asciidoctor CSS 的目标不同。

假设您已经根据the documentation 设置了您的转换器。

还有两个额外的步骤：
创建您的自定义 CSS 文件，例如 mystyles.css：
@import "node_modules/reveal.js/dist/theme/black.css";

/* add your custom CSS styles here */
调整 @import 声明以使用您想要的 RevealJS 主题样式表。

添加您想要的样式。
在文档标题下方添加:revealjs_customtheme: mystyles.css。

现在，当您运行转换器脚本时，将加载 mystyles.css 文件。它依次加载 RevealJS 主题 CSS，然后应用您的自定义样式。您的样式可以根据需要使用 CSS 约定调整或替换 RevealJS 样式。

【讨论】：

【解决方案3】：

我终于成功地完成了我需要的事情，我无法详细说明原因，但它与第一张幻灯片中的顺序有关。

我的解决方案是在第一张幻灯片内容之后放置 :custom css: 标志。

【讨论】：