| 好看请赞,养成习惯

  • 你有一个思想,我有一个思想,我们交换后,一个人就有两个思想

  • If you can NOT explain it simply, you do NOT understand it well enough

现陆续将Demo代码和技术文章整理在一起 Github实践精选 ,方便大家阅读查看,本文同样收录在此,觉得不错,还请Star?


听说程序员看不上写 PPT ?

程序员是实干派,面对写 PPT 这事通常都是嗤之以鼻。头可断,万行代码不能乱;血可流,写PPT是真犯愁。写 PPT 着实是程序员工作中的三座大山之一

有人做了三分,可以通过 PPT 说出七分,有人做了七分,却说不出三分,程序员的内心活动正如去年很火的新东方年会改编 「沙漠骆驼」的歌词一样:


为了不再经历相似的年底考评悲剧。所以,作为老实人,如果做了七分,底线至少要说出七分,没有商量的余地

可是当程序员面对 PPT 或 KeyNote 总是无从下手,这要怎么办?

那咱就以程序员熟悉的方式写  PPT 呗

这里要给大家打个预防针,以这种方式写 PPT 的门槛低到吓人,只需会基本的 Markdown 语法即可

reveal-md

reveal-md 可以将 Markdown 文件渲染出非常漂亮的演示文稿

Github 地址: https://github.com/webpro/reveal-md

安装

安装很简单,安装好 NodeJS,一条 npm 命令(全局安装)即可:

npm install -g reveal-md

安装完,你需要做的就只是写 Markdown 文件了

写 Markdown 文件

在一个 Markdown 文件中,用 \n---\n 作为分隔多个 PPT 页面的标识符,如果你用 Typora,其实就是输入 ---,然后回车就搞定了,然后在里面按照 Markdown 语法填充内容就 OK 了

# 标题

* 程序员如何看待写 PPT?* 如何以技术人员的方式写 PPT?

---

## 程序员如何看待写 PPT?

> 世界最牛逼的语言是 「PPT」

这就写完了 2 页 PPT,不用调整格式,不用添加过渡效果,只需要run reveal-md 服务渲染一下你的 Markdown 文件就好了

渲染 Markdown 文件

因为我们是全局安装的 reveal-md, 所以只需要按照下面命令通过路径找到你的 MD 文件即可

reveal-md path/to/yourSlide.md

你也可以 cd 到 Markdown file 目录直接运行:

reveal-md yourSlide.md

在运行上述命令后会自动打开你默认使用的浏览器,默认是高大上的黑色主题,如果你开启浏览器全屏,就是这个效果了 (听说,属于你的演示来要开始了?)


点击右下角的下一页图标, 会有默认翻滚的过渡效果,就到了下一页(5毛钱的效果还请阅读原文,公众号对动图的支持太有限了)


这种简约又简单的方式爱了没?

我们都知道,PPT 或者 KeyNote 对代码的展示不是很友好,reveal-md 就不一样了(毕竟是 Markdown 嘛)


我们再通过 --- 新建一页,按照 Markdown 语法添加代码,重新 run 上述命令,可以看到,展示出来的代码有滚动条,有代码高亮,一应俱全


以上我们都是使用 reveal-md 的默认值,它当然也支持一些个性化设置

个性化设置

主题

上面使用的是默认主题 black (黑色主题),我们可以通过 --theme xxxTheme 来变更主题

reveal-md myTest.md --theme solarized

效果就是这个样子了(好像有点阮一峰老师博客的赶脚)


去哪里找这些主题呢?访问 https://github.com/hakimel/reveal.js/tree/master/css/theme/source 就可以查看 reveal-md 默认支持的所有主题,你只需要在运行命令时指定主题名字就好

如果你想玩点更高级的自定义样式,只需要指定自定义的主题文件就可以了

reveal-md slides.md --theme theme/my-custom.css

如果你不知道怎么写自定义主题 CSS 文件,那就参照 https://rawgit.com/puzzle/pitc-revealjs-theme/master/theme/puzzle.css 更改一些参数值就是你自定义的了

代码高亮主题

Markdown 本身就对代码有很好的支持,上面使用的代码默认高亮主题是 zenburn,当然也可以使用 --highlight-theme xxxTheme 选择其他高亮主题,像这样:

reveal-md slides.md --highlight-theme atom-one-dark

