GitHub star 54K + 2K! This is the right posture for programmers to write a full powerpoint presentation!

Hi, I’m your cat brother, a super cat who doesn’t like to eat fish and doesn’t like cats

preface

As a perennial cat star on GitHub, I found a lot of good front-end open source projects and share them with you here.

Public number: Front-end GitHub, focus on mining the outstanding front-end open source projects on GitHub, collect, collate, recommend the industry high-quality front-end resource collection, excellent tools, libraries, good tutorials, understand the industry more excellent code, tools, the industry’s latest technology, erase your front-end information asymmetry.

How to find good open Source projects? Check out GitHub’s Tips for Finding Good Open Source Projects

Here are the highlights of the 10th issue of GitHub.

---

I believe you all have PPT sharing experience, super Cat has always felt that using powerpoint to write slides is too much trouble, low efficiency.

As a programmer, especially the front end, is there a more simple and high – force grid slide implementation? There must be!

Today we are going to show you the correct posture for using Markdown and HTML to write a full PPT!

reveal-md

Reveal-md is an open source project that uses Markdown to make PPT presentation, with a star of 2.1K.

The installation

npm install -g reveal-md
Copy the code

use

reveal-md path/demo.md
Copy the code

Where path/demo.md is the address of your Markdown file, either the local address or the URL.

Use the Markdown file demo.md as follows:

Focus on mining outstanding front-end open source projects to smooth out your front-end information asymmetry. Covers JavaScript, Vue, React, Node, applets, Flutter, Deno, HTML, CSS and more! -- ## Front-end resource Collection * Collect, collate and recommend the industry's high-quality front-end resource collection * the best tools, libraries, good tutorials * Understand the industry's best code, tools, the industry's latest technologyCopy the code

Run the reveal-md. /demo.md command on the terminal

The effect is as follows:

Subject to use

Topics covered are as follows:

• beige
• black
• blood
• league
• moon
• night
• serif
• simple
• sky
• solarized
• white

For example, specify the league theme to use:

reveal-md path/demo.md --theme league
Copy the code

The effect is as follows:

You can also specify your own theme, that is, your own CSS style. Using a custom theme, the default theme will be overridden.

For example, if the custom file is located in./theme/my-custom.css, specify the corresponding path.

reveal-md slides.md --theme theme/my-custom.css
Copy the code

Project Address:

Github.com/webpro/reve…

reveal.js

This is a CSS based 3D slide tool, star 54K.

The advantage of reveal.js for PPT is that it can directly write static text using Markdown language and add interactive animations supported by VARIOUS HTML languages, and then directly convert them into PPT by Pandoc.

Reveal.js is an open source HTML presentation framework. It makes it free for anyone using a Web browser to create fully functional and beautiful presentations.

The framework has a wide range of features, including nested slides, Markdown support, automatic animation, PDF exports, speaker annotations, LaTeX support, syntax highlighting code and more.

Reveal.js has the following features:

• Support tabs to separate each slide

• You can use Markdown to write content

• Supports PDF export

• Supporting speech notes

• Provide JavaScript apis to control pages

• Multiple default themes and switching modes are provided

• Adaptive mobile and PC

use

There are three modes: basic use, complete installation, and NPM installation.

The basic use

1. Download the latest manifest.js version at github.com/hakimel/rev…

2. Unzip and replace the sample content in index.html with your own

3. Open index.html in your browser to view it

Complete the installation

Installation:

git clone https://github.com/hakimel/reveal.js.git
Copy the code

cd reveal.js && npm install
Copy the code

npm start
Copy the code

Go to http://localhost:8000 to view your presentation.

Installation in NPM mode

npm install reveal.js
# or
yarn add reveal.js
Copy the code

Direct import use

import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';

let deck = new Reveal({
   plugins: [ Markdown ]
})
deck.initialize();
Copy the code

You also need to add the reveal.js style and theme.

<link rel="stylesheet" href="/node_modules/reveal.js/dist/reveal.css">
<link rel="stylesheet" href="/node_modules/reveal.js/dist/theme/black.css">
Copy the code

use

The content of the slides needs to be included in the

A section is a slide. When a section is contained within a section, it is a vertical slide.

How do you understand that? A horizontal slide represents a chapter, and a vertical slide represents a section of a chapter. The horizontal slide then switches left and right while the vertical slide switches up and down.

For example:

<div class="reveal">
    <div class="slides">
        <section>Single Horizontal Slide</section>
        <section>
            <section>Vertical Slide 1</section>
            <section>Vertical Slide 2</section>
        </section>
    </div>
</div>
Copy the code

HTML implementation

Title and body

The content of the section is the content of the slide, you can use h2 tag for title, p for content. If you need a red font, you can set the color of the style to red.

