1. <tt id="5hhch"><source id="5hhch"></source></tt>
    1. <xmp id="5hhch"></xmp>

  2. <xmp id="5hhch"><rt id="5hhch"></rt></xmp>

    <rp id="5hhch"></rp>
        <dfn id="5hhch"></dfn>

      1. 在Linux下制作HTML幻燈片的簡(jiǎn)單教程參考

        時(shí)間:2020-11-10 12:23:12 HTML DOM 我要投稿

        在Linux下制作HTML幻燈片的簡(jiǎn)單教程參考

          所見即所得的PPT是一個(gè)比較低效的東西,因?yàn)闆]有做到內(nèi)容與樣式相分離,在做幻燈片的時(shí)候要把一半的精力放在外觀而不是內(nèi)容上;復(fù)雜龐大的文件格式,不符合Unix的純文本哲學(xué),只適合在特定的GUI下通過鼠標(biāo)操作,無法通過文本編輯器修改,更難以用文本工具腳本處理;再加上微軟他家的格式不開放,各路開源不開源的Office產(chǎn)品搞出來了各種程度不同的兼容性,非常分裂。

          所以,有Web這樣一個(gè)開放的、純粹基于文本的業(yè)界標(biāo)準(zhǔn)就很重要。

          這篇主要講如何用Markdown這樣的輕量級(jí)標(biāo)記語言在編輯器中書寫文本內(nèi)容,用Pandoc迅速將其轉(zhuǎn)換成基于Web的演示文稿。如是,可以在開會(huì)前十分鐘根據(jù)事務(wù)提綱炮制出幾十頁(yè)的幻燈片,且不失美觀。

          準(zhǔn)備工作:安裝Pandoc

          首先,你需要安裝文本轉(zhuǎn)換的神器Pandoc:http://johnmacfarlane.net/pandoc/installing.html

          具體安裝方法參見文檔,在此不再贅述。

          $ cabal update

          $ cabal install pandoc

          書寫內(nèi)容

          內(nèi)容是演示文稿的主體。PowerPoint或OpenOffice Impress里面的“大綱”就是用來把握這個(gè)主體的視圖。這可以讓寫作者暫時(shí)忘記幻燈片的具體外觀、排版這些表面化的東西,把集中力放到整個(gè)演講的邏輯流程和提綱要領(lǐng)上。

          書寫HTML幻燈片可以像日常記筆記一樣簡(jiǎn)捷快速。實(shí)際上,這些幻燈片本身就是用輕量級(jí)標(biāo)記語言寫成的純文本,你可以用任何一種Pandoc支持的標(biāo)記語言(Markdown、org-mode、reST、Textile……)來書寫其內(nèi)容。在此以Markdown為例:

          % Nonsense Stuff

          % John Doe

          % March 22, 2005

          # In the morning

          ## Getting up

          - Turn off alarm

          - Get out of bed

          ## Breakfast

          - Eat eggs

          - Drink coffee

          # In the evening

          ## Dinner

          - Eat spaghetti

          - Drink wine

          ![picture of spaghetti](images/spaghetti.jpg)

          ## Going to sleep

          - Get in bed

          - Count sheep

          分級(jí)標(biāo)題、列表、插入圖片……等標(biāo)準(zhǔn)的Markdown語法均被支持,和平常用Markdown記筆記寫博客無異。

          為了讓Pandoc對(duì)不包含任何元信息的Markdown文本進(jìn)行處理生成幻燈片,在文本開頭需要包含三行以%打頭的元信息:標(biāo)題、作者和日期。

          為了生成合適的用于演示的HTML文檔,需要記住的另一點(diǎn)是:在默認(rèn)情況下每個(gè)二級(jí)標(biāo)題是一張獨(dú)立的幻燈片。這樣在寫作的時(shí)候,只需注意把每個(gè)二級(jí)標(biāo)題下的內(nèi)容控制在適當(dāng)?shù)拈L(zhǎng)度。

          列表的顯示效果可以人為設(shè)定,例如在幻燈片演示的時(shí)候逐條漸入,后文會(huì)提到。也可以使用$插入 TeX公式,Pandoc可以將其轉(zhuǎn)換為被大部分現(xiàn)代瀏覽器支持的MathML,或借助MathJax在較舊瀏覽器中顯示。

          也可以直接在文本中嵌入HTML,用于顯示Markdown等標(biāo)記語言不支持的表格,或控制字體大小,以及進(jìn)行其他更加復(fù)雜的排版。當(dāng)然,如果用到的HTML標(biāo)簽過多,這不是Markdown這些輕量級(jí)標(biāo)記語言的錯(cuò),也許是做幻燈片的方式出了問題。因?yàn)檠菔颈旧硪獋鬟_(dá)的是內(nèi)容,復(fù)雜的排版沒有任何意義。

          定義樣式

          目前Pandoc包含了對(duì)五種HTML幻燈片框架的支持:

          DZSlides

          Slidy

          S5

          Slideous

          reveal.js

          當(dāng)然,你實(shí)際上可以使用任何喜歡的幻燈片框架(比如Google I/O HTML5 slide template),只要讓Pandoc在渲染HTML時(shí)使用你指定的模板即可。

          自定義HTML模板

          首先,如果你知道如何寫CSS去定義頁(yè)面外觀、如何寫JavaScript讓

          元素動(dòng)起來,或者已經(jīng)有了一個(gè)不錯(cuò)的HTML幻燈片模板,你就可以直接讓Pandoc把Markdown轉(zhuǎn)換成純HTML片段,用來嵌到自己的模板里:

          $ pandoc slides.md -o slides.html

          生成一個(gè)完整的HTML頁(yè)面(包含、、標(biāo)簽和各種元信息):

          $ pandoc slides.md -o slides.html -s

          DZSlides

          當(dāng)然,我們完全沒有必要寫自己的HTML模板,因?yàn)镻andoc已經(jīng)提供了對(duì)多種幻燈片模板的支持。DZSlides便是其中最簡(jiǎn)單的一種,支持鍵盤操作→/←翻頁(yè),PgUp/PgDn,Home/End。

          Pandoc生成的DZSlides幻燈片中自包含了所需CSS和JavaScript,無需依賴任何外部文件。

          采用默認(rèn)模板渲染一個(gè)獨(dú)立的DZSlides幻燈片:

          $ pandoc slides.md -o slides.html -t dzslides -s

          若要對(duì)模板的樣式進(jìn)行調(diào)整,可以用--template指定自定義模板。默認(rèn)的模板為default.dzslides,因此上述命令等效于:

          $ pandoc slides.md -o slides.html -t dzslides --template default.dzslides

          可以從這里https://github.com/jgm/pandoc-templates找到原來的模板,自行修改后替換掉原先的模板。其余幻燈片框架與此相仿,以后不再贅述。

          Slidy

          HTML Slidy是W3C開發(fā)的一個(gè)極簡(jiǎn)主義HTML幻燈片模板,沒有任何多余的樣式,支持鼠標(biāo)單擊翻頁(yè),鍵盤操作→/←,PgUp/PgDn,Home/End。

          采用默認(rèn)模板渲染一個(gè)獨(dú)立的Slidy幻燈片:

          $ pandoc slides.md -o slides.html -t slidy -s

          或指定自定義模板:

          $ pandoc slides.md -o slides.html -t slidy --template default.slidy

          Pandoc生成的Slidy HTML依賴于http://www.w3.org/Talks/Tools/Slidy2/styles/slidy.css和http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js這兩個(gè)外部文件。若不想依賴http://www.w3.org/,可以將它們保存為本地文件。

          S5

          S5(Simple Standards-Based Slide Show System)是一個(gè)公有領(lǐng)域的HTML幻燈片規(guī)范。它支持鼠標(biāo)單擊翻頁(yè),鍵盤操作→/←,PgUp/PgDn,Home/End。

          為了使用S5作為幻燈片框架,需要從這里下載S5。解壓之后把S5文件夾中的ui/default拷貝到幻燈片所在路徑下,改名為s5/default即可。

          渲染幻燈片:

          $ pandoc slides.md -o slides.html -t s5 -s

          在S5的幻燈片界面上,鼠標(biāo)移到右下角可以看到若干控制選項(xiàng)。

          Slideous

          Slideous是另一個(gè)有些年頭的HTML幻燈片框架。支持鼠標(biāo)單擊翻頁(yè),鍵盤操作→/←,PgUp/PgDn,Home/End。

          下載http://goessner.net/download/prj/slideous/slideous.js和http://goessner.net/download/prj/slideous/slideous.css這兩個(gè)文件,放到本地目錄slideous/下即可。

          渲染幻燈片:

          $ pandoc slides.md -o slides.html -t slideous -s

          Slideous的界面上提供了比較豐富的控制選項(xiàng)。

          reveal.js

          reveal.js這東西已經(jīng)紅得不能更紅了,最近開始火起來的WYSIWYG在線幻燈片工具slid.es也是基于它。

          reveal.js的設(shè)計(jì)風(fēng)格(字體、HTML5/CSS3效果)比起前面幾個(gè)框架更加現(xiàn)代,所以如果沒有特別的理由(舊瀏覽器兼容性)的話,reveal.js果然還是最應(yīng)該推薦的一個(gè)。

          雖說reveal.js本身就提供對(duì)Markdown語法的支持,不過Pandoc的好處很明顯,那就是一條命令解決問題,不需要用戶接觸任何HTML。

          首先需要從GitHub上獲取https://github.com/hakimel/reveal.js,將reveal.js同名的文件夾放在幻燈片所在目錄下即可:

          $ git clone https://github.com/hakimel/reveal.js

          渲染幻燈片:

          $ pandoc slides.md -o slides.html -t revealjs -s

          除了默認(rèn)的外觀主題以外,reveal.js還提供了多個(gè)主題可供選擇,

          $ pandoc slides.md -o slides.html -t revealjs -s -V theme=beige

          default:(默認(rèn))深灰色背景,白色文字

          beige:米色背景,深色文字

          sky:天藍(lán)色背景,白色細(xì)文字

          night:黑色背景,白色粗文字

          serif:淺色背景,灰色襯線文字

          simple:白色背景,黑色文字

          solarized:奶油色背景,深青色文字

          LaTeX Beamer

          最后,雖然不是HTML,Pandoc也可以用來將Markdown文件渲染成LaTeX beamer樣式的PDF幻燈片。如需要打印而不是演示時(shí)特別有用。

          $ pandoc slides.md -o slides.pdf -t beamer

          更多設(shè)置

          幻燈片級(jí)別(Slide level)

          在前文的例子里看到,

          # In the morning

          ## Getting up

          - Turn off alarm

          - Get out of bed

          1級(jí)標(biāo)題In the morning后面緊跟2級(jí)標(biāo)題Getting up,而2級(jí)標(biāo)題Getting up后面的內(nèi)容是顯示在幻燈片上的主體內(nèi)容,因此這里的Slide level為2。這意味著每個(gè)2級(jí)標(biāo)題生成一張幻燈片。高于2級(jí)的.標(biāo)題(1級(jí)標(biāo)題)生成一張獨(dú)立的僅包含標(biāo)題的幻燈片,而低于2級(jí)的標(biāo)題(3級(jí)標(biāo)題)將存在于上一級(jí)標(biāo)題的幻燈片中,不單獨(dú)生成新的幻燈片。

          可以使用--slide-level選項(xiàng)覆蓋默認(rèn)的Slide level。

          在reveal.js模板下,由于幻燈片的滾動(dòng)方向可以是二維的(鍵盤→←↑↓),所以1級(jí)標(biāo)題渲染為水平方向的幻燈片,2級(jí)標(biāo)題渲染為豎直方向的幻燈片。

          用來強(qiáng)制生成新的幻燈片。

          漸進(jìn)顯示

          生成幻燈片時(shí)加入-i選項(xiàng),用于控制列表的顯示效果(逐條漸入)。

          $ pandoc slides.md -o slides.html -t slidy -s -i

          兩段文字顯示之間的人為停頓,用如下分割線:

          . . .

          TeX公式

          可以直接插入TeX公式:

          $e^x =sum_{n=0}^inftyfrac{x^n}{n!} =lim_{nrightarrowinfty} (1+x/n)^n$

          MathML的渲染效果為:

          ex=∑n=0∞xnn!=limn→∞(1+x/n)n

          控制TeX公式渲染方式的選項(xiàng)有--mathml,--webtex,--mathjax和--latexmathml。(Chrome和Firefox均支持MathML)

          代碼高亮風(fēng)格

          控制代碼高亮風(fēng)格的選項(xiàng)有:

          --highlight-style pygments

          --highlight-style kate

          --highlight-style monochrome

          --highlight-style espresso

          --highlight-style haddock

          --highlight-style tango

          --highlight-style zenburn

          自定義CSS

          你當(dāng)然可以通過修改相應(yīng)模板文件夾下的CSS來實(shí)現(xiàn)自定義外觀,不過也可以使用--css指定任何現(xiàn)成的CSS文件。

          提示板

          首先,提示板的功能僅適用于reveal.js。

          其次,由于瀏覽器的本地安全策略,需使用該功能的幻燈片必須在HTTP服務(wù)器上運(yùn)行。

          在Markdown中插入標(biāo)簽

          的小抄:

          This is my note.

          - It can contain markdown

          - like this list

          使用鍵盤s鍵打開提示板。當(dāng)然,這個(gè)提示板是用來給演講者自己看的,是不用mirror到外接投影儀的。

        【在Linux下制作HTML幻燈片的簡(jiǎn)單教程參考】相關(guān)文章:

        1.HTML表單標(biāo)記簡(jiǎn)單教程

        2.華為TA128在LINUX下的簡(jiǎn)單設(shè)置

        3.華為認(rèn)證:華為TA128在LINUX下的簡(jiǎn)單設(shè)置

        4.HTML語言的網(wǎng)頁(yè)教程

        5.簡(jiǎn)單HTML5初步入門教程

        6.怎么在linux的CLI下運(yùn)行php文件

        7.新手如何制作幻燈片

        8.用PS簡(jiǎn)單制作字體倒影的教程

        国产高潮无套免费视频_久久九九兔免费精品6_99精品热6080YY久久_国产91久久久久久无码

        1. <tt id="5hhch"><source id="5hhch"></source></tt>
          1. <xmp id="5hhch"></xmp>

        2. <xmp id="5hhch"><rt id="5hhch"></rt></xmp>

          <rp id="5hhch"></rp>
              <dfn id="5hhch"></dfn>