首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用reveal.js制作精美的网页版PPT

但苦于mac上运行PPT那感人的流畅度, 成功的激起了笔者的强迫症, 所以索性想办法通过技术的手段来做个网页版PPT, 这个时候笔者发现了reveal.js: 一个使用 HTML 语言制作演示文稿的 Web...制作需要花费大量时间, 受平台限制 所以对于不熟悉PPT套路的技术工作者来说, 往往很难快速制作出精美的PPT. 接下来我们再看看reveal.js的优势. ?..., 只需修改或打开 HTML 文件 丰富的特性,支持过渡动画、代码高亮、视频背景、Markdown 语法、导出 PDF 等 极度轻量,占用空间和内存少 说了这么多revealjs的优点,接下来我们就来学习如何使用它吧...嵌入脚本 我们都知道技术类PPT肯定离不开代码, 我们在reveal.js中可以很容易的展示我们的代码,并且支持多种语言, 其框架底层集成了 业界比较有名的highlight.js....使用方式如下: ? 使用Markdown Markdown是技术工作者常用的编写文档的工具, revealjs同样也支持使用Markdown的方式来编写PPT, 是不是很贴切? 具体方式如下: ?

3.6K20

网页PPT: reveal.js 介绍

reveal.js reveal.js 是个啥 reveal.js 是一个展示内容的框架,可以简单的理解为网页版的PPT。我们用 reveal.js 做出来的PPT其实是一个HTML文件。...优势 和传统的PPT相比,reveal.js 有哪些吸引我的地方呢?...主要有: 制作简单:对程序员来说,只是做个页面而已;对非程序员可以使用在线编辑器 运行简单:因为是一个HTML文件,那么只要双击,就能在浏览器中展示。...reveal.js 有多套默认皮肤,支持 多种PPT切换动画,Fragments,内联PPT( nested slides),代码高亮,解析 Markdown,懒加载图片和视屏,导出为PDF和一系列的...步骤如下 安装 Node.js 安装 Grunt 下载 $ git clone https://github.com/hakimel/reveal.js.git 到 reveal.js 文件夹

4.9K20
您找到你想要的搜索结果了吗?
是的
没有找到

居然可以用 jsPPT

居然可以用 jsPPT 用powerpoint或者keynote写演示文稿,对于代码、数学公式等的支持一直是个痛点。而且对于前端同学来说,一身的css功力用不上也是个痛点。...对于使用markdown来写文档的同学来说,将文档转成ppt需要重新排版也是件重复性的工作量。...于是我们需要一个基于web技术的ppt框架,reveal.js在这个领域成名已久了,而且上个月还有发布新版本,维护得还蛮好,第一步我们就选它了。...将reveal.js运行起来 首先clone一份reveal.js最新的代码: git clone https://github.com/hakimel/reveal.js 我们照抄一份index.html...代码高亮默认是支持的,我们可以在markdown里面用```来使用: 显示出来的效果如下: md-code 也可以直接使用html的pre和code标签来显示: <pre

9.4K20

程序员ppt工具reveal.js

前言 一款适用于程序员做ppt的插件,就是reveal.js,通过它用网页来制作很棒的交互式的幻灯片,第一次接触到这部分内容,先记录一下,后续应该也是会用上。...github地址: https://github.com/hakimel/reveal.js 适用于md文件: https://github.com/webpro/reveal-md 优势 Reveal.js...做PPT的优点是可以使用markdown语言直接写静态的文本,并可以加入各种 html 语言支持的交互动画,然后由 Pandoc 直接转化成 PPT。...缺点是使用 markdown 时对单个HTML元素操作不够灵活。...reveal.js还拥有许多高级特性,完整安装,某些 reveal.js 的功能,像外部的Markdown和演讲注释,需要演示文稿运行在本地的一个web服务器上,因此需要在nodejs环境下运行,安装node.js

1K20

使用 grunt-scp 来部署 js 代码

