Markdown Online PPT

白色玫瑰 程序猿

时间: 2023-07-11 阅读: 1 字数:8107

前端框架 javascript powerpoint
{}
一款基于Markdown语法的Online PPT项目笔记，使用revealjs优化

目录

<a href="#Markdown%20Online%20PPT">Markdown Online PPT</a>

<a href="#%E4%B8%BB%E9%A2%98%E9%80%89%E6%8B%A9">主题选择</a>

<a href="#%E6%80%8E%E6%A0%B7%E5%88%B6%E4%BD%9C%E4%B8%80%E4%B8%AAWeb%20PPT">怎样制作一个Web PPT</a>

<a href="#%E6%A0%87%E9%A2%98%E9%A1%B5">标题页</a>

<a href="#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87">上传图片</a>

<a href="#%E6%9B%B4%E5%A4%9A%E8%AE%BE%E8%AE%A1">更多设计</a>

<a href="#%E9%83%A8%E7%BD%B2%E4%B8%8E%E5%90%AF%E5%8A%A8">部署与启动</a>

<a href="#%E5%85%AC%E5%B8%83">公布</a>

<a href="#%E5%8F%82%E8%80%83%E4%BB%A3%E7%A0%81">参考代码</a>

<hr id="hr-toc">

Markdown Online PPT

项目源码:<a href="https://github.com/jirengu/new-oneslide" title="GitHub - jirengu/new-oneslide: 一个markdown制作PPT在线应用">GitHub - jirengu/new-oneslide: 一个markdown制作PPT在线应用</a>

预览链接:<a href="http://39.106.226.238:5173/" title="miemiePPT">miemiePPT</a>

主题选择

  首先，他有非常多的主题选择与配色


  并且也有非常多种类的动画切换，但最最重要的这些效果全部由markdown语法完成，真正把PPT变成了写代码，同时也把PPT和文档工作集成到了一起，可谓一举两得。而且部署到服务器，直接用url打开即可，连U盘都省了。

怎样制作一个Web PPT

点击左上角的“设置”按钮，开始编辑

标题页

github链接中作者的原话

一个#表示一级标题，同时其下的内容表示左右分页里一页的内容

两个#表示二级标题，同时其下的内容表示左右分页里一页的内容

意思就是，一个页面中只能有一个一级标题或者二级标题，如果有两个就会分成两页

上传图片

文件上传后可自动得到 <!-- .element: style="height:100px; " -->这种地址，其中<!-- .element: style="height:100px; " -->表示给当前图片设置样式，也可添加其它属性

更多设计

如代码后的 [7-9|10-12|12-15]表示代码可按行分段亮亮展示

标题下的<!-- .slide: data-auto-animate --> 表示当前页面如果切到下一页，相同的部分会有过渡动画，不同的部分会展示。总之可出现很棒的效果

文字后的<!-- .element: class="fragment" -->表示给当前元素添加class，fragment这个class能让元素一步一步展示，而不是一次性展示

如果想给元素添加样式，可以举一反三如<!-- .element: style="color:red" -->

标题下的<!-- .slide: class="column-2" --> 可让当前页面两栏展示

内容 会让内容文字更小。 也可以用<small>内容</small>

预置了一些常用的颜色标签，如<yellow>、<red>、<green>、<grey>等

部署与启动

GitHub下载源码后，首先修改package.json部分，将scripts平替如下

"scripts": {
  "dev": "vite --host 0.0.0.0",
  "build": "vite build",
  "serve": "vite preview --host 0.0.0.0"
  },

之后，再用以下代码平替vite.config.js

import { defineConfig } from 'vite'
​
// https://vitejs.dev/config/
export default defineConfig({
   base: './',
   server: {
   host: '0.0.0.0'
   }
})

这两步可以让项目从公网IP访问到，只要你有服务器，最先部署的估计就是他的！

之后，三行shell代码开启对应的服务端口，当然保险起见也需要去服务器官网修改防火墙配置。

firewall-cmd --zone=public --add-port=80/tcp --permanent
firewall-cmd --reload
firewall-cmd --zone=public --list-ports

新建、编写文件ppt.sh，内容如下

npm run dev

之后配置pm2，输入命令 pm2 start ppt.sh 进行项目挂载，即可在公网IP：端口访问到程序。

