Skip to content

Latest commit

 

History

History
252 lines (177 loc) · 4.96 KB

example.md

File metadata and controls

252 lines (177 loc) · 4.96 KB
theme background themeConfig
./
color background code-background code-border accents-teal accents-yellow accents-red accents-lightblue accents-blue accents-vulcan header-shadow default-headingBg default-headingColor default-background center-headingBg center-headingColor center-background cover-headingBg cover-headingColor cover-background section-headingBg section-headingColor section-background aboutme-background aboutme-color aboutme-helloBg aboutme-helloColor aboutme-nameColor
#F3EFF5
#161C2C
#0F131E
#242d34
#44FFD2
#FFE45E
#FE4A49
#15C2CB
#5EADF2
#0E131F
rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
var(--slidev-theme-accents-yellow)
var(--slidev-theme-accents-vulcan)
var(--slidev-theme-background)
var(--slidev-theme-accents-blue)
var(--slidev-theme-accents-vulcan)
var(--slidev-theme-background)
var(--slidev-theme-accents-teal)
var(--slidev-theme-accents-vulcan)
var(--slidev-theme-background)
var(--slidev-theme-accents-lightblue)
var(--slidev-theme-accents-vulcan)
var(--slidev-theme-background)
var(--slidev-theme-color)
var(--slidev-theme-background)
var(--slidev-theme-accents-yellow)
var(--slidev-theme-background)
var(--slidev-theme-accents-red)

Slidev - The Unnamed

Created by Elio Struyf

layout: about-me

helloMsg: Hello! name: Elio Struyf imageSrc: https://elio.dev/eliostruyf_2024.webp position: left job: Struyf Consulting line1: "#Stickerpreneur @ pyod.shop" line2: "#Maintainer @ Front Matter CMS" social1: "@eliostruyf" social2: eliostruyf.com social3: elio@struyfconsulting.be

layout: cover

Cover title

Subtitle for the cover

layout: section

Section title

Subtitle for the section

layout: center

Center title

Subtitle for the center layout

layout: two-cols

Left

This shows on the left

::right::

Right

This shows on the right

Code with Shiki and The unnamed theme

The code highlighting is powered by Shiki and The unnamed - VS Code theme

interface User {
  id: number
  firstName: string
  lastName: string
  role: string
}

function updateUser(id: number, update: Partial<User>) {
  const user = getUser(id)
  const newUser = { ...user, ...update }
  saveUser(id, newUser)
}

Table

Title Description Default
layout The layout to use for the slide default
theme The theme to use for the slide the-unnamed
highlighter The highlighter to use for the slide shiki
background The background to use for the slide none

Content test underneath

Some content to place here

Todo

  • Add a todo list
  • Add a todo list
  • Add a todo list

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Info: This is a note

What is Slidev?

Slidev is a slides maker and presenter designed for developers, consist of the following features

  • 📝 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
  • 🤹 Interactive - embedding Vue components to enhance your expressions
  • 🎥 Recording - built-in recording and camera view
  • 📤 Portable - export into PDF, PNGs, or even a hostable SPA
  • 🛠 Hackable - anything possible on a webpage


Read more about Why Slidev?

Navigation

Hover on the bottom-left corner to see the navigation's controls panel

Keyboard Shortcuts
space / tab / right next animation or slide
left / shiftspace previous animation or slide
up previous slide
down next slide

layout: image-right image: 'https://source.unsplash.com/collection/94734566/1920x1080'

Code

Use code snippets and get the highlighting directly!

interface User {
  id: number
  firstName: string
  lastName: string
  role: string
}

function updateUser(id: number, update: Partial<User>) {
  const user = getUser(id)
  const newUser = { ...user, ...update }
  saveUser(id, newUser)
}

Monaco Editor

interface User {
  id: number
  firstName: string
  lastName: string
  role: string
}

function updateUser(id: number, update: Partial<User>) {
  const user = getUser(id)
  const newUser = { ...user, ...update }
  saveUser(id, newUser)
}

Monaco Editor

console.log('Click the play button to run me')

layout: center class: "text-center"

Learn More

Documentations / GitHub Repo