GitHub standard star 54K + 2K! This is the correct posture for programmers to write full ppt!

Time:2022-5-8

GitHub standard star 54K + 2K! This is the correct posture for programmers to write full ppt!

Hello, I’m your cat brother, a super cat who doesn’t like fish and meow~

preface

Cat brother is a cat star who haunts GitHub all year round, so he has found many good front-end open source projects, which I share with you here.

Official account:Front end GitHub, focus on mining excellent front-end open source projects on GitHub, collect, sort out and recommend a collection of high-quality front-end resources in the industry, excellent tools, libraries and good tutorials, understand better codes, tools and the latest technology in the industry, and smooth out your front-end information asymmetry.

How to find good open source projects at ordinary times, you can see this article:Mining fairy skills on GitHub – how to find excellent open source projects

The following is the 10th essence of [front end GitHub].

GitHub standard star 54K + 2K! This is the correct posture for programmers to write full ppt!


I believe everyone has had the experience of PPT sharing. Super cat has always felt that writing slides with PowerPoint is too troublesome and inefficient.

As a programmer, especially the front end, is there a simpler and more powerful way to implement slides? There must be!

Today, we bring you the correct posture of using markdown and HTML to write full ppt!

reveal-md

Reveal MD is an open source project that uses markdown for PPT display. It is marked star 2.1k.

install

npm install -g reveal-md

use

reveal-md path/demo.md

Among them,path/demo.mdIs your markdown file address. You can use local address or URL.

Use the following markdown file demo md :

##Front end GitHub

*Large front-end collection
*GitHub excellent open source project recommendation

---

##Content

>Focus on mining excellent front-end open source projects and wipe out your front-end information asymmetry.

It covers JavaScript, Vue, react, node, applet, fluent, DeNO, HTML, CSS, etc!


---

##Front end resource collection

*Collect, sort out and recommend a collection of high-quality front-end resources in the industry
*Excellent tools, libraries and tutorials
*Understand better codes, tools and the latest technology in the industry

Run the command at the terminal:reveal-md ./demo.md

The effect is shown in the figure:

GitHub standard star 54K + 2K! This is the correct posture for programmers to write full ppt!

Theme use

The topics included are as follows:

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

For example, specify the theme of League to use:

reveal-md path/demo.md --theme league

The effect is shown in the figure:

GitHub standard star 54K + 2K! This is the correct posture for programmers to write full ppt!

You can also specify your own theme, that is, your own CSS style. After using a custom theme, the default theme will be overwritten.

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

reveal-md slides.md --theme theme/my-custom.css

Project address:

https://github.com/webpro/rev…

reveal.js

GitHub standard star 54K + 2K! This is the correct posture for programmers to write full ppt!

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

Reveal. The advantage of PPT with JS is that you can use markdown language to write static text directly, and you can add interactive animation supported by various HTML languages, and then convert it directly into ppt by pandoc.

reveal. JS is an open source HTML presentation framework. It enables anyone using a web browser to create a fully functional and beautiful presentation for free.

The framework has a wide range of functions, including nested slides, markdown support, automatic animation, PDF export, speaker comments, latex support, syntax highlighting code and so on.

reveal. JS has the following features:

  • Support labels to distinguish each slide
  • You can use markdown to write content
  • Support PDF export
  • Supporting speech notes
  • Provide JavaScript API to control the page
  • Multiple default themes and switching modes are provided
  • Adaptive mobile terminal and PC terminal

use

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

Basic use

  1. Download the latest manifest JS versionhttps://github.com/hakimel/reveal.js/archive/master.zip
  2. Unzip and index Replace the sample content in HTML with your own content
  3. Open index. In the browser HTML to view

Complete installation

Installation:

git clone https://github.com/hakimel/reveal.js.git
cd reveal.js && npm install
npm start

Openhttp://localhost:8000View your presentation.

NPM installation

npm install reveal.js
# or
yarn add reveal.js

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();

You also need to add review JS style andtheme.

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

use

The content of the slide needs to be included in<div class="reveal"> <div class="slides">In the label.

OnesectionIt’s a slide. WhensectionIncluded insectionWhen in, it is a vertical slide.

