网站首页 > 技术文章 正文
Slidev (slide + dev, /sla?d?v/) 是一个为开发者设计的基于 Web 的幻灯片制作工具。它帮助您以 Markdown 的形式专注于编写幻灯片的内容,并制作出具有交互式演示功能的、高度可自定义的幻灯片。
一个简单的例子
---
layout: cover
background: https://sli.dev/demo-cover.png
---
# 欢迎使用 Slidev!
为开发者打造的演示文稿工具
---
# 第二页
- 在 Markdown 文件中编写幻灯片
- 丰富的主题,代码高亮,可交互的组件,等等
- 阅读文档了解更多!
以上markdown代码创建了一个由两页组成的幻灯片文稿, --- 用来分隔每一页幻灯片。
渲染效果如下:
创建幻灯片
那么,编写好markdown代码以后,如何创建出幻灯片呢?目前创建幻灯片的方式有两种:
- 使用线上工具,https://sli.dev/new
- 在本地创建
线上工具非常简单,是一个VS Code在线IDE,你只要把你的代码往编辑器丢进去,在右边panel就可以看到渲染的效果:
而在本地创建的方式,则要求你前置安装好node环境,因为Slidev正是基于node构建的前端应用。
npm init slidev@latest
以上代码将初始化slidev,在当前路径下slidev目录,然后你可以修slides.md文件。然后执行以下命令:
npm exec slidev -- --port 3030 "slides.md"
通过访问http://localhost:3030可以看到幻灯片渲染效果。
Slidev支持在线编辑(右键,Show editor),编辑修改后将同时修改slides.md文件里的内容。
它也支持画图工具,方便你在演示的时候涂鸦:
当然,也可以安装本地VS Code插件扩展,在VS Code里预览:
Slidev还支持:
- 基本的导航操作,各种快捷键
- 演讲者模式
- 动画效果
- 图表支持,如plantuml, mermaid等
- 录制
- 导出为PDF, PPTX, PNG, MarkDown等格式文件
- 上一篇: 小白使用PPT需知
- 下一篇: PPT中被忽略的“触发器”?,强大到令人惊叹
猜你喜欢
- 2024-12-03 网页设计中常用的8款字体
- 2024-12-03 PPT中被忽略的“触发器”?,强大到令人惊叹
- 2024-12-03 小白使用PPT需知
- 2024-12-03 前端开发工程师培训课程需要学什么?上海培训前端开发
你 发表评论:
欢迎- 最近发表
-
- 用AI做微信小程序的完整步骤_如何用ai制作微信表情包
- 自习室预约的微信小程序设计与实现-计算机毕业设计源码+LW文档
- 微信小程序开发入门指南_微信小程序开发入门教程
- 写字机器人好用吗? 组装就花了5个小时 还要学习软件、录入字体
- 白描网页版 - 高效准确且免费的OCR文字识别工具
- 字体图形面板与图标字体使用_字体图标的优势和劣势
- 作为前端工程师必须懂得的33个CSS核心概念
- Flutter程序员开发炫酷的登录页面 字体库运用 路由学习 源码分享
- 2025Q3开源字体盘点:让你的代码和文档'颜值'飙升!
- Agent杂谈:Agent的能力上下限及「Agent构建」核心技术栈调研分享~
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (58)
- oracle面试 (55)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)