Skip to content

Latest commit

 

History

History
707 lines (489 loc) · 11.5 KB

example.md

File metadata and controls

707 lines (489 loc) · 11.5 KB
Raw
theme titleTemplate author layout
./
%s - Shodo
Manon Carbonnel
cover
Shodo

This is your presentation title

layout: full

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

Learn More

Documentation / GitHub Repo

layout: intro

I am Jaden Smith

I am here because I love to give presentations.

You can find me at @username

layout: section
index: 1

Transition headline

Let’s start with the first set of slides

layout: quote

Quotations are commonly printed as a means of inspiration and to invoke philosophical thoughts from the reader.

Some author

layout: default

This is a slide title

  • Here you have a list of items
  • And some text
  • But remember not to overload your slides with content

Your audience will listen to you or read the content, but won’t do both.

layout: statement

Big concept

Bring the attention of your audience over a key concept using icons or illustrations

layout: two-cols-header

You can also split your content

::left::

White

Is the color of milk and fresh snow, the color produced by the combination of all the colors of the visible spectrum.

::right::

Black

Is the color of ebony and of outer space. It has been the symbolic color of elegance, solemnity and authority.

layout: three-cols-header

In two or three columns

::left::

Yellow

Is the color of gold, butter and ripe lemons. In the spectrum of visible light, yellow is found between green and orange.

::center::

Blue

Is the colour of the clear sky and the deep sea. It is located between violet and green on the optical spectrum.

::right::

Red

Is the color of blood, and because of this it has historically been associated with sacrifice, danger and courage.

layout: image-right
image: /image-illustration-manifeste.png

A picture is worth a thousand words

A complex idea can be conveyed with just a single still image, namely making it possible to absorb large amounts of data quickly.

Some code is worth 1000 words

Use code snippets and get the highlighting directly, and even types hover![^1]

// 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;
level: 2

Shiki Magic Move

Powered by shiki-magic-move, 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:

```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
<!-- step 4 -->
<script setup>
const author = {
  name: "John Doe",
  books: [
    "Vue 2 - Advanced Guide",
    "Vue 3 - Basic Guide",
    "Vue 4 - The Mystery",
  ],
};
</script>
```

Live code edition using {monaco}

function distance(x: number, y: number) {
  return Math.sqrt(x ** 2 + y ** 2);
}

Execute code using {monaco-run}

function distance(x: number, y: number) {
  return Math.sqrt(x ** 2 + y ** 2);
}
console.log(distance(3, 4));

Diffs can be reviewed

{monaco-diff} can generate a diff between two code blocks!

console.log('Original text')
~~~
console.log('Modified text')
layout: image
image: /image-illustration-manifeste.png

Want big impact? Use big image.

Use tables to compare data

A B C
Yellow 10 20 7
Blue 20 15 10
Orange 30 24 16 
layout: center

89,526,124

Whoa! That’s a big number, aren’t you proud?

layout: three-rows

::top:: 89,526,124$

That’s a lot of money

::center:: 185,244 users

And a lot of users

::bottom:: 100%

Total success!

layout: six-cells-header

Let’s review some concepts

::top-left::

Top left

This shows on the top left

::top-center::

Top center

This shows on the top center

::top-right::

Top right

This shows on the top right

::bottom-left::

Bottom left

This shows on the bottom left

::bottom-center::

Bottom center

This shows on the bottom center

::bottom-right::

Bottom right

This shows on the bottom right

Components

You can use Vue components directly inside your slides.

We have provided a few built-in components like <Tweet/> that you can use directly.

And adding your custom components is also super easy.

<Counter :count="10" />

Check out the guides for more.

<Tweet id="1225079443758206976" />
layout: full

Videos


<Youtube id="56EpJFCka1I" width="80%" height="350px" />

Clicks Animations

You can add v-click to elements to add a click animation.

This shows up when you click the slide:

<div v-click>This shows up when you click the slide.</div>

The v-mark directive also allows you to add inline marks , powered by Rough Notation:

<span v-mark.underline.orange>inline markers</span>

Motions

Motion animations are powered by @vueuse/motion, triggered by v-motion directive.

<div
  v-motion
  :initial="{ x: -80 }"
  :enter="{ x: 0 }"
  :click-3="{ x: 80 }"
  :leave="{ x: 1000 }"
>
  Slidev
</div>
Slidev
<script setup lang="ts"> const final = { x: 0, y: 0, rotate: 0, scale: 1, transition: { type: 'spring', damping: 10, stiffness: 20, mass: 2 } } </script>

LaTeX

LaTeX is supported out-of-box powered by KaTeX.


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

Block

$$ {1|3|all} \begin{array}{c}

\nabla \times \vec{\mathbf{B}} -, \frac1c, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \

\nabla \times \vec{\mathbf{E}}, +, \frac1c, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \

\nabla \cdot \vec{\mathbf{B}} & = 0

\end{array} $$


Learn more

Diagrams

You can create diagrams / graphs from textual descriptions, directly in your Markdown.

sequenceDiagram
    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction
Loading 
graph TD
B[Text] --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
Loading 
mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid
Loading 
@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

layout: screenshot
layoutClass: laptop
screenshot: image-illustration-manifeste.png

::left::

Screenshot display

::right::

Show and explain your web, app or software projects using these gadget templates.

layout: screenshot
layoutClass: mobile
screenshot: shodo.io-screenshot.png

::left::

Screenshot display

::right::

Show and explain your web, app or software projects using these gadget templates.

layout: end

Any questions?

You can find me at