hexo+reveal实现slide

2021-03-02

字数统计: 847 | 阅读时长≈ 3 分钟

hexo+reveal

安装和配置

今天终于搞成了用reveal.js在博客里显示ppt的效果。感谢做模块的大佬，以至于安装过程还挺简单的。步骤如下：

安装：命令行进入博客目录，输入npm i hexo-generator-slidehtml
安装好以后，一个按格式（格式见后文）写好的markdown文件就会被渲染成slide格式的html网页了，需要访问的时候，在博客的链接后面加slide.html即可，比如某个博客的链接是http://www.clo5de.info/hexo-generator-slidehtml/2019/04/03/nonTitleMerge/，那么它对应的slide链接就是http://www.clo5de.info/hexo-generator-slidehtml/2019/04/03/nonTitleMerge/slide.html。
但是这样安装好的没法渲染公式，因此要进入\blog\node_modules\hexo-generator-slidehtml\layout目录，打开post-slide.ejs文件，添加<script src="https://cdn.bootcss.com/reveal.js/3.4.1/plugin/math/math.js"></script>（和其他script放一起就行），并在Reveal.initialize 代码块中添加一行plugins: [ RevealMath ],注意这一行最后有个逗号不要忘了。
关于math的设置也还有其他可选项，可以参考官网
此外我在官网还下载了reveal.js的完整内容，并把其中的plugin文件夹整个复制到了\blog\node_modules\hexo-generator-slidehtml\layout目录下；而刚才那个post-slide.ejs的Reveal.initialize 代码块中的dependencies也增加了以下两行：

{ src: 'https://cdn.bootcss.com/reveal.js/3.4.1/plugin/math/math.esm.js' },

{ src: 'https://cdn.bootcss.com/reveal.js/3.4.1/plugin/math/math.js' },

不过这一步的操作按理说是不需要的，只是我一开始怎么也没法刷新出公式，猜测可能和网页缓存等有关。
按官网的说法，如果要写markdown行内公式，就需要把内容放到如下代码所示的符号中间：
1
`$$公式内容$$`
If you want to include math inside of a presentation written in Markdown you need to wrap the formula in backticks. This prevents syntax conflicts between LaTeX and Markdown
不过根据我自己的使用，markdown语法的公式就可以正常显示了，不需要按上面的格式来写。

如果写latex公式，就放到<section></section>中间，例如：

<section>
  <h2>The Lorenz Equations</h2>
  \[\begin{aligned}
  \dot{x} & = \sigma(y-x) \\
  \dot{y} & = \rho x - y - xz \\
  \dot{z} & = -\beta z + xy
  \end{aligned} \]
</section>

这个公式的展示效果在官网上可以看到。

在搞了各种配置之后公式如果还没渲染，就等一等，可能和缓存有关。
对于需要制作成slide的markdown文件，只需要在原先写标题日期分类和tags等内容的那个地方增加一个字段：slidehtml: true，这个也可以写进hexo new的模板，这样方便一些。markdown文件中要有一行（去掉#，这里加#是为了避免接下来直接渲染slide），整个文件内容会以此分为两部分，在这一行前面的，就会展示在博客内容中，而这一行后面的，则会出现在对应的slide中。例如本篇博客的内容就到此结束了，而如果在网址后面添加slide.html，则会看到我复制别人的slide内容。

hexo+reveal

安装和配置

Reference