Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to make HTML slides under Linux". In daily operation, I believe many people have doubts about how to make HTML slides under Linux. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how to make HTML slides under Linux". Next, please follow the editor to study!

Preparation: install Pandoc

First, you need to install the text conversion artifact Pandoc: http://johnmacfarlane.net/pandoc/installing.html

See the documentation for the specific installation method, and I won't repeat it here.

The code is as follows:

$cabal update

$cabal install pandoc

Writing content

The content is the main body of the presentation. The outline in PowerPoint or OpenOffice Impress is used to grasp the view of the subject. This allows the writer to temporarily forget the superficial things such as the specific appearance and typesetting of the slide and focus on the logical flow and outline of the whole speech.

Writing HTML slides can be as simple and fast as taking notes every day. In fact, the slides themselves are plain text written in lightweight markup languages, and you can use any markup language supported by Pandoc (Markdown, org-mode, reST, Textile... ) to write its contents. Here, take Markdown as an example:

The code is as follows:

% 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

Graded titles, lists, insert pictures. The standard Markdown syntax is supported, which is the same as using Markdown to take notes and write a blog.

In order for Pandoc to process Markdown text that does not contain any meta-information to generate slides, you need to include three lines of meta-information starting with% at the beginning of the text: title, author, and date.

In order to generate an appropriate HTML document for presentation, another thing to keep in mind is that by default each secondary title is a separate slide. In this way, when writing, you only need to pay attention to controlling the content under each second-level title to the appropriate length.

The display effect of the list can be artificially set, for example, during the slide presentation, which will be mentioned later. You can also use $to insert TeX formulas, which Pandoc can convert to MathML supported by most modern browsers, or display in older browsers with the help of MathJax.

You can also embed HTML directly in the text to display tables that are not supported by markup languages such as Markdown, or to control font size, and for other more complex typesetting. Of course, if you use too many HTML tags, it's not the fault of lightweight markup languages like Markdown, but maybe there's something wrong with the way you make slides. Because the presentation itself is to convey the content, complex typesetting does not make any sense.

Define a styl

Pandoc currently includes support for five HTML slide frameworks:

DZSlides

Slidy

S5

Slideous

Reveal.js

Of course, you can actually use any slide frame you like (such as Google I HTML5 slide template O HTML5 slide template), as long as Pandoc uses the template you specify when rendering HTML.

Customize the HTML template

First of all, if you know how to write CSS to define the appearance of a page, how to write JavaScript to make elements move, or if you already have a good HTML slide template, you can just ask Pandoc to convert Markdown into pure HTML fragments and embed them into your own template:

The code is as follows:

$pandoc slides.md-o slides.html

Generate a complete HTML page (containing, tags, and various meta-information):

The code is as follows:

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

DZSlides

Of course, there is no need to write our own HTML templates, because Pandoc already provides support for a variety of slide templates. DZSlides is one of the simplest, support keyboard operation → / ← page turning, PgUp/PgDn,Home/End.

The DZSlides slides generated by Pandoc contain the required CSS and JavaScript without relying on any external files.

Render a separate DZSlides slide using the default template:

The code is as follows:

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

To adjust the style of a template, you can specify a custom template with-- template. The default template is default.dzslides, so the above command is equivalent to:

The code is as follows:

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

You can find the original template here in https://github.com/jgm/pandoc-templates, modify it yourself and replace the original template. The rest of the slide frames are similar and will not be repeated in the future.

Slidy

HTML Slidy is a minimalist HTML slide template developed by W3C, without any extra style, supporting mouse click to turn the page, keyboard operation → / ←, PgUp/PgDn,Home/End.

Render a separate Slidy slide using the default template:

The code is as follows:

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

Or specify a custom template:

The code is as follows:

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

The Slidy HTML generated by Pandoc depends on two external files, http://www.w3.org/Talks/Tools/Slidy2/styles/slidy.css and http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js. If you don't want to rely on http://www.w3.org/, you can save them as local files.

S5

S5 (Simple Standards-Based Slide Show System) is a public domain HTML slide show specification. It supports mouse click to turn the page, keyboard operation → / ←, PgUp/PgDn,Home/End.

In order to use S5 as the slide framework, you need to download S5 here. After decompressing, copy the ui/default in the S5 folder to the path where the slide is located, and rename it to s5/default.

