用Markdown写Slides的神器

简介: 用Markdown写Slides的神器

前言


slide,泛称 ppt,指代幻灯片中具体的一页;pptPowerPoint 的简称。

通常我们会使用微软的 PowerPoint 来设计幻灯片,但是在 Markdown 文档标准化的当下,用 Markdown 来写 ppt 已经逐步成为一种趋势,今天我们就来介绍一款超棒的 MarkdownSlide 的工具,它就是 Slidev


依赖


slidev 是用 vue 开发的,依赖 Node.JS≥14


安装 Node.JS


登录 Node.Js 官网http://nodejs.cn/download/下载Node.JS最新版本。


网络异常,图片无法展示
|


windows 系统注意安装时勾选自动配置环境变量选项。


创建 Slidev 项目


命令:npm init slidev

执行命令后,你需要经历输入项目名称,选择包管理工具等步骤,项目初始化成功后,Slidev 会启动开发者服务器,同时打开默认项目的预览。


网络异常,图片无法展示
|


网络异常,图片无法展示
|


设计我们自己的 slide


项目结构


网络异常,图片无法展示
|


我们可以看到 slidev 为我们生成了默认的项目路径,其中我们最关注还是 slides.md,这里面存放着我们所写的 slide。


网络异常,图片无法展示
|


编辑模式

  1. 直接编辑 slides.md
  2. 在预览界面编辑


第一种我们直接打开 slides.md 编辑即可,第二种我们在预览界面的左下角 hover 出菜单栏,打开编辑窗口即可进行 slides.md 的动态编辑。


Demo


我们本次选择直接编辑 slides.md 文档。


