reveal.js + markdown 制作幻灯片

xzzzzzhao

已于 2022-10-02 13:19:22 修改

阅读量1k

点赞数

分类专栏： reveal.js学习文章标签：前端

于 2022-09-21 08:30:43 首次发布

本文链接：https://blog.csdn.net/qq_45682183/article/details/126956284

版权

reveal.js学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

reveal.js + markdown 制作幻灯片——0

在这里插入图片描述

reveal.js是一款通过利用HTML快速创建演示文稿，并且具有很多功能：垂直，水平幻灯片；支持Markdown，LaTex；演讲者注释；可插入代码片段；可选用图片，视频等作为幻灯片背景；可导出为PDF；以及有多种插件选择。

本文为快速上手reveal.js，通过引用外部Markdown文件编写幻灯片

1. 下载reveal.js

安装Node.js：https://nodejs.org/en/ （其中npm的配置可直接搜索，很多教程）
这里下载最新版reveal.js
然后打开reveal.js文件夹
终端切换到reveal.js项目根目录下，键入

npm install

完成后终端键入

npm start

在链接中可查看幻灯片：http://localhost:8000/

2. 基本使用

修改index.html中<body>后面：

	<body>
		<div class="reveal">
			<div class="slides">
				<section data-markdown="main.md"
						 	data-transition="convex"
							data-separator="^\r?\n----\r?\n$"
							data-separator-vertical="^\r?\n--\r?\n$"
							data-separator-notes="^Note:"
         					data-charset="utf-8">
				</section>
			</div>			
		</div>

其中，data-separator定义横向幻灯：这里是空行+----+空行控制幻灯片分页。data-separator-vertical定义纵向幻灯片分页方式：这里是空行+--+空行

公式方面，<body>后相应添加

<script src="plugin/math/math.js"></script>

并在最后plugsin里添加RevealMath.KaTex

plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealMath.KaTeX ]
			});

插入代码

markdown语法：行内代码使用反引号包裹，代码块使用三个反引号```

语法高亮配置：
通过在index.heml中，对下面的配置选项修改即可

<link rel="stylesheet" href="plugin/highlight/monokai.css">
<script src="plugin/highlight/highlight.js"></script>
<script>
  Reveal.initialize({
    plugins: [ RevealHighlight ]
  });
</script>

在 reveal.js 文件夹下新建 slides.md，里面Markdown语法写幻灯片即可
终端打开项目根目录键入npm start，在http://localhost:8000/中查看幻灯片

3. 主题与过渡动画

index.html中的<head>部分定义theme，例如这里是默认的black.css：

<link rel="stylesheet" href="dist/theme/black.css">

基本类型参考官网给出的有：

Name	Effect
black	Black background, white text, blue links (default)
white	White background, black text, blue links
league	Gray background, white text, blue links
beige	Beige background, dark text, brown links
sky	Blue background, thin dark text, blue links
night	Black background, thick white text, orange links
serif	Cappuccino background, gray text, brown links
simple	White background, black text, blue links
solarized	Cream-colored background, dark green text, blue links
blood	Dark background, thick white text, red links
moon	Dark blue background, thick grey text, blue links

过渡动画（transition）在<body>中<div class="slides">后定义：

<section data-markdown="main.md"
						 	data-transition="convex"
							...>

官网给出的基本过渡样式有：

Name	Effect
none	Switch backgrounds instantly
fade	Cross fade — default for background transitions
slide	Slide between backgrounds — default for slide transitions
convex	Slide at a convex angle
concave	Slide at a concave angle
zoom	Scale the incoming slide up so it grows in from the center of the screen