在很久之前,我接到任务,要帮忙协助前端做团队建设和流程优化(重点在于代码review上),当时出过一版方案来做静态资源的部署——js、css、imgs。但由于当时对前端的参与度不够,方案并不合适。...先来说下前端的流程,接到任务,开个feature分支写代码,完成后使用grunt打包到dest目录下,同时通过设置host可以本地进行调试。...本地测试没问题,把代码全部推到远端(注意:包含了dest文件夹的内容),之后再测试服务器上使用一个shell脚本,把代码从git仓库的dest文件下cp到nginx的目录下。...测试完毕之后,正常来说使用git和gitlab做代码管理的情况下,应该是提一个merge request出来,然后其他同学review代码,没问题之后进行合并。...大家又可以愉快的使用merge request来提交review申请了. 当然上面省略了build-test的配置,其实就是改了打包的目录。

73220

调试JS代码

记录下近期对JS代码的调试过程 性能分析 启动程序之后,打开google浏览器对应页面,按F12或者Ctrl+Shift+I进入 开发者工具页面 目前主要使用的功能有: Performance....性能评估,比如我想看下页面刷新的性能瓶颈所在,先点击 按钮,然后进行页面操作,当页面刷新完成,再点击 按钮,则会生成性能报告,可以看到资源消耗,JS代码的执行逻辑等 Sources....性能报告页面的 部分,可以通过点击色块查看其所在的js代码文件,如 点击则会跳转到 功能栏,有了源文件就可以进行断点调试;这里注意部分js文件是压缩后的文件,建议手动修改程序替换成可读性更强的原始代码文件...查看程序的打印输出,比如我想知道某个函数的执行时间,可以在js代码中进行修改 当js代码执行之后,可以在console输出中看到foo的执行时间 Network....代码使用for循环进行操作,也就是线性复杂度,计算耗时随数据量的增大而线性增大 通过debug观察发现颜色数组会有不少重复的数值,而同样的输入会导致相同的输出,然后对整个数据的1M个点进行统计分析,发现重复率相当高

19K10

js代码规范

前言 在js代码开发中,我简单的总结出了以下规则,后面会陆续补充并且对规范进行分类。...js代码建议保存到后缀名.js的文件中 js代码不建议放在html中,原因有:不能被缓存,会增大网页文件的大小,可维护性不高,会影响页面的加载。...大括号要在使用语句块的时候使用,哪怕只有一句,这样可以避免以后再添加语句的时候造成逻辑错误,比如if else 这样的语句中,默认只对单行代码有效 。...比如对象 var obj={} ;var arr=[] eval eval是最容易混乱使用js函数,他可以执行内部入参的js函数或者表达式,可以直接解析变量。不建议使用 。...尽量使用语法严格模式 消除代码之中的不友好;代码运行更快 ;保证运行的安全 ;为新版本的js做好铺垫。 22.

8.8K30

JS代码混淆 | js 逆向系列

保护知识产权:混淆代码可以防止他人盗用和复制您的代码。通过混淆,您可以更好地保护您的知识产权,确保您的代码不会被滥用或未经授权使用。...npm install uglify-js -g uglifyjs example.js -c -m --mangle-props -c 代码压缩 -m 代码混淆 --mangle-props 混淆属性名...JShaman https://www.jshaman.com/ JShaman 是国内公司开发的js代码加密商业产品 免费版可以直接使用 // 原代码 const person = { age...,通过数组、字典等各种形式存储、拼接、替换等,最终进行还原,这里面没有利用到复杂的语法以及js 语言本身的特性,所以我们一点点解开也学不到什么; 这个代码就不一样了,我们一步一步解开它,尝试去学习其中的思路...使用此选项,随机的死代码块将被添加到混淆的代码中。

1K10

AI |美图AI PPT使用体验