When a page needs a special background color, you can use data-background to set the section color. Data-background-transition represents the background transition effect.

For example:

<section data-background-transition="zoom" data-background="#dddddd">
Copy the code

If the text needs to appear paragraph by paragraph. You can use fragments.

For Example:

<p class="fragment"></p>
Copy the code

code

Reveal.js uses highlight.js to support code highlighting. This can be done by writing a code tag, data-trim meaning to remove excess whitespace.

For Example:

<pre><code data-trim> console.log('hello reveal.js! '); </code></pre>Copy the code

annotation

In your presentation, you’ll use notes. For notes,

For Example:

<aside class="notes"> </aside>Copy the code

On the slides page, press the S key to bring up the notes page, which contains the current slide, the next chapter slide, notes, and the time of the slide.

Markdown implementation

Reveal.js not only supports HTML representations to implement content, it can also implement content through Markdown. To implement content using markdown, you add the data-markdown attribute to the section identifier, and then write the markdown content to a Text/Template script.

For Example:

<section data-markdown> <script type="text/template"> ## Page title A paragraph with some text and a [link](http://hakim.se). </script> </section> Background color, fragment function implementation, can be implemented through annotations. For Example: <section data-markdown> <script type="text/template"> <! -- .slide: data-background="#ff0000" --> - Item 1 <! -- .element: class="fragment" data-fragment-index="2" --> - Item 2 <! -- .element: class="fragment" data-fragment-index="1" --> </script> </section>Copy the code

External MD file

Reveal.js can be parsed by referencing an external Markdown file.

For Example:

<section data-markdown="example.md"  
         data-separator="^\n\n\n"  
         data-separator-vertical="^\n\n"  
         data-separator-notes="^Note:"  
         data-charset="iso-8859-15">
</section>
Copy the code

Paging implementation

A Markdown file can contain multiple chapters in a row. You can divide sections within sections using the properties data-separator, data-separator-vertical.

For Example:

<section data-separator="-- "data-separator-vertical="--" > <script type="text/template"> # theme 1- theme 1- content 1- Theme 1- Content 2 -- ## Topic 1- Content 1 Content 1- Detail 1 -- ## Topic 1- Content 2 Content 1- detail 2 -- # topic 2 </script> </section>Copy the code

annotation

Add data-separator-notes=”^Note:” to the section property to specify Note: to be the comment for the current slide.

For Example:

# Title
## Sub-title

Here is some content...

Note:
This will only display in the notes window.
Copy the code

Export PDF

• Url in the browser to open the file to add the print – PDF can, for example: http://localhost:8000/demo.html/? Print-pdf, you can test the official revealjs.com/demo?print-…

• Open the PDF dialog box in the browser. The shortcut key is CTRL/CMD + P

• The margin is set to none

• Check the background image

• I’ll just hit Save

More topics

Reveal.js offers a variety of styles. This can be done by referring to different topics. For specific themes, see the CSS file under reveal.js/ CSS /theme.

conclusion

With reveal.js, you can just focus on the content and ignore the various switching effects.

And can use Markdown to achieve, greatly improve the writing efficiency. The resulting HTML file can be deployed to the server so that it can be shared using only the network, rather than the usb flash drive.

Github.com/hakimel/rev…

The last

These two divine projects do much more than that. How much more?

Take a look at Github’s Readme. md to see what a web page can’t do in this era of big front-end.

Well, see here, the next powerpoint presentation, you should be able to install force in front of everyone 😉

That’s it for GitHub 10

Unconsciously, it has been written to the 10th issue, has shared nearly 80 good front-end projects, to the future of the article please see the warehouse below, click very dangerous, please be careful to enter!

[front-end GitHub] : github.com/FrontEndGit…

How to find good open source projects on GitHub and how to use GitHub for accurate search tips.

Can add super cat WX: CB834301747, chat together front end.

If you search “front-end GitHub” on wechat and reply “ebook”, you will get 160 front-end elite books.

Past pure text

• 11 must-have online tools for the hot front end, finally have time to work

• 10 top GitHub Interviews to Build your own Salary Bonanza

• Get inspired to write CSS on GitHub!

• 11 super popular factory front-end code specifications, you can write code like poetry!

• With all due respect, you probably don’t even know how to do GitHub search

• GitHub’s most popular, most worthy front-end learning data structures and algorithms project! No one of

• The world’s most popular WEB development learning route! No one! It received nearly 1W likes on GitHub in 3 days

• Github star 1.6W+, programmers must be aware of the “hidden rules” again popular, had known that would not be bald

Think it works? Like to collect, by the way point like it, your support is the biggest encouragement of super cat!