跳到主要內容

Making slide with Slidify

update:

slidify 原作者的套件對於 utf-8 編碼有問題,無法產生 utf-8 編輯的 index.Rmd 檔案,參考[5] 的文件,使用他的版本可以解決中文 utf-8 的問題。

>require(devtools)
>devtools::install_github('junjiemao/slidify')

------------------------------------------------
以前使用 reveal.js 製作 Slides,最近使用 deck.js,Rémi Emonet 加入了一些 extension,這些都是使用 HTML or Markdown 來寫 slide。另外,Slidify 是結合 R 環境,使用 R Markdown 來撰寫 slide 的套件,在它自己網站上寫著:


Slidify: Reproducible HTML Slides from R Markdown

Slidify 內含許多 HTML5 Slide Framework:
  1. Google IO2012
  2. DeckJS
  3. RevealJS
  4. FlowtimeJS
  5. ImpressJS
  6. Landslide
  7. DZSlides
  8. Shower
  9. Showoff
  10. FathomJS
  11. HTML5Slides
  12. Slideous
以上各種 slide framework 的範例可以在 Ramnath Vaidyanathan 作者的 GitHub repo.中找到實際的例子。 安裝步驟:
  1. 安裝 devtools,R Console 中輸入: install.packages("devtools")
  2. 載入 devtools 套件:require(devtools)
  3. install stringi packages: >install.packages("stringi")
  4. install magrttr packages: > install.packages("magrittr")
  5. 安裝 slidify: >install_github('ramnathv/slidify')
  6. 安裝 slidifyLibraries: >install_github('ramnathv/slidifyLibraries')
  7. 載入 slidify Library: >library(slidify)
  8. 建立 testSlidify 目錄及 slides: >author("testSlidify")
  9. 編輯 slides 內容 
  10. 產生 slides 檔: >slidify('index.Rmd')
如果安裝時,有版本衝突,出現 ERROR: dependency 'knitr' is not available for package 'slidify',無法安裝 knitr packages,可以再安裝 install.packages('packrat') 來管理版本的稱圖問題。

當下一次要編輯 slides 時,必須要重新載入 slidify, slidifLibraries 兩個 library,並且再次 author('dirName') 以及 sildify('index.Rmd') 檔案:
  1. >library(slidify)
  2. >library(slidifyLibraries)
  3. >author('dirName')
  4. >sidlify('index.Rmd')
index.Rmd 檔案是產生 Slide 的主要檔案,檔頭是使用 YAML 格式來指定使用哪種 Framework, theme, widgets, logo 等資訊,YAML 的檔頭如下:
 ---
title       :  Test Slidify
subtitle  : the subtitle
author    : Your Name
job         :
framework   : io2012        # {io2012, html5slides, shower, dzslides, revealjs, impressjs...}
highlighter : highlight.js  # {highlight.js, prettify, highlight}
hitheme     : tomorrow      #
widgets     : [mathjax, quiz, bootstrap, interactive] # {mathjax, quiz, bootstrap}
ext_widgets : {rCharts: [libraries/nvd3, libraries/leaflet, libraries/dygraphs]}
mode        : selfcontained # {standalone, draft}
knit        : slidify::knit2slides
logo        : LogoFilename  # logo should be put in  assets/img  directory
biglogo     : logoFilename
assets      : {assets: ../../assets}

YAML 格式主要是以 : 作為分界,作為屬性與屬性值的設定。

接著是以三個 ---以及緊接著一個空白行作為 slide 的開始,然後再以 RMarkdown 語法來編輯slide 的內容,RMarkdown 的語法可以參考 R Markdown 網站[3] 的 Slide Presentation 的文件,在每一個 slide 的開始,就是 --- 的後面是設定這張 slide 的樣式,以{}含括起來,內部是類別、id 、 以及使用 & 符號來設定不同 layout 的樣式,底下是一個簡單的 index.Rmd 範例:

--- &twocol w1:40% w2:60%
## Two Column Layout 
This slide has two columns

*** left

- list 1
- list 2
- list 3

*** right

- list 1
- list 2
- list 3
這個  twocol 的 layout 是在 io2012/layout 的目錄,換言之,只要 include 某個 framework 就可以設定它內部的 layout 樣式,而 layout 的樣式可以自行設計不同的 layout,layout 的設計參考作者 workshop 的文件[1],下載 workshop 的檔案,檢視原始程式碼來設定不同 slide 的 layout 的樣式。

另外,在 slidify tutorial[4]的原始程式碼、R Markdown 的 slide Presentation 文件可以做為製作 slide 的參考。

-----------
[1] http://slidify.github.io/workshops/
[2] http://slidify.github.io/playground/
[3]  R Markdown 網站 
[4] https://github.com/jvcasill/slidify_tutorial 
[5] http://blog.hatmatrix.me/cn/r/slidify-mojibake/

留言

這個網誌中的熱門文章

CodeBlocks 多國語言的設定步驟