Render the slide:

The code is as follows:

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

On the slide interface of S5, you can see several control options by moving the mouse to the lower right corner.

Slideous

Slideous is another HTML slide framework that has been around for some years. Support mouse click to turn the page, keyboard operation → / ←, PgUp/PgDn,Home/End.

Download the http://goessner.net/download/prj/slideous/slideous.js and http://goessner.net/download/prj/slideous/slideous.css files and put them in the local directory slideous/.

Render the slide:

The code is as follows:

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

Slideous provides a wealth of control options on the interface.

Reveal.js

Reveal.js is so popular that it can't be more popular, and the WYSIWYG online slide tool slid.es, which has recently become popular, is also based on it.

Reveal.js 's design style (fonts, HTML5/CSS3 effects) is more modern than the previous frameworks, so if there is no special reason (old browser compatibility), reveal.js is the most recommended one.

Although reveal.js itself provides support for Markdown syntax, the benefit of Pandoc is that one command solves the problem and does not require the user to contact any HTML.

First of all, you need to get the https://github.com/hakimel/reveal.js from GitHub, and put the folder with the same name as reveal.js in the directory where the slide is located:

The code is as follows:

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

Render the slide:

The code is as follows:

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

In addition to the default theme, reveal.js provides several themes to choose from

The code is as follows:

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

Default: (default) dark gray background, white text

Beige: beige background, dark text

Sky: sky blue background, thin white text

Night: black background, white bold text

Serif: light background, gray serif text

Simple: White background, black text

Solarized: cream background, dark cyan text

LaTeX Beamer

Finally, although not HTML,Pandoc, it can be used to render Markdown files into LaTeX beamer-style PDF slides. It is especially useful if you need to print rather than demonstrate.

The code is as follows:

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

More Settin

Slide level (Slide level)

As seen in the previous example,

The code is as follows:

# In the morning

# # Getting up

-Turn off alarm

-Get out of bed

The level 1 title In the morning is followed by the level 2 title Getting up, and the content after the level 2 title Getting up is the main content displayed on the slide, so the Slide level here is 2. This means that each level 2 title generates a slide. A title above level 2 (level 1 title) produces a separate slide that contains only the title, while a title below level 2 (level 3 title) will exist in the slide of the previous level title and will not generate a new slide separately.

You can override the default Slide level with the-- slide-level option.

Under the reveal.js template, because the scrolling direction of the slide can be two-dimensional (keyboard →←↑↓), the level 1 title is rendered as a horizontal slide, and the level 2 title is rendered as a vertical slide.

The gorgeous dividing line:

-

Used to force the generation of new slides.

Progressive display

Add the-I option when generating slides to control the display of the list (step by step).

The code is as follows:

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

The artificial pause between the two paragraphs is shown with the following dividing line:

. . .

TeX formula

You can insert the TeX formula directly:

The code is as follows:

$e ^ x =\ sum_ {rightarrow 0} ^\ infty\ frac {x ^ n} {n!} =\ lim_ {n\ rightarrow\ infty} (1+x/n) ^ n $

The rendering effect of MathML is as follows:

The code is as follows:

Ex= ∑ (1+x/n) 0 ∞ xnnails limn →∞ (1+x/n) n

The options that control how the TeX formula is rendered are-- mathml,--webtex,--mathjax and-- latexmathml. (both Chrome and Firefox support MathML)

Code highlight style

The options to control the highlighting style of the code are:

-- highlight-style pygments

-- highlight-style kate

-- highlight-style monochrome

-- highlight-style espresso

-- highlight-style haddock

-- highlight-style tango

-- highlight-style zenburn

Custom CSS

Of course, you can customize the look and feel by modifying the CSS in the corresponding template folder, but you can also use-- css to specify any ready-made CSS file.

Cue board

First of all, the function of the cue board is only applicable to reveal.js.

Second, because of the browser's local security policy, slides that need to use this feature must run on the HTTP server.

A cheat sheet for inserting tags in Markdown:

The code is as follows:

This is my note.

-It can contain markdown

-like this list

Use the keyboard s key to open the cue board. Of course, this cue board is for the speaker to see, without mirror to the external projector.

At this point, the study on "how to make HTML slides under Linux" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.