reveal-md 同样支持很多高亮主题,查看 https://github.com/highlightjs/highlight.js/tree/master/src/styles 同样是指定名字就好。这里更换为 atom-one-dark 高亮主题后,就是这个效果了


添加背景图片

在上面演示过渡效果时你也许就注意到了,我在某一页上添加了背景图片,添加背景图片也很(四声)简单,只需要在每页 PPT 的开头添加这段代码指定图片就可以

担心你在 Markdown 文件里写上述代码有些困惑,这里做个截图说明


重新运行,就是你刚刚看到的效果

    能添加图片,当然也能添加视频

添加背景视频

和添加背景图片类似,同样在每一页的开头添加下面代码:


背景视频是 2020 Mac 屏保,还是非常炫酷低,有兴趣的可以访问:Mac 2020 超炫酷屏保 获取相应视频和安装文件就好了

演讲人预览下一页视角

通常在讲演 PPT 时,会有一块小屏幕做下一页提醒,reveal-md 同样支持,只需要在 Markdown 文件开头单独页添加(别写错):

Note:.


重新运行,在打开的界面按键盘 s 按键, 就会弹出另外一个浏览器窗口为你提供预览下一页的界面,这时我们可以将全凭浏览器页拖到公共大屏,自己查看小屏幕


自动刷新改动

在写演示稿如果有些改动就重新运行还挺麻烦的,所以可以通过 -w 参数来自动刷新页面内容

reveal-md myTest.md --theme solarized --highlight-theme atom-one-dark -w

这时我们就不用每次重新启动服务了,你来试试看?万一演示的时候发现问一些小问题,可以神不知鬼不觉的更改

导出 PDF

精彩的演示稿,别人想拿过去学习一番,你可以直接将 Markdown 文件导出为 PDF 文件

reveal-md myTest.md --print slides.pdf

自定义模版

上面演示的这些都是在默认模版下渲染的,我们可以通过 --template xxxTemplate 来自定义自己的模版

reveal-md myTest.md --template my-reveal-template.html

同样,如果你不知道怎么写模版,你完全可以参考这个默认的模版内容做一些值的更改:https://github.com/webpro/reveal-md/blob/master/lib/template/reveal.html

双列模式

之前刚接触 reveal-md.js  时只是使用单列模式,其实在有些情况双列展示可以非常友好的展示一些对比性内容, 刚好组内万能大神找到了双列解决方案,我就私下取经, 得到了解决方案

我们可以写个自己的 CSS 文件,比如 doubleCol.css 然后在里面添加这点样式就行了:

#left { margin: 10px 0 15px 20px; text-align: left; float: left; z-index:-10; width:48%; font-size: 0.85em; line-height: 1.5; }

#right { margin: 10px 0 15px 0; float: right; text-align: left; z-index:-10; width:48%; font-size: 0.85em; line-height: 1.5; }

然后我们在 Markdown 文件里,像下面这样添加 Markdown 语法内容就好了

<div id="left">

## Left column- Bullet 1- Bullet 2- Bullet 3 - Even [links](https://www.google.com)

div>

<div id="right">

## Right colum1. List2. List3. ![Icon](https://cdn3.iconfinder.com/data/icons/ballicons-free/128/graph.png)

div>

通过 --css 引入咱们自定义的 CSS 文件即可,就想这样:

reveal-md myTest.md  --css theme/doubleCol.css

到这里,这些设置基本上可以满足基本需求了,如果你听过 reveal.js ,那你很容易就看出来了, reveal-md 只不过在上层做了 MarkDown 的渲染,这样只需要用基本的 Markdown 语法就可以代替写整个 HTML,大大简化整个过程,不建议书写大量 HTML,这与 Markdown 的设计思想时违背的,如果你有兴趣完全可以尝试一下了

总结

reveal-md 只是写演示文稿的工具,不要被其过渡捆绑;另外写 PPT 也是一个不容忽视的软技能,不要产生排斥心理,它可以锻炼自己归纳总结的能力,梳理内容的逻辑思维,以及演讲表达的技巧......开拓自己的技能,让能力等机会总是没错的

