remark-it

markdown / html 幻灯片模板，基于 remarkjs.
markdown / html slideshow template, powered by remarkjs.

简体中文 | English

Demo

中文 Demo

English Demo

为什么选择 remark-it 制作幻灯片

• 可以直接插入SVG矢量图片。当我们需要插入流程图、架构图等图示的时候，使用 visio 或 drawio 这类专业绘图软件要比PPT自带的工具好用太多，效率也更高。可惜都2020年了，PPT居然还不支持插入SVG图片。当我们需要插入 visio 或 drawio 绘制的图形时候，需要先导出为 png 图片，插入时稍有不慎就会变模糊。实际上 visio 和 drawio 都支持将绘图保存为可编辑 svg 格式，不但支持无损缩放，而且需要修改时可以直接打开 svg 文档进行编辑。
• 漂亮且一致的排版。PPT的文本框真是太难用了！要想得到合适的行间距、项目符号和缩进需要耗费大量的时间进行调整，要想保持整个PPT文档排版的一致性也是很难的事情。
• 直接使用 markdown 撰写文档。markdown 让我们可以使用很少的时间写出漂亮的文档。插入代码非常方便；支持基于 Mermaid 的绘图语法和基于 MathJax 的公式语法。
• 对版本管理更加友好。既然我们的正文和图形（svg本质是个xml文档）都是文本形式的，为什么不用 Git 将它们管起来呢？
• 便于互联网分享。需要分享的时候，只要上传到 github 就可以了。

不适合使用 remark-it 的情况

• 公司明确要求特定格式的模板。

• 帮老板做的PPT，老板还要接着改。

• 布局特别复杂的情况。

• 要求有过场动画等特效。

特性

• 全部资源支持离线访问
• Remarkjs 功能示例
• 基于 Typo.css 的中英文排版
• 基于 Pure.css 的多列布局
• 基于 Nord 的暗色、亮色主题
• 基于 Open color 的 150 个文字和背景颜色
• 基于 Vue.js 的组件库
• 基于 Mermaid 的 Markdown 图表
• 基于 pangu.js 的自动中英文混排。

安装

将项目整体 Clone 至本地，直接编辑 index.html 即可。

使用

双击 index.html 即可进行幻灯片演示。

License

MIT