Markdown + Pandoc → HTML slide Quick Start

Markdown + Pandoc → HTML slide Quick Start

Wysiwyg ppt is a relatively inefficient task, because content and style are not separated, half of the effort should be put on the appearance rather than on the content; complex and huge file formats do not conform to the Unix plain text philosophy. They are only suitable for mouse operations under a specific GUI and cannot be modified through the text editor, making it more difficult to use a text tool script for processing; in addition, the format of Microsoft's family is not open, and various open-source and non-open-source Office products have come up with different degrees of compatibility, which is very split.

Therefore, an open, purely text-based industry standard such as Web is very important.

This article mainly describes how to use a lightweight markup language such as Markdown to write text content in the editor and quickly convert it into a Web-based presentation using Pandoc. If so, dozens of slides can be prepared based on the transaction outline in the first ten minutes of the meeting, without losing the appearance.

Use LiteIDE to write Markdown documents

Remarkjs: Use Markdown for slides

New features of the Markdown editor CuteMarkEd

Markdown syntax description

Installation of Markdown in Linux and common syntax

Insert mathematical formula in Markdown

Preparations: Install Pandoc

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

For more information about the installation method, see the document.

1. $ Cabal update
2. $ Cabal install pandoc

Writing content

Content is the subject of the presentation. The "outline" in PowerPoint or OpenOffice Impress is used to grasp the view of this subject. This allows the writer to temporarily forget the specific appearance and layout of the slides, and focus on the entire logical process and outline of the presentation.

Writing HTML slides can be as simple and fast as taking notes. In fact, these slides are purely text written in a lightweight markup language. You can use any Markup Language (Markdown, org-mode, reST, Textile…) supported by Pandoc ......) To write its content. Take Markdown as an example:

1. % NonsenseStuff
2. % JohnDoe
3. % March22 2005
4.  
5. # In the morning
6.  
7. # Getting up
8.  
9. -Turn off alarm
10. -Getout of bed
11.  
12. # Breakfast
13.  
14. -Eat eggs
15. -Drink coffee
16.  
17. # In the evening
18.  
19. # Dinner
20.  
21. -Eat spaghetti
22. -Drink wine
23.  
24. ------------------
25.  
26. ! [Picture of spaghetti] (images/spaghetti.jpg)
27.  
28. # Going to sleep
29.  
30. -Getin bed
31. -Count sheep

Classify titles, lists, and insert images ...... And other standard Markdown syntaxes are supported.

In order for Pandoc to process Markdown text that does not contain any meta information to generate a slide, the text must start with three lines of meta information starting with %: title, author, and date.

To generate an appropriate HTML document for demonstration, remember that by default, each level-2 title is an independent slide. In this way, you only need to pay attention to the appropriate length of the content under each level-2 title.

The Display Effect of the list can be set manually. For example, you can gradually import the list one by one during the slide demonstration, which will be mentioned later. You can also use the $ insert TeX formula. Pandoc can convert it to MathML supported by most modern browsers, or display it in older browsers with MathJax.

You can also embed HTML directly in the text to display tables not supported by Markdown and other Markup languages, or to control the font size and perform other more complex typographical operations. Of course, if too many HTML tags are used, this is not the fault of the lightweight Markup Language Markdown. It may be a problem with the slide method. Because the demonstration itself needs to convey content, complicated typographical layout does not make any sense. Think about the Gaoqiao stream briefing method.

Define Style

Currently, Pandoc supports five HTML slide frameworks:

• DZSlides
• Slidy
• S5
• Slideous
• Reveal. js

Of course, you can actually use any of your favorite slide frameworks (such as Google I/O HTML5 slide template), as long as Pandoc uses the template you specified when rendering HTML.

Custom HTML Template

First, if you know how to write CSS to define the page appearance, How to Write JavaScript to make <div> elements move, or you already have a good HTML slide template, you can directly let Pandoc convert Markdown into HTML fragments and embed them into your own template:

1. $ Pandoc slides. md-o slides.html

Generate a complete HTML page (including

1. $ Pandoc slides. md-o slides.html-s

DZSlides

Of course, there is no need to write our own HTML template, because Pandoc already provides support for multiple slide templates. DZSlides is the simplest one. It supports keyboard operations →/seek paging, PgUp/PgDn, and Home/End.

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

Use the default template to render an independent DZSlides slide:

1. $ Pandoc slides. md-o slides.html-t dzslides-s

To adjust the template style, you can use -- template to specify a custom template. The default template is default. dzslides. Therefore, the preceding command is equivalent:

1. $ Pandoc slides. md-o slides.html-t dzslides -- templatedefault. dzslides

Please refer to the following link for more information: https://github.com/jgm/pandoc-templates. The rest of the slide frameworks are similar to this and will not be repeated later.

Slidy

HTML Slidy is a minimalistic HTML slide template developed by W3C. It does not have any redundant styles. You can click the mouse to flip pages, perform keyboard operations →/←, PgUp/PgDn, Home/End.

Use the default template to render an independent Slidy slide:

1. $ Pandoc slides. md-o slides.html-t slidy-s

Or specify a custom template:

1. $ Pandoc slides. md-o slides.html-t slidy -- templatedefault. slidy

The Slidy HTML generated by Pandoc depends on idea. If you do not want to rely on http://www.w3.org/, you can save them as your files.

S5

Simple Standards-Based Slide Show System (S5) is a public HTML Slide specification. It allows you to click the mouse to flip the page and perform keyboard operations →/else, PgUp/PgDn, Home/End.

To use S5 as the slide frame, download S5 from here. Decompress the package and copy the ui/default in the S5 folder to the path where the slide is located. rename it s5/default.

Rendering slides:

1. $ Pandoc slides. md-o slides.html-t s5-s

On the S5 slide interface, move the mouse to the bottom right corner to view several control options.

Slideous

Slideous is another HTML slide frame of some years. You can click the mouse to flip the page and perform keyboard operations →/else, PgUp/PgDn, Home/End.

Download idea.

Rendering slides:

1. $ Pandoc slides. md-o slides.html-t slideous-s

The Slideous interface provides a wide range of control options.

Reveal. js

Reveal. js is already red and cannot be reddened. Recently, WYSIWYG online slide tool slid. es is also based on it.

Reveal. the js design style (font, HTML5/CSS3 effect) 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 the Markdown syntax, the benefit of Pandoc is obvious, that is, a command to solve the problem, without the need for users to access any HTML.

First, you need to obtain the token from GitHub:

1. $ Git clone https://github.com/hakimel/reveal.js

Rendering slides:

1. $ Pandoc slides. md-o slides.html-t revealjs-s

In addition to the default appearance themes, reveal. js also provides multiple themes to choose from,

1. $ 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, white text
• Night: black background, white bold text
• Serif: light background, gray lined text
• Simple: white background, black text
• Solarized: Milk background, dark blue text

LaTeX Beamer

Finally, although it is not HTML, Pandoc can also be used to render the Markdown file into a PDF slide in the LaTeX beamer style. It is particularly useful for printing, not demonstration.

1. $ Pandoc slides. md-o slides.pdf-t beamer

For more details, please continue to read the highlights on the next page:

1 2 Next Page