Reveal.js 简单使用总结

最新推荐文章于 2024-03-14 11:52:15 发布
最新推荐文章于 2024-03-14 11:52:15 发布
阅读量2.8k 收藏 8
点赞数 1
分类专栏： Vue Reveal.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qwe122343/article/details/111355406
版权

Reveal.js 是一个使用 HTML 创建交互式幻灯片的 Web 框架，在使用过程中有了一些总结收获，本文主要针对有前端基础的同学进行介绍。

基础操作

首先是下载 Reveal.js 压缩包
在这里插入图片描述
解压后我习惯性用 Webstorm 进行打开，基础操作可以不执行任何命令，直接打开 index.html 进行编辑即可

一个 section 表示是一张 PPT，section 如果没有嵌套关系是向右滑动的逻辑在这里插入图片描述
在浏览器中打开 index.html 效果如图

最低0.47元/天 解锁文章
qwe122343
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
reveal.js_Reveal.js –惊人HTML演示框架
cune1359的博客
06-27 1663
演讲是传达有价值的重要信息的好方法。 无论是出于商业，教育还是营销目的，您都必须创建有趣，内容丰富且引人入胜的演示幻灯片 。 它通常是在台式机或智能手机上完成的，但您也可以使用网络技术来创建它。 在这篇文章中，我将向您介绍Reveal.js ，这是一个易于进行漂亮HTML演示的框架。 Reveal.js是一个非常强大的框架，可用于创建HTML演示文稿，因为它具有许多高级功能。 使用Reve...
kage-vue：使用Reveal.js和Vue制作幻灯片的电子应用程序
02-12
电子应用程序，用于使用Reveal.js和Vue制作幻灯片 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 运行单元测试 yarn test:unit 运行端到端测试 yarn test:e2e 整理和修复...
reveal.js: 动态演示文稿制作利器
最新发布
gitblog_00002的博客
03-14 467
reveal.js: 动态演示文稿制作利器 reveal.js 是一个功能强大的 HTML 演示文稿框架，由 Hakim El Hattab 创造并开源。它允许用户使用 HTML、CSS 和 JavaScript 创建出令人惊叹的动态幻灯片，且完全可定制。 什么是 reveal.js？ reveal.js 是一款基于 Web 技术的演示文稿工具，它通过将内容分层并支持平移和缩放来实现多维度的浏览体...
reveal.js：免费、强大的演示框架 | 开源日报 No.89
开源服务指南
11-29 1488
reveal.js 是一个开源的 HTML 演示框架，让您可以通过 web 浏览器免费创建精美的演示文稿。它具有许多强大的功能，包括嵌套幻灯片、Markdown 支持、自动动画、PDF 导出、演讲者备注、LaTeX 排版和广泛的 API。无论您是在做演讲、培训还是展示，reveal.js 都是一个强大的工具，让您的演示更具吸引力和互动性。无论您是初学者还是有经验的开发者，reveal.js 都是一个值得尝试的框架。
reveal.js + markdown 制作幻灯片——配置选项，幻灯片背景，尺寸，插入媒体，链接
qq_45682183的博客
09-29 970
reveal.js + markdown 制作幻灯片——配置选项，幻灯片背景，尺寸，插入媒体，链接
reveal.js 第三方插件
qq_45682183的博客
10-04 404
reveal.js第三方插件使用
【前端学习日记】用reveal.js实现制作网页幻灯片
轩辕衍的博客
09-08 892
一、效果展示 今天学习reveal.js做了一个简单的网页幻灯片，至于reveal.js是什么，可以去这里看看https://revealjs.com/。 话不多说，上图： 二、重要代码讲解 1.导入样式表 <!-- stylesheet:定义一个外部加载的样式表 --> <link rel="stylesheet" href="dist/reset.css"> <link rel="stylesheet" href="dist/reveal.css"> <!--
reveal.js-plugins:Reveal.js的插件
04-28
全屏（演示）：一个简单的插件，允许使用全屏幻灯片。 菜单（演示）：Greg Denehy的插件，用于添加滑出菜单。 入门演示的源代码可以在这里找到： https : //github.com/rajgoel/reveal.js-demos 。 下载您
vscode-reveal:Reveal.js vsCode扩展
05-11
由于Reveal.js使用mark来解析markdown字符串，因此您可以在文档中使用它： GitHub风格的markdown。 GFM表 如果您需要样本文件，可以在这里获取： ...
reveal.js:Esri Reveal.js会议模板的常年位置
05-13
Esri揭示.js Esri品牌的Reveal.js幻灯片模板希望使用使用与PowerPoint模板匹配的幻灯片模板的进行演示的人们的。 现场演示：有关归档的较旧版本，请参见。 有关多年来所有模板设计的可视化信息，请参阅文献资料请...
git-tutorial:使用Reveal.js的基本Git教程
05-02
Git教程 Git教程 克隆 git clone --recursive https://github.com/Lee-W/git-tutorial 用法 根据External.js的期，您必须运行服务器。 以下命令是在本地运行服务器的最简单方法之一。 例如 python3 - m http . server 表中的内容 介绍 安装 设置 快速开始 犯罪 差异 恢复 忽略文件 分支 标签 偏僻的 有关日志的更多信息 藏 变基 子模块 有用的插件 参考 作者
revealjs-template:最佳实践Reveal.js模板
05-23
Reveal.js模板 源自个人最佳实践： 免费无义buildscripts 在2015年撰写JS2015（aka ECMA 6） 用于代码模块化 是因为CSS预处理器没什么大不了的，而Reveal.js使用了那个（使我们能够重用变量） 导入的SASS和JS文件的路径不是很漂亮，因为Reveal.js并不是NPM模块，但这是唯一的问题。 为什么？ 因为Reveal.js的使用模型不好。 您要分叉编辑吗？ 如何应对upsteam变化？ 以我的方式，一切保持分离：只需在package.json中修改Reveal.js的版本，进行npm update并重建文件。 完毕。 如何？ 与Reveal.js不同，这件事不会有太大变化，并且主要是一个起点。 因此，只需下载.tar.gz或.zip，因为您不想跟上上游的变化（再次，不同于Reveal.js）。 然后将其提取到某个地方，去那里
Android使用Circular Reveal动画让页面跳转更炫酷
08-29
本篇文章主要介绍了Android使用Circular Reveal动画让页面跳转更炫酷，具有一定的参考价值，有兴趣的可以了解一下
reveal.js-wave-plugin:一个用于reveal.js 的插件来使用你的网络摄像头和挥动滑动来推进你的幻灯片
05-31
挥手浏览你的演示幻灯片 这个用于插件可以使用您的网络摄像检测挥动——然后触发幻灯片更改。 它更像是一个很酷的效果，而不是一个有用/富有成效的插件——但非常适合给你的观众留下深刻印象。 你可以在这里看到它的现场演示： : 限制 仅适用于 Chrome（仅 Chrome 支持用于访问网络摄像头的 getUserMedia()） 它仅适用于您在服务器上调用演示文稿（即不使用 file:// url） 您必须接受 Chrome 的请求才能使用您的网络摄像头 目前仅在您的演示文稿中启用 操作方法/安装 只需将此存储库复制到您的reveal.js 演示文稿中到/plugin/wave 。 在 index.html 的“依赖项”部分包含这两行：`{ src: 'plugin/wave/webcam-swiper-0.1.js'}, { src: 'plugin/wave/client.js'
Reveal.js超级炫酷一个用来做WEB演示文稿的框架
11-10
Reveal.js超级炫酷一个用来做WEB演示文稿的框架
demos-Reveal.js:manifest.js（幻灯片）中文文档+演示->
05-01
reveal.js 中文文档 :backhand_index_pointing_left:This repository is forked from the official repository of revealjs.It translated by in 2017/5/13. welcome star! star! star!示例： 左图为移动端，右图为...
vue技术分享ppt_如何使用js制作精美的网页版PPT
weixin_39804059的博客
12-12 708
前言最近在做季度总结和技术分享,所以需要做个PPT, 来回顾这半年来的技术贡献. 但苦于mac上运行PPT那感人的流畅度, 成功的激起了笔者的强迫症, 所以索性想办法通过技术的手段来做个网页版PPT, 这个时候笔者发现了reveal.js: 一个使用 HTML 语言制作演示文稿的 Web 框架，支持插入多种格式的内容，并以类似 PPT 的形式呈现. 花了15分钟系统的调研了一下, 觉得基本满足技术...
使用reveal.js写演示文稿
lusing的专栏
07-12 977
使用reveal.js写演示文稿 用powerpoint或者keynote写演示文稿，对于代码、数学公式等的支持一直是个痛点。而且对于前端同学来说，一身的css功力用不上也是个痛点。对于使用markdown来写文档的同学来说，将文档转成ppt需要重新排版也是件重复性的工作量。 于是我们需要一个基于web技术的ppt框架，reveal.js在这个领域成名已久了，而且上个月还有发布新版本，维护得还蛮好，第一步我们就选它了。 将reveal.js运行起来 首先clone一份reveal.js最新的代码： git
jupyter notebook reveal.js slides
10-16
您可以使用 `nbconvert` 工具将 Jupyter Notebook 转换为 reveal.js 幻灯片。具体步骤如下： 1. 安装 nbconvert：`pip install nbconvert` 2. 在命令行中执行以下命令：`jupyter nbconvert --to slides your_notebook.ipynb --post serve` 3. 在浏览器中打开生成的链接即可查看幻灯片。 请注意，您需要在 Jupyter Notebook 中使用 Markdown 单元格来编写幻灯片内容，并使用特定的幻灯片语法来指定幻灯片的布局和样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值