《了不起的Markdown》第五章

最新推荐文章于 2022-05-11 21:21:42 发布

VIP文章 Sinking Stone

最新推荐文章于 2022-05-11 21:21:42 发布

阅读量1.2k

点赞数 26

分类专栏：读书笔记汇总 # 《了不起的Markdown》笔记

本文链接：https://blog.csdn.net/m0_47838348/article/details/119856103

版权

第五章轻快、省力地写幻灯片——reveal.js

5.1 你好，reveal.js

reveal.js是一个使用HTML和Markdown快速创建和演示幻灯片的工具，它提供了很多实用的功能，也提供了很多第三方插件来增强效果。

reveal.js的主要功能：

可创建水平和垂直幻灯片，支持幻灯片链接，可在幻灯片之间跳转。
可使用Markdown和HTML编写内容，也支持引用独立的Markdown文件。
可使用颜色、图片、视频、网页做为背景。
可添加演讲者注释，支持一键打开。
可配置幻灯片的主题和过渡动画，有多种方案可供选择。
可在手机或平板电脑上打开和演示幻灯片。
可打印和导出PDF格式的文档。
可以安装很多实用的插件来增强幻灯片的功能和演示效果。
自由度大，可灵活定制（如果你熟悉前端开发知识的话）。
支持很多快捷键的使用，操作非常方便。

5.2 快速开始

1. 搭建reveal.js使用环境

使用reveal.js必须先安装Node.js和Git

2. 下载reveal.js

使用浏览器下载。
打开https://github.com/hakimel/reveal.js→【Clone or download】→【Download ZIP】→解压。
使用Git命令下载。

3. 查看示例

打开reveal.js文件夹，在根目录中找到index.html，然后使用VS Code打开。

<div class="reveal">
    <div class="slides">
        <!-- 每一页幻灯片都使用<section>标签包裹 -->
        <section>Slide 1</section><!-- 第一页 -->
        <section>Slide 2</section><!-- 第二页 -->
    </div>
</div>

从这段代码可以看出，在HTML中，幻灯片标记的层次结构是.reveal >.slides > section。关于section，我们可以理解为分页标签，每一张幻灯片都是使用<section>标签包裹的。双击index.html可在浏览器中打开幻灯片。

4. 创建我们的第一个幻灯片

复制index.html并重命名为first.html，使用VS Code打开，修改核心代码。

<div class="reveal">
    <div class="slides">
        <!-- 第一页 -->
        <section>如何使用reveal.js创建和演示幻灯片</section>
        <!-- 第二页 -->
        <section>第一步：下载reveal.js项目构建创作环境</section>
        <!-- 第三页 -->
        <section>第二步：熟悉语法规则在进行内容创作</section>
        <!-- 第四页 -->
        <section>第三步：启动本地服务进行幻灯片演示</section>
    </div>
</div>

保存后双击first.html在浏览器中打开幻灯片，至此，第一个简单的幻灯片就创建好了。
当然，这个幻灯片是比较简单的，因为我们还没有学习在reveal.js中创建幻灯片的语法和规则，待熟悉reveal.js的语法规则后，就可以随心所欲地创作幻灯片了。

5.3 使用指南

前面搭建的是最基本的环境配置，进行一些基础操作是没有问题的，但有些功能需要从本地Web服务器运行，如演讲者备注、引用外部Markdown文件、修改后自动刷新等，如果还是使用前面的环境就行不通了。为了能够进行完整的演示，还要对项目环境进行完整的配置。

5.3.1 搭建完整的项目环境

1. 在终端处切换到项目根目录下

使用VS Code打开reveal.js项目，在左边项目列表的空白处，单击鼠标右键，在弹出的菜单中选择【在终端中打开】，终端会切换到项目根目录下。

2. 安装reveal.js项目中依赖的模块

在终端处运行npm install，如果安装模块失败，请使用cnpm install来安装。

3，运行命令，启动Web服务

npm start

如果启动正常，则终端处会输出如下内容。
reveal.js成功情况
然后浏览器会自动打开http://localhost:8000，默认打开的是index.html页面。如果想打开first.html，则需要手动输入http://localhost:8000/first.html。

注意： 如果启动Web服务时报错，请确认是否已成功安装了项目所依赖的模块。如果端口被占用，可以在运行时指定端口。

npm start -- --port=7000

Web服务启动成功之后又运行了一个watch任务，这个watch任务会监控项目中的文件；如果有文件被修改，在保存之后服务会自动重启，页面也会自动刷新，这样我们就能看到页面最新修改后的效果了。
至此，完整的reveal.js创作环境就搭建好了。

