Beautiful Slides in Markdown With Slidev

What exactly is Slidev ?

Slidev is a presentation tool for engineers. You can generate beautiful slides from documents written in Markdown.

See also the official demo and its source, Markdown .

Featured features

Flexible layout

Slidev uses Windi CSS ( Tailwind CSS compatible) and allows you to specify a Grid layout. Since you can arrange the contents freely up, down, left and right, you can create slides by making the best use of the space.

The above is a screenshot when editing Markdown while previewing slides ( related tweets ). Notice that because we are using the Grid layout, the preview screen on the right can show areas where content is placed on the left and right and areas where it is not on the same page.

Through the utilization of the Grid layout of the above example as the region’s, and the width of the eye full use area of the slide, before, after you can mix a region that is divided into left and right as in the area of.

In this way, you can use whether to divide the area or not even in the middle of the page. As far as I’ve tried, Slidev was able to easily achieve this layout.

Please refer to the sample Markdown, which will be introduced later, for the notation of such Grid layout.

The basic operation of this kind of tool is to arrange the text and image display described in Markdown in order from top to bottom and convert it to a slide, but is there a function to lay out the content on the left and right in the page? I think that is an important point when selecting a slide creation tool.

Syntax highlighting and line numbering

When posting commands and source code on slides, you want to give a nice syntax highlighting without much effort. I used to paste code into a service called Carbon to generate syntax highlighted images and paste them on slides.

The disadvantage of this method is that you will not be able to copy the character string because it will be imaged. I can’t publish slides to copy commands or code for use. Another disadvantage is that it doesn’t get caught in the search, and if you change the code, it takes time to regenerate the image.

Slidev will syntax highlight and display the code block written in `` ` in Markdown as it is, so the above disadvantages will be eliminated. You can copy and search strings, and if you rewrite the Markdown code block, the preview will follow suit. You’re free from image preparation and can now focus on writing.

You can also highlight specific lines to specify the line to highlight {}, describe the line number range in as follows.

```bash {4-}
#!/bin/bash
for (( counter=10; counter>0; counter-- ))
do
echo -n "$counter "
done
printf "\n"
```

If it is up to the 3rd line, if it is {-3} the 4th line or later {4-}, {1,3,5 it can be written as } for the 1st , 3rd , 5th lines .

More info we can find in this link

It is a convenient point to be able to present with syntax highlighting similar to the editor you usually code, and to convey the point of interest by line number when talking about the code or asking a question.

Specify a page-specific style

There are many cases where you want to change the design such as font size only for a specific page. In such a case, you can write the <style> tag in the page.

You can set a style that is valid only within the page, so when you want to make fine adjustments, you can reach the itchy place.

Insertion of figure in Mermaid notation

You can insert figures (SVG) in Mermaid notation, reference document below.

In addition, Draw.IoDiagrams.Net well as SVG you can insert as an image in the notation. I think Draw.io has a higher degree of freedom in drawing, so it seems better to use it properly. I recommend Draw.io Integration, which allows you to use the Draw.io editor offline on VS Code .

Adding Vue components

Slidev is based on Vue and you can use Vue’s components. The following is an example of using the Twitter component. You can easily embed tweets, The component can be easily called as follows.

<Tweet id="Tweet-ID"/>

More about this:

Embed HTML

Since it operates as a SPA, you can write HTML. You can paste the embed code such as YouTube video as it is.

Let’s use Slidev

Now let’s use Slidev. Node.js >=14.0 Please prepare an environment that contains. For our environment we will use Vagrant with Ubuntu 20.04

The installation command is as follows.

  • Npm
root@vagrant:/home/vagrant# npm init slidev@latest
  • Yarn
root@vagrant:/home/vagrant# yarn create slidev
  • Docker
docker run --rm -v "$PWD":/root/slides -p 3030:3030 stig124/slidev:latest

By executing the above command, after installing Slidev, slides.md you can view the slides generated from the included source in your browser.

Second and subsequent runs

From the second time onward, you can move to the generated directory and execute the following command to start it.

vagrant@vagrant:~$ cd example
vagrant@vagrant:~$ npm run dev -- slides.md

If you connect to the remote server where Slidev is installed with VSCode’s Remote SSH and start Slidev in the VSCode terminal, VSCode will detect the standby port, port-forwad, and browser on the local machine where VSCode is installed. It is also convenient to develop with VS Code + Remote SSH because it will launch up to and display the SPA.

Generate a SPA for publication

To generate a SPA for publication, execute the following command.

vagrant@vagrant:~$ cd example
vagrant@vagrant:~$ npm run build -- slides.md

After this command you can publish your slides as a SPA by deploying the complete set of directory contents to the server.

 by the author.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Maciej

Maciej

DevOps Consultant. I’m strongly focused on automation, security, and reliability.