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.Io — Diagrams.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:latestBy 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.mdIf 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.mdAfter this command you can publish your slides as a SPA by deploying the complete set of directory contents to the server.
