又到写年终总结的时候了,用笨重的ppt写记录文字实在得不偿失,已经习惯了用markdown做快速文档编辑,于是起了用它写slideshow的念头。
工具准备:
- markdown编辑器,推荐SublimeText2+插件 或 MarkdownPad2
- pandoc 1.12+(此版本开始支持revealjs)
- revealjs
pandoc对revealjs的支持解决了revealjs自身对markdown支持的不足(嵌入或读取markdown的方式稍稍麻烦),安装好pandoc,写好md格式的文档test.md
% 年终总结 % Foxswily % 2013-12-30 # 工作回顾 1. 工作1 2. 工作2 3. 工作3 # 成绩与不足 * blablabla * blablabla * blablabla # End Thanks
生成slideshow
pandoc -s -i -t revealjs test.md -o target/test.html -V theme=default
注意在target下准备reveal.js相关资源(revealjs包中包含)
reveal.js\css\ reveal.js\js\ reveal.js\lib\ reveal.js\plugin\
打开test.html后效果
分分钟搞定很Geek的一篇总结。
PS. reveal支持不少特性,比如纵向浏览、语法高亮,需要DIY修改pandoc模板
pandoc -v
查看Default user data directory: C:\Users\USERNAME\AppData\Roaming\pandoc
在此创建templates目录,并生成template文档
pandoc -D revealjs > default.revealjs
按需修改文档内容即可
相关推荐
jQuery 是一个轻量级的 JavaScript 库,简化了 JavaScript 的使用,使得DOM操作、事件处理、动画效果和Ajax交互变得更加容易。Slideshow.js 是基于 jQuery 构建的,因此在使用前,我们需要确保网页已经引入了 jQuery...
`compressed.js`是压缩的JavaScript文件,它包含了实现SlideShow功能的代码。这个文件可能包含了图片切换逻辑、动画效果、用户交互处理(如点击或触摸事件)等功能。JavaScript可以动态改变HTML元素的样式或内容,...
Markdown是一种轻量级的标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成结构化的HTML(超文本标记语言)文档。在IT行业中,Markdown因其简洁、直观的语法,被广泛用于编写博客文章、文档、README...
使用Reveal.js 4.0和Pandoc 2.9构建 重点 微创。 所有数据都保存在slides.md , assets/和一个临时.build/文件夹中 Markdown是重点关注的唯一标记 企业 自定义主题和主题在所有演示文稿中的重复使用 所有演示文稿...
angular_slideshow.js 以类似于revealjs的角度制作幻灯片的方法添加 dist/slideshow.js、dist/slideshow.css(或者 css/slideshow.sass 如果你更喜欢 sass) 添加 添加模块依赖“幻灯片” 添加指令 < slideshow> ...
在实际代码中,你可能会看到一个JavaScript文件(如`slideshow.js`),其中包含滑动相册的逻辑,以及一个或多个CSS文件(如`styles.css`),用于样式设定。JavaScript文件可能包括函数,用于初始化相册、处理用户...
RISE_Live_Reveal.js_JupyterIPython_Slideshow_E_RISE
**Vue.js轻量级响应式图库:vue-gallery-slideshow** Vue.js,作为一个流行的前端JavaScript框架,以其简单易用和高效灵活的特点深受开发者喜爱。它为构建用户界面提供了丰富的组件和工具,使得开发者能够快速地...
vimeo_slideshow 基于Reveal.js的幻灯片,可连续播放一组vimeo视频。 点击第一个视频上的播放开始,或者点击向右箭头开始测试,运行python -m SimpleHTTPServer在包含index.html的目录中
在Markdown Slideshow的命令下安装。GitHub 可以从 github 下载,安装 Sublime Text 2/3 Packages 的文件夹。 $ git clone git://github.com/ogom/sublimetext-markdown-slideshow.git用法默认设置 { // Path of ...
jQuery作为一个轻量级、高效的JavaScript库,提供了丰富的插件来实现这一功能。本文将深入探讨基于jQuery的“slideshow插件”,它是一个小型但功能强大的工具,能够轻松创建出流畅的滑动展示效果。 ### jQuery基础 ...
"很强的图片效果image-slideshow JS+CSS相册效果"这个标题指出,我们关注的是一个使用JavaScript(JS)和层叠样式表(CSS)技术实现的图片轮播或相册功能。"image-slideshow"是这种功能的常见术语,它指的是能够自动...
- **Unslider**:轻量级且易于上手,适合快速构建基本的滑动展示。 ### 5. 常见问题与解决方案 - **图片加载问题**:如果图片加载慢,可能会影响幻灯片的显示。可以通过预加载图片或优化图片大小来解决。 - **...
1. **异步加载**:YUI Slideshow支持动态加载内容,可以使用Ajax技术加载下一张幻灯片的内容,减少页面初次加载时的数据量,提高页面响应速度。 2. **多种过渡效果**:提供多种动画过渡效果,如淡入淡出、滑动等,...
slideshow.js
Frontpage SlideShow 是一个基于 Javascript/CSS 的幻灯放映系统,是在您的 Joomla! 或 Mambo 网站上展示您的文章、故事或产品的最夺目的方式。 FPSS 软件有多个版本,分别针对不同的平台,这是针对 Joomla! 1.5.x...
例如,使用Reveal.js这样的库可以创建分步展示的幻灯片。 4. **图片和其他资源**:可能包括.jpg、.png等图像文件,用作幻灯片的插图或背景。还有可能有.svg矢量图、.pdf文档或任何其他与演示相关的附件。 5. **...
- `slideshow1.css` 和 `slideshow2.css` 文件分别提供了幻灯片的两种不同样式。CSS(层叠样式表)用于定义网页元素的布局和外观。这些文件可能包含以下内容:幻灯片容器的宽度和高度,图片的对齐方式,过渡动画...