多年來一直都是使用 CodeBlocks 英文的介面,不曾想過要將 CodeBlocks 設定成多國語言的開發環境,對於不習慣於英文介面的國人,設定中文的使用介面是非常需要的環境,在 CodeBlocks 論壇有一篇文章提到 :Do you know http://wiki.codeblocks.org/index.php?title=Internationalization ?這個連結說明在 Windows 系統如何設定 CodeBlocks 成為 Internationalization 的環境,整個設定過程如下: 到 CodeBlocks 翻譯文件網站 下載 .mo 檔案:下載時需要 Ubuntu One 的帳號及密碼,登入後點選 .mo 檔案(不要下載 .po 檔是可編輯檔) 系統會傳送一封信件,點選信件的連結,將 .mo 檔案下載 將檔案複製到 C:\Codeblocks\share\CodeBlocks\locale\zh_TW 目錄(沒有這個目錄請自己建立) 開啟 CodeBlocks >> Setting >> Environment >> View >> Internationalization 選項打勾 >> 點選 Chinese 重新開啟 CodeBlocks 要加入其他語言的 .mo 檔案,則在 locale 目錄中新增其他語言的目錄名稱,例如: 德國 de_DE,這樣 CodeBlocks 就是多國語言的開發環境了。 當如果要恢復英文的介面,只要取消 Internationalization 的選項勾選,然後再次重新開啟 CodeBlocks 就回到英文的開發環境。 後記: CodeBlocks 翻譯文件網站 要下載 .mo or .po 檔案需要等待系統回復信件到 Email 信箱,無法及時處理,將這些檔案儲存在 Google Driver 的 src/CodeBlocks 目錄,以後可以從這裡直接取用。

輸入及轉換 Unicode 編碼

如何輸入羅馬數字?不管大寫的數字 ,或者小寫的數字,不知道 Unicode 編碼的人總是會以輸入英文字母 i or I 來替代,即輸入 i, ii, iii, or I, II, III,或許他們不會面臨要輸入 4 以上的羅馬數字,這樣的做法就可以在人類的視覺誤差中暫時瞞騙過關,然而,這樣的作法卻帶來資訊系統不可見的人為問題。這篇文章將描述如何輸入正確的羅馬數字?如何搜尋 Unicode 編碼?以及如何輸入 Unicode 編碼。關於 Unicode 編碼輸入與顯示是一個相當複雜的議題,這篇文章僅針對在 Windows 作業系統中的應用程式如何輸入與搜尋 Unicode 編碼?如何在 Unicode 編碼與對應字元之間做轉換?不會涉及其他的議題;若依照下面描述的輸入方式輸入 Unicode 編碼,不保證能完全符合你/妳所使用個人電腦系統的環境,請再參考相關的文章來解決輸入與顯示 Unicode 編碼的問題。 Unicode 編碼的輸入方式 在 Wiki 的文件 中說明如何在不同環境下輸入特殊字元的 Unicode 編碼,在 Windows 作業系統中輸入 Unicode 編碼的方式如下: Microsoft Word or Wordpad:先輸入 unicode 的編碼,再按下 Alt + x,例如,在 word 中輸入 1f370,然後按下 Alt+x,就會顯示 🍰( &#x1f370)的字元 其他 Microsoft 所有應用程式:應用程式包括 Microsoft PowerPoint, Excel, VS Code 等程式,且要支援 Unicode 編碼的版本,都可以使用注音輸入法來輸入 Unicode 編碼;首先切換到注音輸入法的中文輸入模式,然後按下~鍵(Esc 下方的鍵) + u + Unicode 編碼,特別要注意輸入的數字是鍵盤上方的數字鍵,不可以使用 Number Pad 的數字鍵。 查詢 Unicode 編碼 Unicode編碼的對應字元可以連結到 The Unicode Consortium 的 Code Charts 網站,在網站中輸入你/妳想要字元的 Unicode 編碼,如此就可以找到這個 Unicode 編碼的字元,問題是:我們通常是心中有字元的圖像,或者是要先看到字元的樣子,才知道我們要使用...

Programming Tutorial Website

Foundation is front-end framework for website, 提供網頁設計者設計各種不同 devices 的網頁,它是使用 Sass, Compass 這兩種 CSS framework 發展而成的。整個專案是採用 Ruby 的套件管理方式來運作,安裝它相當容易,使用 Ruby 的 gem install zurb-foundation 來安裝,若要調整 Foundation 的內容,需要再安裝 Sass, Compass, 網路上有介紹 Sass, Compass 的書籍,使用這兩種 CSS framework 對於寫 CSS 則更具有彈性[1]。   在安裝這些套件時,看見 Ruby 有安裝這些套件的文件,只是不知道如何從 Ruby 系統中讀出這些文件? 目前對於 Ruby 的系統不熟悉,需要找些資料來了解。在尋找資料時,找到一個不錯的教學網站,名為 Programming tutorials and source code examples 有許多教學文件及原始程式碼,其中包括 C++, HTML, Ruby, GIMP, etc ...,也有許多 free HTML templates 可以下載,可以做為做為教學時的教材。   另外, jQurey EasyUI 是另外一種開發 Website 的 framework, 是基於 jQuery UI 的基礎上,讓使用者不需要寫 Javascript 就可以容易的建立 jQuery 的 UI 介面。 --------------------------------------------------------------- [1] http://www.slideshare.net/kurotanshi/compass-sass