关于前端:GitHub-标星-54K-2K这才是程序员写逼格满满的-PPT-的正确姿势

4次阅读

共计 5284 个字符，预计需要花费 14 分钟才能阅读完成。

大家好，我是你们的猫哥，一个不喜爱吃鱼、又不喜爱喵的超级猫 ~

猫哥是一个长年混迹在 GitHub 上的猫星人，所以发现了不少好的前端开源我的项目，在此分享给大家。

公众号： 前端 GitHub，专一于开掘 GitHub 上优良的前端开源我的项目，收集、整顿、举荐业界高品质前端资源合集，优良的工具、库、好的教程、理解业界更优良的代码、工具、业界最新的技术，抹平你的前端信息不对称。

平时如何发现好的开源我的项目，能够看看这篇文章：GitHub 上能挖矿的神仙技巧 – 如何发现优良开源我的项目

以下为【前端 GitHub】的第 10 期精髓内容。

置信大家都有过 PPT 分享的经验，超级猫始终感觉用 powerpoint 写幻灯片太麻烦，效率太低了。

作为程序员，特地是前端，有没有更简结与高逼格幻灯片实现形式呢？必定是有的啊！

明天给大家带来的是应用 Markdown 和 HTML 写逼格满满的 PPT 的正确姿态！

reveal-md 是应用 Markdown 来做 PPT 展现的开源我的项目，标星 2.1K。

npm install -g reveal-md

reveal-md path/demo.md

其中，path/demo.md 是你的 Markdown 文件地址，能够应用本地地址，也能够应用 URL。

应用如下的 Markdown 文件 demo.md：

## 前端 GitHub

* 大前端汇合
* GitHub 优良开源我的项目举荐

---

## 内容

> 专一于开掘优良的前端开源我的项目，抹平你的前端信息不对称。涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS 等！---

## 前端资源合集

* 收集、整顿、举荐业界高品质前端资源合集
* 优良的工具、库、好的教程
* 理解业界更优良的代码、工具、业界最新的技术

在终端运行命令：reveal-md ./demo.md

成果如图：

蕴含的主题有以下几种：

beige
black
blood
league
moon
night
serif
simple
sky
solarized
white

比方指定 league 主题应用：

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

成果如图：

还能够指定本人写的主题，也就是本人写的 css 款式，应用自定义主题后，会笼罩默认的主题。

比方自定义文件位于 ./theme/my-custom.css 中时，指定对应的门路即可。

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

我的项目地址：

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

这是一个基于 CSS 的 3D 幻灯片工具，标星 54K。

Reveal.js 做 PPT 的长处是能够应用 markdown 语言间接写动态的文本，并能够退出各种 html 语言反对的交互动画，而后由 Pandoc 间接转化成 PPT。

reveal.js 是一个凋谢源代码 HTML 示意框架。它使应用 Web 浏览器的任何人都能够收费创立功能齐全且好看的演示文稿。

该框架具备宽泛的性能，包含嵌套幻灯片，Markdown 反对，主动动画，PDF 导出，演讲者正文，LaTeX 反对，语法突出显示的代码等等。

reveal.js 有一下几个特点：

反对标签来辨别每一页幻灯片
能够应用 markdown 来写内容
反对 pdf 的导出
反对演说正文
提供 JavaScript API 来管制页面
提供了多个默认主题和切换形式
自适应挪动端和 PC 端

应用分为根本应用、残缺装置、npm 形式装置 3 种形式。

下载最新的 manifest.js 版本 https://github.com/hakimel/reveal.js/archive/master.zip
解压缩并将 index.html 中的示例内容替换为您本人的内容
在浏览器中关上 index.html 进行查看

装置：

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

cd reveal.js && npm install

npm start

关上 http://localhost:8000 查看您的演示文稿。

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

间接导入应用

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

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

还须要增加 reveal.js 款式和主题.

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

幻灯片的内容须要蕴含在 <div class="reveal"> <div class="slides"> 的标签中。

一个 section 是一页幻灯片。当 section 蕴含在 section 中时，是一个纵向的幻灯片。

怎么了解呢？能够这样了解：横向的幻灯片代表一章，纵向的幻灯片代表一章中的一节。那么横向的幻灯片在播放时是左右切换的，而纵向的幻灯片是高低切换的。

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>

题目和注释

section 中的内容就是幻灯片的内容，你能够应用 h2 标签标示 title，p 示意内容。须要红色的字体能够间接设置 style 的 color 为 red。

当某一页须要非凡背景色，能够应用 data-background 在 section 上设置, data-background-transition 示意背景的过渡成果。

For example:

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

如果须要注释一段一段呈现。能够应用 fragment。

For Example:

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

代码

reveal.js 应用 highlight.js 来反对代码高亮。能够间接写 code 标签来实现, data-trim 示意去除多余的空格。

For Example:

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

正文

在演说时，会用到正文，对于正文，能够通过 <aside class="notes"> 来实现。

For Example:

<aside class="notes">
  这里是正文。</aside>