13 2023-11 AI |美图AI PPT使用体验 在百无聊赖地互联网冲浪的时候,意外地发现美图居然也做了PPT AI,还真的是有点意料之外。...还是跨界AI,做PPT?...PPT AI就隐藏在美图设计室里面。仔细一些,这个商业逻辑非常合理,美图嘛,主要做图像。对图像有高度诉求的人必然对AI辅助作图有诉求,既然都用AI作图的功能了,AI做个PPT好像也是一气呵成。...,看过了大厂的风景也做过了小厂的CDO~目前是闲职,主要是想沉淀自己,自媒体写作是最好的自我总结和自我复盘 做数据的 二号姬 坚持小众内容原创+自己写稿的二号姬 周一:AIGC相关,包括但不限于教程、使用评测...周二:数据处理技术分享、代码分享 周三:工作效率提升工具/技巧,办公自动化等 周四:读书笔记系列,分享读书心得和要点 周五:聊聊职场,包括但不限于求职面试 周六:随缘分享,内容不确定 周日:随缘分享一些技术踩坑经验

42230

使用VBA在PPT上调色

标签:VBA,PowerPoint编程 一小段VBA代码,就能实现在PPT上选择并涂色的功能,如下图1所示。...图1 实现上述效果的VBA代码如下: Dim RGB As Variant Sub ChooseColor(oSh As Shape) RGB = oSh.Fill.ForeColor.RGB...不需要太多的代码,仅仅几句VBA就能实现幻灯片放映过程中与用户交互的功能,太方便了。 本文的示例来源于pptvba.com,有兴趣的朋友可以到该网站上下载相应的ppt文档模板。...也可以在完美Excel公众号中发送消息: 涂色板ppt 获取本文示例文档的下载链接。 或者,直接到知识星球app完美Excel社群下载本文示例文档。...说明:这段时间有空就在研究PowerPoint编程,进一步拓展VBA使用空间。在学习过程中,确有不少收获。VBA能够让PPT再提升一个档次,并且不需要很复杂的逻辑,更不需要很复杂的代码

25220

PPT 中插入域代码公式的方法

PPT 中插入域代码公式的方法 插入对象,选择 Word * Document,或 OpenDocument 都可以; 在新打开的页面中,选择 插入 文档部件,再选择 域代码; 在域代码选项中...语法 在文档中查看 Eq 域时,语法如下所示: {EQ 说明 } 注意: 域代码决定域中显示的内容。计算域代码后文档中显示的为域结果。要在查看域代码和域代码结果之间切换,请按 Alt+F9。...如果您的系统的小数点符号句号 (指定为您的操作系统的区域设置一部分),请使用逗号作为分隔符。如果您的系统的小数点符号逗号,请使用分号。 数组: \a() 多列; 中的数组元素按行顺序显示的元素。...如果您指定的字符是{ , [, (,或<,Word 会使用对应的结束字符作为右中括号。如果指定了任何其他字符,则 Word 会使用该字符的左右括号。 以下选项修改 \b 说明。...\lc\c 左括号使用字符c。 \rc\c 右括号使用字符c。 \bc\c 左右括号使用c为指定的字符。

3.3K30

使用 Prism.js 实现漂亮的代码语法高亮

给大家推荐一个代码高亮显示的东东,直接使用一个 JavaScript 库 —— Prism 是一款轻量、可扩展的代码语法高亮库,使用现代化的 Web 标准构建。 为什么选择 Prism.js ?...极致易用引用 prism.css 和 prism.js使用合适的 HTML5 标签(code.language-xxxx),搞定!...许多网站都在使用 Prism,如果你是前端开发者,那你一定十分熟悉这些网站: 这些网站在使用 Prism.js 连 JavaScript 之父 Brendan Eich 也在个人博客上使用!... 遵循 HTML5 标准,Prism 使用语义化的 元素和 元素来标记代码区块:...原创文章采用CC BY-NC-SA 4.0协议进行许可,转载请注明:转载自:使用 Prism.js 实现漂亮的代码语法高亮

4.2K30
领券