slidev

发表于2023-04-19|更新于2026-02-24

|浏览量:

君子先择而后交，小人先交而后择。——王通

分享一个为开发者打造的演示文稿工具：https://cn.sli.dev/

Slidev (slide + dev, /slʌɪdɪv/) 是基于 Web 的幻灯片制作和演示工具。它旨在让开发者专注在 Markdown 中编写内容，同时拥有支持 HTML 和 Vue 组件的能力，并且能够呈现像素级完美的布局，还在你的演讲稿中内置了互动的演示样例。

它使用了功能丰富的 markdown 文件来生成精美的幻灯片，具有即时重载的体验。它还拥有很多内置的集成功能，如实时编码、导出 PDF、演讲录制等。由于 Slidev 是由 web 驱动的，因此你可以使用它进行任何操作 —— 具有无限的可能性。

你可以在为什么选 Slidev 部分了解更多关于本项目的设计初衷。

相关推荐

回车提交表单

却是平流无石处，时时闻说有沉沦。——唐•杜荀鹤我们在页面开发中经常会写一些表单，但身为一个懒人，肯定是懒得点提交按钮的，我一般直接按回车提交当我们的form满足只有一个input的时候，回车事件是生效的 123<form> <input/></form> 当我们的form有多个input的时候，回车事件失效了 1234<form> <input/> <input/></form> 此时我们可以加一个input，让type=submit 即可再次满足回车提交效果 12345<form> <input/> <input/> <input type="submit"/></form> 如果要隐藏掉，使用样式display:hide隐藏即可但有时如果我们如果需要回车不提交表单，则可以避免上述条件如果想要不执行submit事件，可以直接在form上加一个onsubmit="return false&q...

wangeditor渲染node方式

青，取之于蓝而青于蓝;冰，水为之而寒于水。 ——《荀子·劝学》代码如下： 1234567891011121314import { Boot, createEditor, createToolbar, SlateEditor, SlateElement, SlateNode, SlateText, SlateTransforms} from '@wangeditor/editor'SlateTransforms.insertNodes(editor, nodes)editor.updateView() 这里的nodes格式参考 https://www.wangeditor.com/v5/node-define.html 节点数据结构wangEditor 是基于 slate.js 为内核开发的，所以学习本文之前，要先了解 slate Node 设计。是什么很多同学可能根本不知道本文要讲什么，对于这里的“节点”和“数据结构”也不知何意。没关系，接下来通过几个问题，就可以让你快速入门。我们通过 API 的学习，已经知道...

我荒废了时间，时间便把我荒废了。——莎士比亚 https://github.com/gitalk/gitalk https://gitalk.github.io/ 用 Gitalk 给博客添加评论系统：优雅、开源、无后端依赖在搭建个人博客时，我们经常面临一个小难题：评论系统用什么好？传统方案如 Disqus 虽然功能强大，但加载慢、隐私问题多；国内的评论系统则可能存在稳定性和接入成本。于是我选择了一个更极客、更自由的方式：Gitalk —— 一个基于 GitHub Issues 的评论系统。什么是 Gitalk？Gitalk 是一个利用 GitHub Issues 构建的评论系统，由 gitalk 开发者团队创建。它的设计理念很简单：既然每个人都有 GitHub 账号，为什么不能用 GitHub 直接发评论？它通过 GitHub 的 OAuth 授权，允许访问者在你指定的仓库中创建/回复 issue，从而完成评论功能。 Gitalk 的优点 ✅ 完全免费，只依赖 GitHub，无需后端服务器 ✅ 界面简洁，支持 Markdown、高亮、表情 ...

百度地图简单对接

地位越高，自我评价就越高，自信心多强，能力就有多强。我们总能表现出与环境的和谐平等。——赫兹里特效果如下跟着官网一步一步来即可申请成为开发者然后在应用管理里创建应用填写信息点击复制AK 然后复制代码 123456789101112131415161718192021222324252627<!DOCTYPE html> <html><head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello, World</title> <style type="text/css"> html{height:10...

nvue引入图标坑

强本而节用，则天不能贫。——荀况今天把原来的vue页面改为nvue 发现之前的图标怎么都引不进去，搞了半天，后来通过debug发现，我引入的方式是使用添加对应的class给它加了个::before伪元素知道了这个就很简单了，我们按照官方文档引入字体首先我在App.vue中写入css代码： 123456/* 加载图标字体 - 条件编译模式 *//* #ifdef APP-PLUS-NVUE */.my-iconfont { font-family: myIconfont;}/* #endif */ 然后在对应的nvue页面中，在beforeCreate生命周期里调用addRule 123456789beforeCreate() { // #ifdef APP-PLUS-NVUE const domModule = uni.requireNativePlugin('dom'); domModule.addRule('fontFace', { fontFamily: 'myIcon...

自动仿真人类滚动脚本

周虽旧邦，其命维新。一一《诗经》自动仿真人类滚动脚本：让你的网页浏览更“像人类”在前端开发、自动化测试或数据采集的过程中，我们经常会遇到“模拟人类操作”的需求。例如，自动滚动页面以加载惰性内容、触发懒加载图片，或者让自动化检测工具误以为是真人在浏览网页。传统的 window.scrollTo() 或 window.scrollBy() 方法虽然可以实现页面滚动，但往往过于机械，容易被反爬虫系统识别。本文介绍一个简单易用、可持续运行的仿真人类自动滚动脚本，它通过“随机滚动步长+随机停顿”的方式，让页面滚动行为更贴近真实用户操作。一、脚本源码解析123456789101112131415161718192021222324252627(function autoHumanScroll() { const minDelay = 5000; // 最小停顿5秒 const maxDelay = 10000; // 最大停顿10秒 const minStep = 20; // 最小滚动20px const maxStep = 80; // 最大滚动...

阿超

我的名字叫阿超年龄25岁家在北京市职业是软件开发每天最晚也会在八点前回家不抽烟酒浅尝辄止晚上十二点上床保证睡足八个小时睡前写一篇博客再做二十分钟俯卧撑暖身然后再睡觉基本能熟睡到天亮像婴儿一样不留下任何疲劳和压力就这样迎来第二天的早晨健康检查结果也显示我很正常我想说明我是一个不论何时都追求内心平稳的人不拘泥于胜负不纠结于烦恼不树立使我夜不能寐的敌人这就是我在这社会的生活态度

数据加载中