歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> 支持 Markdown 的網頁 slides 工具總結

支持 Markdown 的網頁 slides 工具總結

日期:2017/3/1 9:36:53   编辑:Linux編程
在注重效率的今天,很多人都不喜歡制作 PPT,特別是技術人員。流行的 PPT 制作工具往往需要用戶關注太多內容無關的細節。而像 TeX 這樣強大的系統又似乎太過於重量級了。

現在越來越流行制作網頁格式的 slides,並通過浏覽器來播放和發布。 這樣做有很多優點:包括跨平台(特別在移動端)、無需特殊軟件支持、分享方便、輕量級等。

可惜並不是所有人都精通網頁編程技術,即便是最常見的 html 和 css,也常常造成 slides 編寫人員的困擾。

一款最理想的 slides 制作工具,應該做到讓用戶只需要關心內容,其它的包括布局、風格等都交由軟件來完成。

隨著 HTML5 的流行,現在已經出現了不少這方面的工具,允許用戶用 Markdown 等文本標記語言來編寫好內容。它們能自動轉化為網頁形式,添加合適的主題,獲得不亞於 PPT 軟件的播放效果,甚至更為強大。

在這裡介紹幾種支持 Markdown 來編寫內容的網頁 slides 生成工具。

對於 Markdown 不熟悉的讀者,推薦先花個五分鐘,簡單看下 Markdown 的簡單語法:http://daringfireball.net/projects/Markdown。順便說下,本文就是使用 Markdown 編寫的。

slidedown

比較早期的一個利用 Markdown 生成網頁 slides 的工具。

它功能比較單一,特色是支持語法高亮。後面出現的不少工具都參考了它,功能要更加豐富。

  • 官方網站:https://github.com/nakajima/slidedown
  • 推薦指數:3.5

Remarkjs

remarkjs 是一個簡單的基於 Markdown 的網頁 slides 生成工具。

remarkjs 生成的網頁 slides 支持語法高亮、響應式設計。

  • 官方網站:http://remarkjs.com (同時也是使用 remakjs 生成的)
  • 源碼維護:https://github.com/gnab/remark
  • 在線生成:https://gnab.github.io/remark/remarkise
  • 推薦指數:4

Reveal.js

Reveal.js 是基於 Node.js 實現的一個網頁 slides 編寫框架。

它支持自定義快捷鍵、嵌套 slides、在網頁中直接嵌入 Markdown 語法、導出 pdf、備注和 JavaScript 等強大功能。

它需要用戶對 HTML 和 CSS 相關技術比較熟悉一些。支持的很多參數可以直接在模板中進行配置,比如自動翻頁、快捷鍵等。

  • 官方網站:http://lab.hakim.se/reveal-js/#/
  • 推薦指數:4

slidify

slidify 支持 RMarkdown 語言,可以利用 RMarkdown 文件生成效果驚艷的 HTML5 頁面,並且支持發布到 GitHub、RPub、DropBox 等,當然這就需要用戶熟悉 Markdown,R、LaTex 等多種語言的語法。

  • 官方網站:http://ramnathv.github.io/slidify。
  • 推薦指數:4

R Markdown 語言是 RStudio 支持的一種專門為編寫 HTML 5 的 slides 而提出的混合型語言,它可以很好的混合利用 Markdown,R、LaTex 等多種語言來生成十分復雜的頁面。

KeyDown

KeyDown 與 Showoff, Slidedown, HTML5 Rocks 等類似,也是專注生成單頁的網頁 slides。 它基於 Ruby 語言編寫,利用 deck.js 轉化 Markdown 為網頁 slides。支持語法高亮、背景圖片、快捷鍵等。用戶要自定義一些風格可以修改 css 文件。

其使用過程十分簡單,需要 Ruby、Rubygems 環境。

$ gem install keydown
$ keydown generate my_presentation

然後編寫 Markdown 文件,並可以調整 css,之後進行轉換。

$ keydown slides
  • 官方網站:http://infews.github.io/keydown。
  • 推薦指數:4

  • deck.js 是一個專門實現網頁 slides 的 js 框架,網站為 http://imakewebthings.github.com/deck.js。*