小程序背景图满屏_程序员的PPT写作方式果然别具一格啊相关推荐

  1. 小程序背景图满屏_手机秒变闪屏弹幕,撩妹小程序,赶快来学!

    想表白说不出口怎么办? 碰到心仪的小姐姐想要她的微信,说不出口怎么办? 去机场接机,还需要准备个手写牌? 演唱会上,少了LED灯牌?-- 这些都不是问题,只要你有一把智能手机! 小姐姐发现的这款『闪屏 ...

  2. 小程序背景图满屏_竞赛答题小程序

    越来越多的企业部门团体举办知识竞赛答题活动,根据更加好玩的答题活动规则开发了本款知识竞赛答题小程序. 本知识竞赛答题小程序采用云开发,无需搭建服务器,无需域名即可使用数据管理能力,更方便答题活动等场景 ...

  3. 程序员的PPT写作方式果然别具一格啊

    | 好看请赞,养成习惯 你有一个思想,我有一个思想,我们交换后,一个人就有两个思想 If you can NOT explain it simply, you do NOT understand it ...

  4. bcb mdi窗体画背景图片_BCB实现MDI程序背景图

    BCB 实现 MDI 程序背景图 . 在开发软件时,总希望软件界面越漂亮越好,我们在 C++ Builder 的 SDI 程序中比较容易实 现漂亮的软件界面,但在 MDI 程序中,由于 Windows ...

  5. 微信小程序背景图虚化

    微信小程序背景图虚化 filter: blur(10rpx);

  6. 【小程序背景图之海贼王篇】

    小程序背景图之海贼王篇

  7. 微信小程序背景图真机显示不了

    微信小程序在本地开发工具正常显示图片(包括背景图),在真机显示不了,常见的几种情况: 1.微信小程序背景图真机显示不了 微信小程序如何设置背景图片? | 微信开放社区 微信小程序设置背景图片不显示问题 ...

  8. 微信小程序背景图片全屏显示

    微信小程序背景图片全屏显示 很多人在写小程序界面的时候希望背景图片是全屏覆盖显示的(包括顶部导航栏,如下图),那该如何实现呢? 以下是实现代码: wxml代码: <view class=&quo ...

  9. css禁止背景图拉伸_html-css控制背景图全屏拉伸不重复显示

    在HTML中,当我们设置背景图,只能采用是否重叠.居中.重叠方向这几个选项 CSS3中设置 body { background:#3d71b8 url(../back_main.png); backg ...

最新文章

  1. [干货]Kaggle热门 | 用一个框架解决所有机器学习难题
  2. 开发日记-20190517 关键词 函数式编程(一)
  3. Docker常用操作命令
  4. 手动绑定数据到GridView并实现编辑,删除,取消···
  5. 广度优先搜索_深度优先搜索和广度优先搜索[09]
  6. python中 for ... else ... 的用法
  7. bzoj 1016 [JSOI2008]最小生成树计数——matrix tree(相同权值的边为阶段缩点)(码力)...
  8. Spring boot(8)---手动构建maven项目springboot
  9. matlab中ezplot和plot, fplot这3
  10. 如何在任何设备上将您的Apple笔记导出为PDF文件?
  11. 安卓Timpicker样式修改、多版本适配、ScrollView滑动冲突
  12. 合成孔径雷达算法与实现_典型线面目标合成孔径雷达参数化成像
  13. win10 共享打印机错误0x00000709修复
  14. word三线表最后一行加粗方式
  15. 数字信号处理---模拟信号数字处理方法
  16. Excel常见统计图表汇总
  17. ajax有哪些回调函数
  18. linux分段加载程序_Linux的分段机制
  19. cleaned_data debug django
  20. 计算机主板型号进bios,hp主板进入bios的方法(电脑进入BIOS的两种实用方法)

热门文章

  1. win10 安装.net 3.5错误代码 0x80070422
  2. 全球及中国个人护理服务行业研究及十四五规划分析报告
  3. 树莓派GPIO驱动ST7735S主控TFT液晶屏显示图片和文字
  4. 笔记18:SPI之 芯片W25Q128简介
  5. 列举独立开发者适用的数种游戏引擎
  6. mob sdk vue 短信验证_vueCli集成环信SDK
  7. python3下scrapy爬虫(第二卷:初步抓取网页内容之直接抓取网页)
  8. opengl之triangel
  9. Stata:面板数据的稳健回归-xtrobreg和robreg
  10. 「硬见小百科」全类型电阻介绍