5.3.2 快速了解reveal.js

1. 创建并编写幻灯片

在reveal.js项目中创建HTML文件，然后在HTML文件中编写幻灯片。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/reveal.css">
    <!-- 在这里修改幻灯片 -->
    <link rel="stylesheet" href="css/theme/black.css">
</head>
<body>
    <div class="reveal">
        <div class="slides">
            <!-- 每一页幻灯片都使用<section>标签包裹 -->
            <section>Slide 1</section><!-- 第一页 -->
            <section>Slide 2</section><!-- 第二页 -->
        </div>
    </div>
    <script src="js/reveal.js"></script>
    <script>
        // 在这里修改幻灯片配置
        Reveal.initialize({
     });
    </script>
</body>
</html>

各部分的用途：

在<head>中设置幻灯片的主题。
在<section>中编写幻灯片的内容。
在Reveal.initialize({});中添加reveal.js的依赖和配置。

2. 演示幻灯片

简单的幻灯片可以通过使用鼠标双击HTML文件在浏览器中打开进行演示。但如果涉及演讲者备注或引用外部的Markdown文件，则需要使用Web服务器运行。本地运行命令为npm start，如果想要部署到服务器上则需要使用Nginx。

3. 幻灯片的类型

reveal.js中的幻灯片分为两种类型：水平幻灯片和垂直幻灯片。顾名思义，水平幻灯片是左右翻页的幻灯片，垂直幻灯片则是上下翻页的幻灯片；垂直幻灯片通常嵌套在水平幻灯片中使用。

示例代码

<!-- 最外层是水平幻灯片 -->
<section>
    <!-- 嵌套的垂直幻灯片1 -->
    <section data-markdown>
        <textarea data-template>
            ## 第一页
        </textarea>
    </section>
    <!-- 嵌套的垂直幻灯片2 -->
    <section data-markdown>
        <textarea data-template>
            ## 第二页
        </textarea>
    </section>
</section>

4. 使用Markdown编写幻灯片

reveal.js使用Markdown编写幻灯片有两种方式。

在HTML文件中直接使用Markdown编写。
在HTML文件中引用外部的Markdown文件。

如果在HTML文件中直接使用Markdown编写，则需要给<section>标签添加data-markdown属性，并且内容要使用<textareadata-template>包裹。

    <section data-markdown>
        <textarea data-template>
            ## 居中对齐
            | 序号  | 姓名  | 年龄  |
            | :---: | :---: | :---: |
            |   1   | 张三  |  31   |
            |   2   | 李四  |  30   |
            |   3   | 王五  |  29   |
        </textarea>
    </section>

如果在HTML文件中引用外部的Markdown文件，则需要指定分页的匹配规则。

<!-- 引用外部文件的Markdown文件 -->
    <section data-markdown="fileName.md"
    data-spearator="^\n\n\n"
    data-spearator-vertical="^\n\n"
    data-spearator-notes="^Note:"
    data-charset="utf-8">
    </section>

5.添加reveal.js的依赖和配置

在Reveal.initialize({});中进行对reveal.js的配置，如开启历史记录、显示页面、设置全局转场效果等。

<script>
  Reveal.initialize({
     
    history: true,          // 开启历史记录
    slideNumber:true,       // 显示页码
    transition:'convex',    // 转场效果
    // 配置依赖库
    dependencies:[{
     
        src: 'plugin/markdown/marked.js'
    },{
     
        src: 'plugin/markdown/markdown.js'
    },{
     
        src: 'plugin/notes/notes.js',
        async: true
    },{
     
        src: 'plugin/highlight/highlight.js',
        async: true,
        callbcak: function () {
     
            hljs.initHighlightingOnLoad

最低0.47元/天解锁文章

Sinking Stone

关注

26
点赞
踩
32

收藏

觉得还不错? 一键收藏
1
评论
《了不起的Markdown》第五章

第五章轻快、省力地写幻灯片——reveal.js5.1 你好，reveal.js reveal.js是一个使用HTML和Markdown快速创建和演示幻灯片的工具，它提供了很多实用的功能，也提供了很多第三方插件来增强效果。reveal.js的主要功能：可创建水平和垂直幻灯片，支持幻灯片链接，可在幻灯片之间跳转。可使用Markdown和HTML编写内容，也支持引用独立的Markdown文件。可使用颜色、图片、视频、网页做为背景。可添加演讲者注释，支持一键打开。可配置幻灯片的主题和过渡动画
复制链接

扫一扫