Showoff

Showoff 是一個成熟的網頁 slides 生成工具,基於 Ruby 語言編寫。它借鑒了 S5 (http://meyerweb.com/eric/tools/s5/)。設計了基於 Markdown 的 DSL,因此,用戶只需要懂 Markdown 語法即可。

舉一個例子。

!SLIDE

# My Presentation #!

SLIDE bullets incremental transition=fade

# Bullet Points #

* first point
* second point
* third point

所生成的網頁 slides 功能十分全面,可以說,能想到的功能都實現了,包括語法高亮、菜單、JavaScript、效果、備注等等。

安裝和使用。

$ gem install showoff
$ git clone (showoff-repo)
$ cd (showoff-repo)
$ showoff serve
  • 官方網站:https://github.com/schacon/showoff
  • 推薦指數:4.5

showoff 唯一的問題可能是它已經有數年沒有更新了,不然完全可以打 5 分。

cleaver

cleaver 可以將 Markdown 文檔轉化為網頁格式,基於 Ruby 語言編寫,同樣支持基於 Markdown 的 DSL。它的整體設計風格也是十分簡約,作者還有其它幾個很 cute 的小工具。

下面給出一個 clever 支持的文件的例子。

title: Basic Example
author:
  name: Jordan Scales
  twitter: jdan
  url: http://jordanscales.com
output: basic.html
controls: true

--

# Cleaver 101
## A first look at quick HTML presentations

--

### A textual example

Content can be written in **Markdown!** New lines no longer need two angle brackets.

This will be in a separate paragraph

--

### A list of things

* Item 1
* Item B
* Item gamma

No need for multiple templates!

安裝和使用:

npm install -g cleaver
cleaver path/to/something.md

它支持多種主題和語法高亮等功能,

  • 官方網站:http://jdan.github.io/cleaver/
  • 項目維護:https://github.com/jdan/cleaver
  • 推薦指數:4.5

Landslide

Landslide 可以利用 markdown、ReST 或 textile 格式文件生成 HTML5 的網頁 slides,參考了 Google 的 html5slides。

Landslide 基於 Python 開發,最大的優點就是簡潔,從安裝到編寫,到生成的 slides 風格都十分簡潔。整個過程,用戶只需要懂 Markdown 語法就可以。

此外,它的配置文件(.cfg)使用了類似 ini 文件的語法,也很容易理解。

安裝:

pip install landslide

運行

landslide slides.md

默認會生成 html 格式的 slides。

是不是很簡單?

此外,它還支持生成 pdf、快捷鍵、備注、自定義主題、CSS、JavaScript、注冊新的語法宏等高級功能。

  • 官方網站:https://github.com/adamzap/landslide
  • 推薦指數:5

其它

HTML5 Rocks 是一個基於 HTML5 的強大的網頁 slides 展示系統。它生成的網頁可以支持多種風格,但需要用戶掌握一定的網頁編程技術。

  • 官方網站:http://www.html5rocks.com
  • 推薦指數:4

另外,可能有人會推薦 Prezi(http://prezi.com),我也為 Prezi 的動態效果所驚訝。但對於關注內容的人員(特別是工程師)來說,並不十分推薦 Prezi,Prezi 往往更適合於設計或市場營銷人員。

使用LiteIDE編寫Markdown文檔 http://www.linuxidc.com/Linux/2014-07/104664.htm

Remarkjs: 使用 Markdown 做幻燈 http://www.linuxidc.com/Linux/2014-04/99416.htm

Markdown編輯器CuteMarkEd的新功能 http://www.linuxidc.com/Linux/2014-02/96567.htm

Markdown 語法說明 http://www.linuxidc.com/Linux/2013-09/90719.htm

Linux下Markdown的安裝及常用語法 http://www.linuxidc.com/Linux/2013-09/90718.htm

Markdown中插入數學公式的方法 http://www.linuxidc.com/Linux/2014-08/104996.htm

Copyright © Linux教程網 All Rights Reserved