MDBook 演示预处理器

用于将 MDBook 作为演示文稿幻灯片的预处理器。

本项目的目标是允许编写一个 MDBook，既可以用作演示文稿，也可以用作 MDBook 风格的网站。

查看操作示例 这里，该示例的源代码位于示例目录中。

用法

首先，您需要通过运行以下命令来安装预处理器。

cargo install mdbook-presentation-preprocessor

接下来，您需要将预处理器添加到您的 book.toml

[book]
authors = ["Your Name"]
multilingual = false
src = "src"
title = "An Interesting Thing"
[output.html]

[preprocessor.presentation-preprocessor]

现在，您可以自由地使用以下语法来标记书籍的某些部分为仅网页或仅演示。

# Header for the Page
$web-only$
This content should only be displayed when the page
is in web presentation mode
$web-only-end$

$slides-only$
This content should only be displayed when the page
is in slide presentation mode
$slides-only-end$
$notes$
This content will always print to the console
when this page is loaded. This can be useful
when you break the dev-tools into its own window
and keep that on presenter facing screen
$notes-end$

要切换到幻灯片和网页，您可以按 alt+p。

当前的局限性是，您无法有条件地扩展项目符号或编号列表。相反，它将在第一个列表下方创建一个第二个列表。

由于 MDBook 不支持从 / 路由进行分页，如果在演示模式下处于 /，则将自动重新加载导航列表中的第一项页面。

工作原理

预处理器执行两项操作，首先用具有相同内容的 HTML 注释替换所有指令。

<!-- slides-only-->

# Slides only information
- is
- found
- here

<!-- slides-only-end-->

<!--web-only-->

# Web only information
Would be found here

<!--web-only-end-->

<!--notes
Would be found here
-->

由于内联 HTML 仍然是有效的 Markdown，因此不应影响您书籍的其余部分渲染。

它还在每个页面上插入一些 css 作为 js。

js 做了几件事，维护一个新的 localStorage 变量 presentation_mode。值 1 用于网页，值为 0 用于演示。它还遍历 DOM，包括注释，为幻灯片/网页项添加新类，并通过 console.log 打印注释。这将使上述内容看起来像这样

<!-- slides-only-->
<h1 class="presentation-only">Slides only information</h1>
<ul class="presentation-only">
    <li>is</li>
    <li>found</li>
    <li>here</li>
</ul>
<!-- slides-only-end-->
<!--web-only-->
<h1 class="article-content">Web only information</h1>
<p class="article-content">Would be found here</p>
<!--web-only-end-->
<!--notes
Would be found here
-->

它还将这些项目更新为具有另一个类，以指示 presentation_mode 是 Web 还是 Slides。

并为 alt+p 快捷键添加了一个事件监听器。

根据 presentation_mode 的值，它将更新所有包装项目，使其具有额外的类 presenting 或 not-presenting。CSS 将设置任何 .article-content.presenting 或 .presentation-only.not-presenting 的项目的 display: hidden; 属性为隐藏。

除此之外，还有一个计时器可用。默认情况下，计时器设置为运行 45 分钟，并将大部分隐藏在页面右上角，当鼠标悬停时弹出。边框将从黑色开始，然后逐渐变为黄色、橙色，然后是红色，直到结束时间临近。要与此计时器交互，有一些热键需要了解。

结束时间和长度存储在 localStorage 中，这意味着在同一个浏览器中，您应该期望与之前相同的演示长度。

贡献

如果您有兴趣贡献，我将很高兴得到帮助

如果您发现了一个错误，请创建一个问题！

如果您想修改源代码，请考虑以下内容

• 在 ./presentationHider.ts 文件中，您应该编辑任何 JavaScript 代码
  • 要更新实际的 JavaScript，请运行以下命令：
• 运行 tsc --outFile ./src/presentationHider.js
  • 在 ./presentationHider.scss 文件中，您应该编辑任何 CSS 代码
  • 要更新实际的 CSS，请运行您选择的 Sass 编译器来更新 ./src/presentationHider.css
    • 我使用 rsass，以下为命令：./rsass.presentationHider> ./src/rsass.css
• 在编辑任何 Rust 功能时，请将逻辑保留在 impl Preprocessor 块之外，以便代码可以测试

参考 API 文档