The component is then used to point to a line of code using x and y coordinates (which I admit, is somewhat unfriendly). Here’s a screenshot of how that slide layout is rendered:ģ image : https: ///collection/94734566/1920x1080 4-ħ 8 Use code snippets and get the highlighting directly!ġ7 18 function updateUser ( id: number, update: User ) directive that opens the code block.Įach mouse click to advance the slide animation highlights a specific part of the code: line 2, then lines 1 to 6, then line 9, and ending with everything highlighted again. The inline style tag is used to override the theme’s own title heading style (which is simply a white text color), and apply a gradient color. That’s a nice way of capturing your thoughts within the content! The HTML comment block doesn't appear in the slides, since it’s reserved for speaker notes. Note how you can include HTML line breaks using and emojis or Markdown-style links at the end of the slide. The slide body follows the title and is typed like any other Markdown code syntax. The markdown header noted with # What is Slidev? sets the corresponding slide's title. In this case, no specific Slidev customization was needed. The - begins a new slide page and sets up any configurations required for this slide. Let’s break this code snippet into the parts that make up the slide: ![]() It aims to simplify the slide building process by using the Markdown syntax as a foundation, while extending the existing feature set by allowing users to build their own components.īegin by initiating a Slidev project in a new folder:Ĥ 5 Slidev is a slide deck maker and presenter designed for developers, and consists of the following featuresĦ 7 - □ **Text-based** - focus on the content with Markdown, and then style them laterĨ - □ **Themable** - theme can be shared and used with npm packagesĩ - □□ **Developer Friendly** - code highlighting, live coding with autocompletionġ0- □ **Interactive** - embedding Vue components to enhance your expressionsġ1 - □ **Recording** - built- in recording and camera viewġ2 - □ **Portable** - export into PDF, PNGs, or even a hostable SPAġ3- □ **Hackable** - anything possible on a webpageġ7 18 Read more about (https: //sli.dev/guide/why) 19 20Ģ8 background-image : linear-gradient ( 45deg, #4EC5D4 10%, #146b8c 20% ) ģ2 -webkit-text-fill- color : transparent Slidev is an open source project based on Vue.js, and built by Anthony Fu. Let’s start by introducing Slidev and its background. Reveal.js and MDX are both examples of projects that have existed for a while. ![]() Patrick Debois, also known as the father of DevOps, reviewed this concept in his blog post analyzing different concepts as code. The open source nature of GitHub makes it easy to share your slides and collaborate with others.Ĭode your presentations with Slidev on GitHubīefore diving into Slidev, I should mention that coding your presentation slides isn’t a new concept. Having access to a code-based version history. In light of the above, some of the advantages of coding your presentations are: While I like this web-based presentation service for its simplicity, it lacks theming and I often exceed the limits of the free version (and at times the paid version as well). was built on top of the open source Reveal.js project by the talented Hakim El Hattab. The other challenge with Google Slides is that you must be “online” for them to work properly - and we all know how slow conference Wi-Fi can be. However, Google Slides lacks text animation features, which are great for animating code changes. ![]() Google Slides is good for collaborative editing when needed, and Snyk’s standardized slide deck themes help keep visual work from becoming a time sink. Keynote isn’t very portable and requires you to export the slides into PDF for sharing. I’ve built slide decks with Keynote, Google Slides, and, and encountered some challenges with each, such as: Thankfully, there’s a better and more programmatic way of building your slides - Slidev, the open source project that allows you to code your presentations. After a while, I wanted to find a method with developer experience built-in to the process. ![]() This can be a tedious process, especially when considering details such as color scheme, aesthetic visual placements, and storyline. As a developer advocate, I do a lot of public speaking to share my experience and educate fellow developers - which means I spend a lot of time building presentations.
0 Comments
Leave a Reply. |