---
#设置主题
theme: default
# 设置背景图片
background: './vx.jpg'
# 设置样式
class: 'text-center'
# https://sli.dev/custom/highlighters.html
highlighter: shiki
# 是否打开代码行号
lineNumbers: false
# 使用MarkDown配置slide
info: |
  ## Slidev Starter Template
  Presentation slides for developers.
  Learn more at [Sli.dev](https://sli.dev)
# persist drawings in exports and build
drawings:
  persist: false
---
# 欢迎来到 Slidev 的世界
为开发者打造的slide工具
<div class="pt-12">
  <span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer" hover="bg-white bg-opacity-10">
    Press Space for next page <carbon:arrow-right class="inline"/>
  </span>
</div>
<div class="abs-br m-6 flex gap-2">
  <button @click="$slidev.nav.openInEditor()" title="Open in Editor" class="text-xl icon-btn opacity-50 !border-none !hover:text-white">
    <carbon:edit />
  </button>
  <a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub"
    class="text-xl icon-btn opacity-50 !border-none !hover:text-white">
    <carbon-logo-github />
  </a>
</div>
<!--
The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs](https://sli.dev/guide/syntax.html#notes)
-->
---
# 什么是 Slidev?
Slidev 好用好看!
Slidev is a slides maker and presenter designed for developers, consist of the following features
- 📝 **Text-based** - focus on the content with Markdown, and then style them later
- 🎨 **Themable** - theme can be shared and used with npm packages
- 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion
- 🤹 **Interactive** - embedding Vue components to enhance your expressions
- 🎥 **Recording** - built-in recording and camera view
- 📤 **Portable** - export into PDF, PNGs, or even a hostable SPA
- 🛠 **Hackable** - anything possible on a webpage
<br>
<br>
Read more about [Why Slidev?](https://sli.dev/guide/why)
<!--
You can have `style` tag in markdown to override the style for the current page.
Learn more: https://sli.dev/guide/syntax#embedded-styles
-->
<style>
h1 {
  background-color: #2B90B6;
  background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}
</style>
---
后续省略...
复制代码


效果:


网络异常,图片无法展示
|


网络异常,图片无法展示
|


Slidev 也支持代码展示,图片,视频,Latexmermaid,所有 Markdown 支持的,更多的,Slidev 还支持自定义 Vue 组件和动画。简直强大。


菜单功能一览


在预览 slide 的时候,我们的鼠标在左下角 hover 可以调出菜单栏,其可以实现全

屏,前进后退,slides 缩略图,黑暗模式,录屏,标记,编辑模式,文本信息,缩放等功能。


网络异常,图片无法展示
|


导出 Demo


导出依赖 playwright-chromium,我们首先得安装 playwright-chromium


安装命令:npm i playwright-chromium

导出命令:npx slidev export


网络异常,图片无法展示
|


网络异常,图片无法展示
|


网络异常,图片无法展示
|


总结


slidev 是一个可以打造高保真,高度自定义,页面美观,完全兼容 MarkDownslide 的优秀工具。墙裂建议大家去尝试下。


slidev 官网(sli.dev

相关文章
|
JavaScript 前端开发 开发者
36.3K star!开发者专属PPT神器,Markdown秒变炫酷幻灯片!
Slidev 是专为开发者打造的现代化幻灯片制作工具,基于 Markdown + Vue 技术栈实现。它让技术分享、产品演示、教学培训等场景的幻灯片制作效率提升300%,支持实时编码演示、数学公式渲染、流程图绘制等开发者刚需功能,可将.md文件一键转换为网页/PDF/PPTX格式。
1215 4
|
安全 算法 项目管理
GitLab权限级别介绍
GitLab权限级别介绍
2234 4
|
Python
解决pyinstaller不兼容python-docx的方法
python-docx是一个python的读写word的库,可以用来读写word文档,向word文档里插入表格,但是与pyinstaller不是原生兼容,需要小改一下
1273 0
解决pyinstaller不兼容python-docx的方法
|
7月前
|
机器学习/深度学习 人工智能 前端开发
终端里的 AI 编程助手:OpenCode 使用指南
OpenCode 是开源的终端 AI 编码助手,支持 Claude、GPT-4 等模型,可在命令行完成代码编写、Bug 修复、项目重构。提供原生终端界面和上下文感知能力,适合全栈开发者和终端用户使用。
54108 11
|
虚拟化 网络虚拟化 Windows
导入虚拟机到Hyper-V环境时,理解并配置网络适配器设置是确保网络通信的关键
在Hyper-V环境中,正确配置虚拟机的网络适配器是确保其网络通信的关键。需先启用Hyper-V功能并创建虚拟交换机。接着,在Hyper-V管理器中选择目标虚拟机,添加或配置网络适配器,选择合适的虚拟交换机(外部、内部或私有),并根据需求配置VLAN、MAC地址等选项。最后,启动虚拟机并验证网络连接,确保其能正常访问外部网络、与主机及其他虚拟机通信。常见问题包括无法访问外部网络或获取IP地址,需检查虚拟交换机和适配器设置。
|
存储 安全 数据管理
区块链在医疗数据管理中的应用:安全与隐私的新纪元
区块链在医疗数据管理中的应用:安全与隐私的新纪元
974 16
|
JavaScript
componentDidUpdate 方法在组件更新后做什么?
【10月更文挑战第27天】在 `componentDidUpdate` 中使用 `this.props` 和 `this.state` 时要小心,因为此时它们已经是更新后的最新值,与 `prevProps` 和 `prevState` 所代表的前一个状态不同。同时,如果在 `componentDidUpdate` 中再次调用 `setState`,要确保不会导致无限循环的更新,通常需要添加适当的条件判断来避免不必要的状态更新。
421 2
|
缓存 算法 数据处理
Python性能优化:提升代码效率与速度的秘诀
【10月更文挑战第22天】Python性能优化:提升代码效率与速度的秘诀
527 0
|
算法 数据安全/隐私保护 Python
数字签名是一种用于验证数据完整性和来源身份的技术。它基于公钥密码学,允许数据的发送方使用其私钥对数据进行签名,而接收方则可以使用发送方的公钥来验证签名的有效性。
数字签名是一种用于验证数据完整性和来源身份的技术。它基于公钥密码学,允许数据的发送方使用其私钥对数据进行签名,而接收方则可以使用发送方的公钥来验证签名的有效性。
|
API 数据库 数据安全/隐私保护
蓝奏云直链获取在线解析网站源码
蓝奏云直链获取在线解析网站源码 蓝奏云链接解析 本地API接口 支持有无密码和短期直链和永久直链,同时还可以显示文件名和大小。 这个解析器无需数据库即可搭建,API接口已经本地化,非常简单易用。
957 2
蓝奏云直链获取在线解析网站源码

热门文章

最新文章