| title | theme | lineNumbers | hideInToc |
|---|---|---|---|
Slidev-theme-euricom |
./ |
true |
true |
layout: cover background: https://source.unsplash.com/1600x900/?nature,water hideInToc: true
layout: section-dark background: https://source.unsplash.com/1600x900/?nature
And this can be used as test below it
- We can have a list.
- With a few items.
- And som others
- Items
If you want to use a quote, you can use the > character.
- Increased font size...
- ...and centered content
- help stressing a few points
Hover on the bottom-left corner to see the navigation's controls panel, learn more
| Key | Description |
|---|---|
| right / space | next animation or slide |
| left / shiftspace | previous animation or slide |
| up | previous slide |
| down | next slide |
| Syntax | Description | Test Text |
|---|---|---|
| Header | Title | Here's this |
| Paragraph | Text | And more |
| Other | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
::right::
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This content can now be styled/positioned independent of the title, because it will be in a separate grid cell.
::right::
This content can now be styled/positioned independent of the title, because it will be in a separate grid cell.
Use code snippets and get the highlighting directly!
<template>
<h1>Hello World"</h1>
<div class="message">{{ message }}</div>
</template>
<script>
export default {
data:() => ({
message: 'Great to be here!',
})
}
</script>
<style scoped>
.message {
color: red;
bg: yello
}
</style>You can edit the code inline
// @ts-ignore
import { computed, unref, Ref } from 'vue';
export function add(a: Ref<number> | number, b: number) {
return computed(() => unref(a) + unref(b))
}
add(1, "2")
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}::right::
const HelloMessage => ({ name }) => ( {
render() {
return <div>Hello {this.props.name}</div>;
}
}// code-xsmall
const number = 12;
console.log(number)// code-small
const number = 12;
console.log(number)// default
const number = 12;
console.log(number)// code-xlarge
const number = 12;
console.log(number)block quote, hello
world
layout: image-left image: https://images.unsplash.com/photo-1452110040644-6751c0c95836?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=900&ixid=MnwxfDB8MXxyYW5kb218MHx8bmF0dXJlLHdhdGVyfHx8fHx8MTY1MTIzMTQ1NA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1600 class: code-small
When you realize nothing is lacking, the whole world belongs to you
---
layout: image-left
image: https://images.com/my-image.png
---layout: image-right image: https://media.istockphoto.com/photos/programming-source-code-abstract-background-picture-id1047259374?s=612x612 class: code-small
How many programmers does it take to change a light bulb? None, that’s a hardware problem
---
layout: image-right
image: https://images.com/my-image.png
---layout: iframe url: https://react-query.tanstack.com/
sequenceDiagram
Test->John: Hello John, how are you?
Note over Alice,John: A typical interaction
See more at https://mermaid-js.github.io/mermaid/#/