This issue features Slidev, a presentation tool for developers.
Slidev is a web-based slide-making and presentation tool. It’s designed to allow developers to focus on writing content in Markdown, with the ability to support HTML and Vue components, pixel-perfect layouts, and interactive demo samples built into your pitch. Slidev uses feature-rich markdown files to generate beautiful slides with an instant reload experience. At the same time, it also has many built-in integration functions, such as real-time coding, PDF export, speech recording and so on.
Features
- Markdown support — Write Markdown files using your favorite editor and workflow
- Developer friendly — built-in code highlighting, real-time coding and other functions
- Customizable themes — Share and use themes
as npm packages
- Flexible style — Utility classes and easy-to-use inline style sheets for on-demand use with Windi CSS
- Interoperable — seamlessly embedded Vue components
- Speaker mode — you can use another window or even your phone to control the slide
- Drawing — Drawing and annotating on your slide
- LaTeX support — built-in support for LaTeX mathematical formulas
- Chart support — Create charts using text description language
- icon — Can get icon
directly from any icon library
- Editor — integrated editor, or extend
with VS Code
- Speech recording — built-in recording and camera view
- Cross-platform — able to export PDF, PNG files, or even a single page application that can be hosted
- Fast — Instant reload based on Vite
- Configurable — Support for Vite plug-ins, Vue components, and any npm package
Technical stack
- Vite — a very fast front-end tool
- Vue 3-based Markdown — ability to focus on HTML and Vue components while focusing on content
- Windi CSS — on-demand, utility class first CSS framework, easily customize your slide style
- Prism, Shiki, Monaco Editor — First-class snippeting support with real-time coding capabilities
- RecordRTC — built-in recording and camera view
- VueUse family — vueuse/core, vueuse/head, vueuse/motion, etc.
- Iconify — Icon library collection
- Drauu — Support for drawings and comments
- KaTeX — LaTeX mathematical rendering
- Mermaid — text description language create chart
Local installation
Use NPM:
$ npm init slidevUse Yarn:
$ yarn create slidevStart build command:
{
"scripts": {
"dev": "slidev", // Start dev server
"build": "slidev build", // Build single-page applications in production
"export": "slidev export" // Export the slides to pdf
}
}Access:
http://localhost:3030/Example
slides are written from a markdown file (the default is./slides.md).
You can use markdown’s features as you would normally write Markdown, while also supporting inline HTML and Vue components. Writing styles using Windi CSS is also supported. Use — to add separators to separate your slides.
# Slidev
Hello, World!
---
# Page 2
Directly use code blocks for highlighting
```ts
console.log('Hello, World!')
```
---
# Page 3
You can directly use Windi CSS and Vue components to style and enrich your slides.
<div class="p-3">
<Tweet id="20" />
</div>Title page and layout
You can specify a layout and other metadata for each slide by converting the separator to a front matter. Each title page message begins with the separator — and ends with another separator –. The text between the two delimiters is a YAML formatted data object. The following is an example:
---
layout: cover
---
# Slidev
This is the cover page.
---
layout: center
background: './images/background-1.png'
class: 'text-white'
---
# Page 2
This is a page with the layout `center` and a background image.
---
# Page 3
This is a default page without any additional metadata.Code block
A very important reason to build Slidev is to have the code correctly highlighted in the slide. As you can see, you can use Markdown style code blocks to make your code highlighted.
```ts
console.log('Hello, World! ')
```Highlight specific lines
If you want to highlight a particular line, simply add the corresponding line number inside {}. The line number starts from 1.
```ts {2,3}
function add(
a: Ref< number> | number,
b: Ref< number> | number
) {
return computed(() => unref(a) + unref(b))
}
```If you want to change the highlighting in multiple steps, you can separate them with |. For example:
```ts {2-3|5|all}
function add(
a: Ref< number> | number,
b: Ref< number> | number
) {
return computed(() => unref(a) + unref(b))
}
```This code starts with a: Ref< number> | number and b: Ref< number> | number is highlighted, and when you click on the slide, it’s highlighted. return computed(() => unref(a) + unref(b)), and finally, the entire block is highlighted. You can learn more in the Animation Guide.
—END—
Open Source protocol: MIT