公布

  另外，替换其中example-complex.js中的text变量，即可改变默认的markdown文件，让互联网上的所有人看见你的PPT并且无法修改。如果替换过程中报错，可以尝试将 ` 替换为 \`，我就是这么解决的。

参考代码

  下面是一段参考代码，可以做出非常棒的效果。另外，使用者也需要熟练使用Markdown语法和CSS基本配置，才能做到真正的高效，同样这也是有门槛的高效，没有说的那么神奇。

# CSS
选择器优先级、样式继承
​
![](https://imgs.xiedaimala.com/LIjzPBygsVKz98q2eojsADUuyrxX1fUz/%25E9%25A5%25A5%25E4%25BA%25BA%25E8%25B0%25B7%2520logo.png)   <!-- .element: style="height:100px; " --> 
​
​
*若愚@饥人谷*
​
​
## 为什么关注优先级 
​
\`\`\`html [7-9|11-13|15-18]
<div id="app">
  <div class="header">
   
饥人谷

  </div>
</div> 
<style>
  p {
   color: yellow
  }
​
  #app p {
   color: red;
  }
​
  .header .user {
   color: blue;
  }
</style>
\`\`\`
​
不同方式修改同一元素同属性，谁说了算？ <!-- .element:  class="fragment" --> 
​
## 优先级从高到低
<!-- .slide: data-auto-animate -->
​
​
## 优先级从高到低
<!-- .slide: data-auto-animate -->
- !important
​
​
## 优先级从高到低
<!-- .slide: data-auto-animate -->
- !important
- 行内样式
​
## 优先级从高到低
<!-- .slide: data-auto-animate -->
- !important
- 行内样式
- 选择器选中(优先级算法)
​
​
## 优先级从高到低
<!-- .slide: data-auto-animate -->
- !important
- 行内样式
- 选择器选中(优先级算法)
- 继承样式
​
## 继承的样式
​
​
### 
<!-- .slide: data-auto-animate -->
a链接的<yellow>颜色</yellow>是什么？为什么
​
\`\`\`html[]
<style>
  .box  {
   color: red!important;
  }
 </style>
<div class="box">
  <a href="#">饥人谷</a>
</div>
\`\`\` 
​
### 
<!-- .slide: data-auto-animate  data-background="lightgreen"-->
a链接的<yellow>颜色</yellow>是什么？为什么
​
\`\`\`html[]
<style>
  .box  {
   color: red!important;
  }
 </style>
<div class="box">
  <a href="#">饥人谷</a>
</div>
\`\`\`
![](https://imgs.xiedaimala.com/s54CKVIhDkPDdjCVVEkaw9KAFzrzhBV6/WX20230104-163156%402x.png)   <!-- .element: style="height:200px" --> 
 
​
## 优先级计算
- 千位： 如果声明在style的属性（内联样式）则该位得一分 <!-- .element: class="fragment"  -->
- 百位： 选择器中包含ID选择器则该位得一分 <!-- .element: class="fragment" -->
- 十位： 选择器中包含类选择器、属性选择器 或者伪类 则该位得一分 <!-- .element: class="fragment" -->
- 个位：选择器中包含标签选择器、伪元素选择器则该位得一分  <!-- .element: class="fragment" style="color:yellow"--> 
​
### 
| 选择器   | 百位 |十位|个位 | 权重  |
| ---    | --- | --- | --- | ---  |
| h1     | ?   | ?   |  ?  | 001 <!-- .element:  class="fragment" -->  |
| #box p  | ?  | ?   |  ? | 101 <!-- .element:  class="fragment" -->  | 
|#logo a:hover| ? | ? |  ?  | 111 <!-- .element:  class="fragment" -->  |
​
​
​
​
​
​
​
## 另一个例子
<!-- .slide: data-auto-animate -->
*p的<yellow>颜色</yellow>是什么？为什么*
​
\`\`\`html[]
<style>
  .box {
   color: red!important;
  }
  
  .box p {
   color: blue;
  }
</style>
<div class="box">
  
饥人谷

</div>
\`\`\`
 
​
​
## 另一个例子
<!-- .slide: data-auto-animate class="column-2"-->
​
*p的<yellow>颜色</yellow>是什么？为什么*
​
\`\`\`html[]
<style>
  .box {
   color: red!important;
  }
  
  .box p {
   color: blue;
  }
</style>
<div class="box">
  
饥人谷

</div>
\`\`\`
​
![](https://imgs.xiedaimala.com/QX2cB2w92WCtYJQrhKsvItshnz5YvlEJ/WX20230104-170804%402x.png)<!-- .element: style="height:200px;margin-top:20%;" -->
​
# 更多
- 项目作者：若愚@饥人谷 [知乎](https://www.zhihu.com/people/jirengu-ruo-yu)
- 本项目基于 [revealjs](https://revealjs.com/) 开发
- 本项目[源码地址](https://github.com/jirengu/new-oneslide)

原文地址：https://blog.csdn.net/qq_52504945/article/details/128777296?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168905670716800185831213%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168905670716800185831213&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-23-128777296-null-null.142^v88^insert_down38v5,239^v2^insert_chatgpt&utm_term=markdown

本文章网址:https://www.sjxi.cn/detil/09c4c38272e94b6692255d87d0f77f55

最新评论

当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号

×

(穷逼博主)在线接单

QQ: 1164453243

邮箱: abcdsjx@126.com

前端项目代做
前后端分离
Python 爬虫脚本
Java 后台开发
各种脚本编写
服务器搭建
个人博客搭建
Web 应用开发
Chrome 插件编写
Bug 修复