example.md

theme	layout	highlighter	lineNumbers	themeConfig
./	intro	prism	false	title twitter github linkedin Welcome to Slidev datarootsio datarootsio company/dataroots

slidev-theme-dataroots

Create beautiful markdown presentations ❤️

---

layout: presenter photo: https://dataroots.io/static/78eceac35830e54fbb8f5c7f956b19fa/d4a7d/ski-group.webp

Presenter view

Some information

• Bullet points
• More bullets
• Bullets! 🔫

---

layout: twocols

Twocols Example

(Boxes are just for demonstration purposes)

Before anything!

::left::

• This is the left column
• Sed diam voluptua
• With ::left:: prefix

::right::

• This is the right column
• Lorem ipsum dolor sit amet
• With ::right:: prefix

::bottom::

• At the bottom
• With ::bottom:: prefix

--- layout: center --- # This is a centered slide with highlighted code

const aspectRatioPlugin = plugin(({ addUtilities }) => {
  const newUtilities = {
    '.aspect-none': {
      aspectRatio: 'none',
    },
    '.aspect-16-9': {
      aspectRatio: '16/9',
    },
    '.aspect-4-3': {
      aspectRatio: '4/3',
    },
    '.aspect-1-1': {
      aspectRatio: '1/1',
    },
  }
  addUtilities(newUtilities, ['responsive', 'hover'])
})

---

layout: cover

This is a cover

---

layout: window

Console

::window::

const aspectRatioPlugin = plugin(({ addUtilities }) => {
  const newUtilities = {
    '.aspect-none': {
      aspectRatio: 'none',
    },
    '.aspect-16-9': {
      aspectRatio: '16/9',
    },
    '.aspect-4-3': {
      aspectRatio: '4/3',
    },
    '.aspect-1-1': {
      aspectRatio: '1/1',
    },
  }
  addUtilities(newUtilities, ['responsive', 'hover'])
})

---

layout: default

What is Slidev?

Slidev is a slides maker and presenter designed for developers, consist of the following features (and you can also animate it!)

• 📝 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

---

layout: qrcode url: https://github.com/datarootsio/slidev-theme-dataroots

Link to theme