diff --git a/slides.md b/slides.md index 36bdaf0..b7c30ff 100644 --- a/slides.md +++ b/slides.md @@ -257,7 +257,8 @@ transition: slide-up layout: statement --- -# Spørsmål? +# Takk for oss +## Spørsmål? - ---- ---- - -# 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** - themes can be shared and re-used as npm packages -- 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion -- 🤹 **Interactive** - embed Vue components to enhance your expressions -- 🎥 **Recording** - built-in recording and camera view -- 📤 **Portable** - export to PDF, PPTX, PNGs, or even a hostable SPA -- 🛠 **Hackable** - virtually anything that's possible on a webpage is possible in Slidev -
-
- -Read more about [Why Slidev?](https://sli.dev/guide/why) - - - - - ---- -transition: slide-up -level: 2 ---- - -# Navigation - -Hover on the bottom-left corner to see the navigation's controls -panel, [learn more](https://sli.dev/guide/ui#navigation-bar) - -## Keyboard Shortcuts - -| | | -|-----------------------------------------------------|-----------------------------| -| right / space | next animation or slide | -| left / shiftspace | previous animation or slide | -| up | previous slide | -| down | next slide | - - - -

Here!

- ---- -layout: two-cols -layoutClass: gap-16 ---- - -# Table of contents - -You can use the `Toc` component to generate a table of contents for your slides: - -```html - - -``` - -The title will be inferred from your slide content, or you can override it with `title` and `level` in your frontmatter. - -::right:: - - - ---- -layout: image-right -image: https://cover.sli.dev ---- - -# Code - -Use code snippets and get the highlighting directly, and even types hover! - -```ts {all|5|7|7-8|10|all} twoslash -// TwoSlash enables TypeScript hover information -// and errors in markdown code blocks -// More at https://shiki.style/packages/twoslash - -import { computed, ref } from 'vue' - -const count = ref(0) -const doubled = computed(() => count.value * 2) - -doubled.value = 2 -``` - - - - -<<< @/snippets/external.ts#snippet - - - -[Learn more](https://sli.dev/features/line-highlighting) - - - - - - ---- -level: 2 ---- - -# Shiki Magic Move - -Powered by [shiki-magic-move](https://shiki-magic-move.netlify.app/), Slidev supports animations across multiple code -snippets. - -Add multiple code blocks and wrap them with ````md magic-move (four backticks) to enable the magic move. -For example: - -````md magic-move {lines: true} -```ts {*|2|*} -// step 1 -const author = reactive({ - name: 'John Doe', - books: [ - 'Vue 2 - Advanced Guide', - 'Vue 3 - Basic Guide', - 'Vue 4 - The Mystery' - ] -}) -``` - -```ts {*|1-2|3-4|3-4,8} -// step 2 -export default { - data() { - return { - author: { - name: 'John Doe', - books: [ - 'Vue 2 - Advanced Guide', - 'Vue 3 - Basic Guide', - 'Vue 4 - The Mystery' - ] - } - } - } -} -``` - -```ts -// step 3 -export default { - data: () => ({ - author: { - name: 'John Doe', - books: [ - 'Vue 2 - Advanced Guide', - 'Vue 3 - Basic Guide', - 'Vue 4 - The Mystery' - ] - } - }) -} -``` - -Non-code blocks are ignored. - -```vue - - -``` -```` - ---- - -# Components - -
-
- -You can use Vue components directly inside your slides. - -We have provided a few built-in components like `` and `` that you can use directly. And adding your -custom components is also super easy. - -```html - - -``` - - - - -Check out [the guides](https://sli.dev/builtin/components.html) for more. - -
-
- -```html - - -``` - - - -
-
- - - ---- -class: px-20 ---- - -# Themes - -Slidev comes with powerful theming support. Themes can provide styles, layouts, components, or even configurations for -tools. Switching between themes by just **one edit** in your frontmatter: - -
- -```yaml ---- -theme: default ---- -``` - -```yaml ---- -theme: seriph ---- -``` - - - - - -
- -Read more about [How to use a theme](https://sli.dev/guide/theme-addon#use-theme) and -check out the [Awesome Themes Gallery](https://sli.dev/resources/theme-gallery). - ---- - -# Clicks Animations - -You can add `v-click` to elements to add a click animation. - -
- -This shows up when you click the slide: - -```html - -
This shows up when you click the slide.
-``` - -
- -
- - - -The v-mark directive -also allows you to add -inline marks -, powered by [Rough Notation](https://roughnotation.com/): - -```html -inline markers -``` - - - -
- -[Learn more](https://sli.dev/guide/animations#click-animation) - -
- ---- - -# Motions - -Motion animations are powered by [@vueuse/motion](https://motion.vueuse.org/), triggered by `v-motion` directive. - -```html - -
- Slidev -
-``` - -
-
- - - -
- -
- Slidev -
-
- - - - -
- -[Learn more](https://sli.dev/guide/animations.html#motion) - -
- ---- - -# LaTeX - -LaTeX is supported out-of-box. Powered by [KaTeX](https://katex.org/). - -
- -Inline $\sqrt{3x-1}+(1+x)^2$ - -Block -$$ {1|3|all} -\begin{aligned} -\nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0} \\ -\nabla \cdot \vec{B} &= 0 \\ -\nabla \times \vec{E} &= -\frac{\partial\vec{B}}{\partial t} \\ -\nabla \times \vec{B} &= \mu_0\vec{J} + \mu_0\varepsilon_0\frac{\partial\vec{E}}{\partial t} -\end{aligned} -$$ - -[Learn more](https://sli.dev/features/latex) - ---- - -# Diagrams - -You can create diagrams / graphs from textual descriptions, directly in your Markdown. - -
- -```mermaid {scale: 0.5, alt: 'A simple sequence diagram'} -sequenceDiagram - Alice->John: Hello John, how are you? - Note over Alice,John: A typical interaction -``` - -```mermaid {theme: 'neutral', scale: 0.8} -graph TD -B[Text] --> C{Decision} -C -->|One| D[Result 1] -C -->|Two| E[Result 2] -``` - -```mermaid -mindmap - root((mindmap)) - Origins - Long history - ::icon(fa fa-book) - Popularisation - British popular psychology author Tony Buzan - Research - On effectiveness
and features - On Automatic creation - Uses - Creative techniques - Strategic planning - Argument mapping - Tools - Pen and paper - Mermaid -``` - -```plantuml {scale: 0.7} -@startuml - -package "Some Group" { - HTTP - [First Component] - [Another Component] -} - -node "Other Groups" { - FTP - [Second Component] - [First Component] --> FTP -} - -cloud { - [Example 1] -} - -database "MySql" { - folder "This is my folder" { - [Folder 3] - } - frame "Foo" { - [Frame 4] - } -} - -[Another Component] --> [Example 1] -[Example 1] --> [Folder 3] -[Folder 3] --> [Frame 4] - -@enduml -``` - -
- -Learn more: [Mermaid Diagrams](https://sli.dev/features/mermaid) -and [PlantUML Diagrams](https://sli.dev/features/plantuml) - ---- -foo: bar -dragPos: - square: 0,-791,0,0 -square: 691,32,167,_,-16 ---- - -# Draggable Elements - -Double-click on the draggable elements to edit their positions. - -
- -###### Directive Usage - -```md - -``` - -
- -###### Component Usage - -```md - -
- Use the `v-drag` component to have a draggable container! - -``` - - -
- Double-click me! -
- - - - -###### Draggable Arrow - -```md - -``` - - - ---- -src: ./pages/imported-slides.md -hide: false ---- - ---- - -# Monaco Editor - -Slidev provides built-in Monaco Editor support. - -Add `{monaco}` to the code block to turn it into an editor: - -```ts {monaco} -import { ref } from 'vue' -import { emptyArray } from './external' - -const arr = ref(emptyArray(10)) -``` - -Use `{monaco-run}` to create an editor that can execute the code directly in the slide: - -```ts {monaco-run} -import { version } from 'vue' -import { emptyArray, sayHello } from './external' - -sayHello() -console.log(`vue ${ version }`) -console.log(emptyArray(10).reduce(fib => [...fib, fib.at(-1)! + fib.at(-2)!], [1, 1])) -``` - ---- -layout: center -class: text-center ---- - -# Learn More - -[Documentation](https://sli.dev) · [GitHub](https://github.com/slidevjs/slidev) · [Showcases](https://sli.dev/resources/showcases) - - + \ No newline at end of file