How to understand? It can be understood that the horizontal slide represents a chapter and the vertical slide represents a section in a chapter. Then the horizontal slides are switched from left to right, while the vertical slides are switched from top to bottom.

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>

HTML implementation

Title and body

sectionThe content in is the content of the slide. You can use ith2Label markingtitlepRepresents the content. If you need a red font, you can set it directlystyleofcolorbyred

When a page needs a special background color, you can usedata-backgroundstaysectionSet on,data-background-transitionRepresents the transition effect of the background.

For example:

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

If necessary, the text appears paragraph by paragraph. have access tofragment

For Example:

<p class="fragment"></p>

code

reveal. JS usagehighlight.jsTo support code highlighting. Can write directlycodeTags,data-trimIndicates the removal of redundant spaces.

For Example:

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

notes

Notes will be used in the speech. For notes, you can use<aside class="notes">To achieve.

For Example:

<aside class="notes">
  Here are the notes.
</aside>

On the slide page, press the s key to call up the note page, which contains the current slide, the next chapter slide, notes, and slide playback time.

Markdown implementation

reveal. JS not only supportshtmlThe content can also be realized throughmarkdownTo implement content. usemarkdownWhen implementing content, you need tosectionMark additiondata-markdownProperty, and thenmarkdownWrite content to atext/templateIn the 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, the realization of fragment function, can be realized through annotation. 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>

External MD file

reveal. JS can reference an externalmarkdownFile to parse.

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>

Paging implementation

A markdown file can contain multiple chapters in succession. Can be insectionPass attribute indata-separator, data-separator-verticalTo divide the chapters.

For Example:

<section data-separator="---" data-separator-vertical="--"  >
  <script type="text/template">
    #Topic 1
    -Topic 1 - content 1
    -Topic 1 - content 2
    --
    ##Topic 1-内容1
    Content 1 - detail 1
    --
    ##Topic 1-内容2
    Content 1 - detail 2
    ---
    #Topic 2
  </script>
</section>

notes

Add to sectiondata-separator-notes="^Note:"Property, you can specifyNote:The following contents are the notes of the current slide.

For Example:

# Title
## Sub-title

Here is some content...

Note:
This will only display in the notes window.

Export pdf

  • Add on the URL of the file opened by the browserprint-pdfThat is, for example:http://localhost:8000/demo.html/?print-pdf, you can test the officialrevealjs.com/demo?print-pdf
  • Open the pop-up box saved as PDF in the browser, and the shortcut key is Ctrl / CMD + P
  • Margin set to none
  • Tick the background graphic
  • Click save

GitHub standard star 54K + 2K! This is the correct posture for programmers to write full ppt!

multiple-topic

reveal. JS provides a variety of styles. This can be achieved by referencing different topics. View specific topicsreveal.js/css/themeLowercssDocuments.

summary

usereveal.jsTo achieve slides, you can only focus on the content and ignore various switching effects.

And it can be usedmarkdownIt greatly improves the writing efficiency. For the last generatedhtmlFiles can be deployed to the server, so that they can be shared only through the network, and there is no need to copy them with USB flash disk.

https://github.com/hakimel/re…

GitHub standard star 54K + 2K! This is the correct posture for programmers to write full ppt!

last

The functions of these two divine projects are far more than that. How many more?

Look at readme on GitHub MD, you know, in this era of large front-end, what can’t a web page be completed?

Well, see here, the next time you demonstrate PPT, you should be able to pretend to be forced in front of everyone

Well, the 10th issue of [front end GitHub] has been finished~

Unknowingly, it has been written in No10It’s been a long time. I’ve shared it80It’s a good front-end project. Please see the warehouse below for the previous fine articles. It’s dangerous to click. Please enter carefully!

[front end GitHub]:https://github.com/FrontEndGitHub/FrontEndGitHub

How to find good open source projects at ordinary times, you can see this article:How to find excellent open source projects on GitHubandFairy skills on how to use GitHub for accurate search

Can add super cat Wx:CB834301747, chat together.

Wechat search“Front end GitHub”, reply“e-book”That is, you can get160This front-end essence book.

GitHub standard star 54K + 2K! This is the correct posture for programmers to write full ppt!

Previous Jingwen

Feel useful? If you like it, please collect it. By the way, your support is the biggest encouragement of super cat!