Skip to content

example.md

Latest commit

 

History

History
160 lines (112 loc) · 2.88 KB

example.md

File metadata and controls

160 lines (112 loc) · 2.88 KB
theme ./
layout cover
background /background.jpg

openscript Ltd. theme starter

Presentation slides for developers

Press Space for next page

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?

layout: task name: Task Layout time: 30min method: Work in Groups ai: on

Describe the most important steps of the task here:

  1. First go there
    • One
    • Two
  2. Then do this
  3. Finally..

layout: two-cols-header

Two column header

::left::

  • Left
    • Awesome

::right::

console.log("With some code"); console.log("With some code"); console.log("With some code");

inline code

Title ...

Subtitle

Bliblablub

Math

$\sqrt{3x-1}+(1+x)^2$

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

Lists

  • This
  • are
  • bullet points.
  1. This
  2. is
  3. an enumerated list.

Tables

Header 1 Header 2 Header 3
Row 1 Row 1 Row 1
Row 2 Row 2 Row 2
Row 3 Row 3 Row 3
Row 4 Row 4 Row 4

layout: image-right image: 'https://images.unsplash.com/photo-1527095655060-4026c4af2b25?q=80&w=1740'

Code 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)
}

QR-Code

<QRCode value="https://openscript.ch" style="width: 200px" />

layout: center class: "text-center"

Learn More

Documentations / GitHub Repo