`
Foxswily
  • 浏览: 77449 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

轻量slideshow(by markdown、pandoc、revealjs)

阅读更多

又到写年终总结的时候了,用笨重的ppt写记录文字实在得不偿失,已经习惯了用markdown做快速文档编辑,于是起了用它写slideshow的念头。

 

工具准备:

  1. markdown编辑器,推荐SublimeText2+插件 或 MarkdownPad2
  2. pandoc 1.12+(此版本开始支持revealjs)
  3. 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

 按需修改文档内容即可

  • 大小: 226.5 KB
  • 大小: 143.5 KB
  • 大小: 124.6 KB
分享到:
评论

相关推荐

    jquery slideshow.js幻灯片插件_淡出淡进图片轮播

    jQuery 是一个轻量级的 JavaScript 库,简化了 JavaScript 的使用,使得DOM操作、事件处理、动画效果和Ajax交互变得更加容易。Slideshow.js 是基于 jQuery 构建的,因此在使用前,我们需要确保网页已经引入了 jQuery...

    Javascript SlideShow网页相册代码(JS+CSS).rar

    `compressed.js`是压缩的JavaScript文件,它包含了实现SlideShow功能的代码。这个文件可能包含了图片切换逻辑、动画效果、用户交互处理(如点击或触摸事件)等功能。JavaScript可以动态改变HTML元素的样式或内容,...

    Sublime Text 3 支持Markdown

    Markdown是一种轻量级的标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成结构化的HTML(超文本标记语言)文档。在IT行业中,Markdown因其简洁、直观的语法,被广泛用于编写博客文章、文档、README...

    mdshow:快速将Markdown文件转换为精美的演示文稿

    使用Reveal.js 4.0和Pandoc 2.9构建 重点 微创。 所有数据都保存在slides.md , assets/和一个临时.build/文件夹中 Markdown是重点关注的唯一标记 企业 自定义主题和主题在所有演示文稿中的重复使用 所有演示文稿...

    angular_slideshow.js:以类似于revealjs的角度制作幻灯片的方法

    angular_slideshow.js 以类似于revealjs的角度制作幻灯片的方法添加 dist/slideshow.js、dist/slideshow.css(或者 css/slideshow.sass 如果你更喜欢 sass) 添加 添加模块依赖“幻灯片” 添加指令 < slideshow> ...

    Javascript SlideShow网页相册代码(JS+CSS)

    在实际代码中,你可能会看到一个JavaScript文件(如`slideshow.js`),其中包含滑动相册的逻辑,以及一个或多个CSS文件(如`styles.css`),用于样式设定。JavaScript文件可能包括函数,用于初始化相册、处理用户...

    RISE_Live_Reveal.js_JupyterIPython_Slideshow_E_RISE.zip

    RISE_Live_Reveal.js_JupyterIPython_Slideshow_E_RISE

    vuegalleryslideshowVuejs的轻量级和响应式图库

    **Vue.js轻量级响应式图库:vue-gallery-slideshow** Vue.js,作为一个流行的前端JavaScript框架,以其简单易用和高效灵活的特点深受开发者喜爱。它为构建用户界面提供了丰富的组件和工具,使得开发者能够快速地...

    vimeo_slideshow:基于Reveal.js的幻灯片,可连续播放一组vimeo视频。 点击第一个视频上的播放开始,或者点击向右箭头开始

    vimeo_slideshow 基于Reveal.js的幻灯片,可连续播放一组vimeo视频。 点击第一个视频上的播放开始,或者点击向右箭头开始测试,运行python -m SimpleHTTPServer在包含index.html的目录中

    sublimetext-markdown-slideshow:用于降价幻灯片的 Sublime Text 23 插件

    在Markdown Slideshow的命令下安装。GitHub 可以从 github 下载,安装 Sublime Text 2/3 Packages 的文件夹。 $ git clone git://github.com/ogom/sublimetext-markdown-slideshow.git用法默认设置 { // Path of ...

    slideshow插件

    jQuery作为一个轻量级、高效的JavaScript库,提供了丰富的插件来实现这一功能。本文将深入探讨基于jQuery的“slideshow插件”,它是一个小型但功能强大的工具,能够轻松创建出流畅的滑动展示效果。 ### jQuery基础 ...

    很强的图片效果image-slideshow JS+CSS相册效果

    "很强的图片效果image-slideshow JS+CSS相册效果"这个标题指出,我们关注的是一个使用JavaScript(JS)和层叠样式表(CSS)技术实现的图片轮播或相册功能。"image-slideshow"是这种功能的常见术语,它指的是能够自动...

    Slideshow jquery插件

    - **Unslider**:轻量级且易于上手,适合快速构建基本的滑动展示。 ### 5. 常见问题与解决方案 - **图片加载问题**:如果图片加载慢,可能会影响幻灯片的显示。可以通过预加载图片或优化图片大小来解决。 - **...

    Ajax(yui-slideshow)

    1. **异步加载**:YUI Slideshow支持动态加载内容,可以使用Ajax技术加载下一张幻灯片的内容,减少页面初次加载时的数据量,提高页面响应速度。 2. **多种过渡效果**:提供多种动画过渡效果,如淡入淡出、滑动等,...

    slideshow.js

    slideshow.js

    Frontpage SlideShow 2.0 +汉化补丁

    Frontpage SlideShow 是一个基于 Javascript/CSS 的幻灯放映系统,是在您的 Joomla! 或 Mambo 网站上展示您的文章、故事或产品的最夺目的方式。 FPSS 软件有多个版本,分别针对不同的平台,这是针对 Joomla! 1.5.x...

    github-slideshow-源码.rar

    例如,使用Reveal.js这样的库可以创建分步展示的幻灯片。 4. **图片和其他资源**:可能包括.jpg、.png等图像文件,用作幻灯片的插图或背景。还有可能有.svg矢量图、.pdf文档或任何其他与演示相关的附件。 5. **...

    Javascript Slideshow(相簿效果)

    - `slideshow1.css` 和 `slideshow2.css` 文件分别提供了幻灯片的两种不同样式。CSS(层叠样式表)用于定义网页元素的布局和外观。这些文件可能包含以下内容:幻灯片容器的宽度和高度,图片的对齐方式,过渡动画...

Global site tag (gtag.js) - Google Analytics