在幻灯片页面，按下 s 键，就能够调出正文页面，正文页面蕴含了以后幻灯片，下一章幻灯片，正文，以及幻灯片播放工夫。

reveal.js 不仅反对 html 示意来实现内容，还能够通过 markdown 来实现内容。应用 markdown 实现内容时，须要对 section 标示增加 data-markdown 属性，而后将 markdown 内容写到一个 text/template 脚本中。

For Example:

<section data-markdown>
    <script type="text/template">
        ## Page title

        A paragraph with some text and a [link](http://hakim.se).
    </script>
</section>
背景色，fragment 性能的实现，能够通过正文来实现。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>

外置 md 文件

reveal.js 能够援用一个外置的 markdown 文件来解析。

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>

分页实现

一个 markdown 文件中能够间断蕴含多个章内容。能够在 section 中通过属性 data-separator, data-separator-vertical 来划分章节。

For Example:

<section data-separator="---" data-separator-vertical="--"  >
  <script type="text/template">
    # 主题 1
    - 主题 1 - 内容 1
    - 主题 1 - 内容 2
    --
    ## 主题 1 - 内容 1
    内容 1 - 细节 1
    --
    ## 主题 1 - 内容 2
    内容 1 - 细节 2
    ---
    # 主题 2
  </script>
</section>

正文

对 section 增加 data-separator-notes="^Note:" 属性，就能够指定 Note: 前面的内容为以后幻灯片的正文。

For Example:

# Title
## Sub-title

Here is some content...

Note:
This will only display in the notes window.

在浏览器关上文件的 url 上增加 print-pdf 即能够，比方：http://localhost:8000/demo.html/?print-pdf，你能够测试一下官网的 revealjs.com/demo?print-pdf
关上浏览器的保留为 pdf 的弹框，快捷键为：CTRL/CMD + P
边距设置为无
勾上背景图形
点击保留即可

reveal.js 提供了多种款式。能够通过援用不同的主题来实现。具体主题查看 reveal.js/css/theme 下的 css 文件。

用 reveal.js 来实现幻灯片，能够只关注内容，疏忽各种切换成果。

而且能够应用 markdown 来实现，大大提高了编写效率。对于最初生成的 html 文件，能够部署到服务器，这样只须要网络就能够进行分享，不须要应用 U 盘拷来拷去了。

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

这两个神级我的项目的性能远远不止这么点，还有多少呢？

看看 Github 上的 README.md 你就晓得了，在当初这样一个大前端的时代，有什么是网页不能实现的呢？

好了，看到这里，下次演示 PPT 时，你应该就能在众人背后装逼了 ????

好了啦，【前端 GitHub】的第 10 期内容曾经讲完了啦~

人不知; 鬼不觉，曾经写到第 10 期了呢，曾经分享了靠近 80 个好的前端我的项目了呢，往期精文请看下方仓库，点击很危险，请慎入！

[前端 GitHub]：https://github.com/FrontEndGitHub/FrontEndGitHub

平时如何发现好的开源我的项目，能够看看这篇文章：如何在 GitHub 上发现优良开源我的项目和如何应用 GitHub 进行精准搜寻的神仙技巧。

能够加超级猫的 wx：CB834301747，一起闲聊前端。

微信搜“ 前端 GitHub”，回复“ 电子书 ”即能够取得 160 本前端精髓书籍哦。

往期精文

11 个超火的前端必备在线工具，终于有工夫下班摸鱼了
10 个 GitHub 上超火的 CSS 技巧我的项目，找到写 CSS 的灵感！
10 个 GitHub 上超火的前端面试我的项目，打造本人的加薪宝库！
10 个 GitHub 上超火和超难看的治理后盾模版，后盾治理我的项目有着落了
11 个超火的大厂前端代码标准，你也能写出诗一样的代码！
恕我直言，你可能连 GitHub 搜寻都不会用 – 如何精准搜寻的神仙技巧
GitHub 上最火的、最值得前端学习的数据结构与算法我的项目！没有之一
寰球最火的 WEB 开发学习路线！没有之一！3 天就在 GitHub 播种了靠近 1w 点赞
GitHub 标星 1.6W+，程序员不得不知的“潜规则”又火了，早晓得就不会秃头了

感觉有用？喜爱就珍藏，顺便点个赞吧，你的反对是超级猫最大的激励！

正文完

前端

发表至：前端

2020-12-08

0

关于前端:零基础教你学前端71CSS列表

关于前端:SAP-UI5-ManagedObject-的-Association-讲解

关于前端:从零开始写一个微前端框架样式隔离篇

关于前端:使用IndexedDB缓存给WebGL三维程序加速

关于大数据:抖音爬虫教程从0到1获取抖音用户数据

关于前端:GitHub-标星-54K-2K这才是程序员写逼格满满的-PPT-的正确姿势

前言

reveal-md

装置

应用

主题应用

reveal.js

应用

根本应用

残缺装置

npm 形式装置

应用

html 实现

markdown 实现

导出 PDF

多主题

总结

最初

站内搜索