feat(theme): shiki styles + layouts
This commit is contained in:
parent
a486d6982f
commit
ccd70d0eb9
SSH Key Fingerprint:
SHA256:ELi8eDeNLl5PTn64G+o2Kx5+XVDfHF5um2tZigfwWkM
337
example.md
337
example.md
@ -101,6 +101,7 @@ hide: true
|
||||
---
|
||||
layout: auto-grid
|
||||
columns: 2
|
||||
rows: 250px
|
||||
---
|
||||
|
||||
# Exemples de technologies d'assistance
|
||||
@ -129,6 +130,8 @@ layout: bullets
|
||||
- écrire simplement et clairement ([FALC](https://www.culture.gouv.fr/Thematiques/developpement-culturel/Culture-et-handicap/Facile-a-lire-et-a-comprendre-FALC-une-methode-utile))
|
||||
- simplifier l'interface utilisateur
|
||||
|
||||
---
|
||||
layout: content
|
||||
---
|
||||
|
||||
# Éléments HTML sémantiques
|
||||
@ -191,7 +194,7 @@ columns: 2
|
||||
```md {all|2|3|4|none}{lines: false}
|
||||
Erroné
|
||||
└── h1 Titre principal
|
||||
├── h2 Titre secondaire // [!code --]
|
||||
├── h2 Titre secondaire
|
||||
├── h4 Titre niveau 4 // [!code error]
|
||||
│ └── h5 Titre niveau 5
|
||||
├── h2 Titre secondaire
|
||||
@ -218,330 +221,50 @@ Correct
|
||||
└── h2 Titre secondaire
|
||||
```
|
||||
|
||||
<!--
|
||||
[HeadingsMap](https://addons.mozilla.org/fr/firefox/addon/headingsmap/)
|
||||
-->
|
||||
::after::
|
||||
Add-on HeadingsMap : [firefox](https://addons.mozilla.org/fr/firefox/addon/headingsmap/), [chrome](https://chromewebstore.google.com/detail/headingsmap/gdaioanblnkeegccagdlnolobgjhfhhm)
|
||||
|
||||
---
|
||||
layout: center
|
||||
hideInToc: true
|
||||
layout: content
|
||||
---
|
||||
|
||||
# les Formulaires
|
||||
# Formulaires
|
||||
|
||||
C'est si simple de faire n'importe quoi 🤪
|
||||
**Toujours** associer un `label` aux champs `input`, `select`, `textarea`, `meter`, `progress`.
|
||||
|
||||
---
|
||||
|
||||
## layout: two-cols
|
||||
|
||||
<div class="form">
|
||||
<h2>Mauvais exemple :</h2>
|
||||
<form class="nul">
|
||||
<input type="text" placeholder="nom*">
|
||||
<input type="text" placeholder="email*">
|
||||
<button>Envoyer</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
::right::
|
||||
|
||||
<div class="form">
|
||||
<h2>Bon exemple :</h2>
|
||||
<form class="cool">
|
||||
<div v-click role="group" aria-labelledby="error-summary-title">
|
||||
<h3 id="error-summary-title" tabindex="-1">
|
||||
Il y a 2 erreurs de saisie dans le formulaire.
|
||||
</h3>
|
||||
<ol>
|
||||
<li class="error">
|
||||
<a href="#input-name">Veuillez renseigner un nom.</a>
|
||||
</li>
|
||||
<li class="error">
|
||||
<a href="#input-email">L'email renseigné n'est pas valide.</a>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<label for="name">Nom (obligatorie)</label>
|
||||
<input id="name" type="text" required>
|
||||
<label for="email">Email (obligatoire)</label>
|
||||
<input id="email" type="email" aria-describedby="email-description" required>
|
||||
<p id="email-description">Format attendu: nom@email.fr</p>
|
||||
<button>Envoyer</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-10">
|
||||
<a href="https://briefs.video/videos/what-happened-to-text-inputs/" rel="noreferer noopener">Qu'est-il arrivé au champ texte ? <small>Vidéo en anglais.</small></a>
|
||||
</div>
|
||||
|
||||
---
|
||||
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
|
||||
```html{2,3}
|
||||
// [!code word:name]
|
||||
<form>
|
||||
<label for="name">Nom</label>
|
||||
<input id="name" type="text" />
|
||||
</form>
|
||||
```
|
||||
|
||||
<arrow v-click="[4, 5]" x1="350" y1="310" x2="195" y2="334" color="#953" width="2" arrowSize="1" />
|
||||
|
||||
<!-- This allow you to embed external code blocks -->
|
||||
|
||||
<!-- Footer -->
|
||||
|
||||
[Learn more](https://sli.dev/features/line-highlighting)
|
||||
|
||||
<!-- Inline style -->
|
||||
<style>
|
||||
.footnotes-sep {
|
||||
@apply mt-5 opacity-10;
|
||||
}
|
||||
.footnotes {
|
||||
@apply text-sm opacity-75;
|
||||
}
|
||||
.footnote-backref {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--
|
||||
Notes can also sync with clicks
|
||||
|
||||
[click] This will be highlighted after the first click
|
||||
|
||||
[click] Highlighted with `count = ref(0)`
|
||||
|
||||
[click:3] Last click (skip two clicks)
|
||||
-->
|
||||
|
||||
---
|
||||
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 <code>````md magic-move</code> (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
|
||||
<!-- step 4 -->
|
||||
<script setup>
|
||||
const author = {
|
||||
name: 'John Doe',
|
||||
books: [
|
||||
'Vue 2 - Advanced Guide',
|
||||
'Vue 3 - Basic Guide',
|
||||
'Vue 4 - The Mystery'
|
||||
]
|
||||
}
|
||||
</script>
|
||||
```
|
||||
````
|
||||
|
||||
---
|
||||
|
||||
# Components
|
||||
|
||||
<div grid="~ cols-2 gap-4">
|
||||
<div>
|
||||
|
||||
You can use Vue components directly inside your slides.
|
||||
|
||||
We have provided a few built-in components like `<Tweet/>` and `<Youtube/>` that you can use directly. And adding your custom components is also super easy.
|
||||
|
||||
```html
|
||||
<Counter :count="10" />
|
||||
```
|
||||
|
||||
<!-- ./components/Counter.vue -->
|
||||
<Counter :count="10" m="t-4" />
|
||||
|
||||
Check out [the guides](https://sli.dev/builtin/components.html) for more.
|
||||
|
||||
</div>
|
||||
<div>
|
||||
|
||||
```html
|
||||
<Tweet id="1390115482657726468" />
|
||||
```
|
||||
|
||||
<Tweet id="1390115482657726468" scale="0.65" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Presenter note with **bold**, *italic*, and ~~striked~~ text.
|
||||
|
||||
Also, HTML elements are valid:
|
||||
<div class="flex w-full">
|
||||
<span style="flex-grow: 1;">Left content</span>
|
||||
<span>Right content</span>
|
||||
</div>
|
||||
-->
|
||||
|
||||
---
|
||||
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:
|
||||
|
||||
<div grid="~ cols-2 gap-2" m="t-2">
|
||||
|
||||
```yaml
|
||||
---
|
||||
theme: default
|
||||
---
|
||||
```
|
||||
|
||||
```yaml
|
||||
---
|
||||
theme: seriph
|
||||
---
|
||||
```
|
||||
|
||||
<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true" alt="">
|
||||
|
||||
<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-seriph/01.png?raw=true" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
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.
|
||||
|
||||
<div v-click>
|
||||
|
||||
This shows up when you click the slide:
|
||||
Si le `label` doit être masqué, utiliser une classe CSS `visually-hidden` (ou `sr-only`).
|
||||
|
||||
```html
|
||||
<div v-click>This shows up when you click the slide.</div>
|
||||
```css
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
block-size: 1px;
|
||||
inline-size: 1px;
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(100%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<v-click>
|
||||
|
||||
The <span v-mark.red="3"><code>v-mark</code> directive</span>
|
||||
also allows you to add
|
||||
<span v-mark.circle.orange="4">inline marks</span>
|
||||
, powered by [Rough Notation](https://roughnotation.com/):
|
||||
|
||||
```html
|
||||
<span v-mark.underline.orange>inline markers</span>
|
||||
```
|
||||
|
||||
</v-click>
|
||||
|
||||
<div mt-20 v-click>
|
||||
|
||||
[Learn more](https://sli.dev/guide/animations#click-animation)
|
||||
|
||||
</div>
|
||||
<a class="abs-br m-6" href="https://briefs.video/videos/what-happened-to-text-inputs/" rel="noreferer noopener">Qu'est-il arrivé au champ texte ? <small>Vidéo en anglais.</small></a>
|
||||
|
||||
---
|
||||
layout: content
|
||||
---
|
||||
|
||||
# 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<number>(10).reduce(
|
||||
(fib) => [...fib, fib.at(-1)! + fib.at(-2)!],
|
||||
[1, 1]
|
||||
)
|
||||
)
|
||||
```
|
||||
Faciliter le remplissage des champs avec des instructions claires des exemples et des messages d'erreur.
|
||||
|
||||
---
|
||||
layout: center
|
||||
|
||||
@ -1,24 +1,29 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
defineProps<{
|
||||
columns?: number
|
||||
rows?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="slidev-layout">
|
||||
<slot />
|
||||
<div class="auto-grid">
|
||||
<slot name="content" />
|
||||
<div>
|
||||
<slot />
|
||||
<div class="auto-grid">
|
||||
<slot name="content" />
|
||||
</div>
|
||||
<slot name="after" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.auto-grid {
|
||||
--_columns: v-bind(columns);
|
||||
--columns: v-bind(columns);
|
||||
--rows: v-bind(rows);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--_columns, 2), 1fr);
|
||||
grid-auto-rows: 250px;
|
||||
grid-template-columns: repeat(var(--columns, 2), 1fr);
|
||||
grid-auto-rows: var(--rows, auto);
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
.auto-grid > * {
|
||||
|
||||
@ -3,12 +3,17 @@ import { defineShikiSetup } from '@slidev/types'
|
||||
|
||||
import {
|
||||
transformerNotationDiff,
|
||||
transformerNotationErrorLevel
|
||||
transformerNotationErrorLevel,
|
||||
transformerNotationWordHighlight
|
||||
} from '@shikijs/transformers'
|
||||
|
||||
export default defineShikiSetup((): ShikiSetupReturn => {
|
||||
return {
|
||||
theme: 'one-dark-pro',
|
||||
transformers: [transformerNotationDiff(), transformerNotationErrorLevel()]
|
||||
transformers: [
|
||||
transformerNotationDiff(),
|
||||
transformerNotationErrorLevel(),
|
||||
transformerNotationWordHighlight()
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
@ -28,7 +28,7 @@ body {
|
||||
font-weight: bold;
|
||||
text-wrap: balance;
|
||||
}
|
||||
:where(h1, h2, h3, h4, .h2, .h3, .h4) + * {
|
||||
:is(h1, h2, h3, h4, .h2, .h3, .h4) + * {
|
||||
margin-block-start: var(--space-s);
|
||||
}
|
||||
:is(h1) {
|
||||
@ -95,14 +95,14 @@ ol:not([role='list']) > li + li {
|
||||
margin-block-start: var(--space-xs);
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
block-size: 1px;
|
||||
overflow: hidden;
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
block-size: 1px;
|
||||
inline-size: 1px;
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(100%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.clean-button {
|
||||
@ -212,12 +212,12 @@ blockquote cite {
|
||||
column-gap: var(--_content-padding);
|
||||
}
|
||||
/* set content inside wrapper column */
|
||||
:where(.wrapper, .slidev-layout) > * {
|
||||
:is(.wrapper, .slidev-layout) > * {
|
||||
grid-column: wrapper;
|
||||
}
|
||||
|
||||
/* set full width content to full grid */
|
||||
:where(.wrapper, .slidev-layout) > .full-width {
|
||||
:is(.wrapper, .slidev-layout) > .full-width {
|
||||
/* calculate inline padding based on available space minus content space to align full-width content with wrapper content */
|
||||
padding-inline: max(
|
||||
calc((100vw - var(--content-width)) / 2),
|
||||
@ -231,7 +231,7 @@ ol:not([role='list']) {
|
||||
padding-inline-start: 1em;
|
||||
}
|
||||
|
||||
.slidev-layout > * + * {
|
||||
:where(.slidev-layout > * + *) {
|
||||
margin-block-start: var(--space-xs);
|
||||
}
|
||||
.slidev-layout.place-content-center {
|
||||
|
||||
@ -3,3 +3,4 @@ import './reset.css'
|
||||
import './variables.css'
|
||||
import './base.css'
|
||||
import './layouts.css'
|
||||
import './shiki.css'
|
||||
|
||||
58
styles/shiki.css
Normal file
58
styles/shiki.css
Normal file
@ -0,0 +1,58 @@
|
||||
.shiki .line {
|
||||
--_bg-opacity: var(--bg-opacity, 1);
|
||||
--c-red-soft: rgba(244, 63, 94, var(--_bg-opacity));
|
||||
--c-orange-soft: rgba(255, 217, 112, var(--_bg-opacity));
|
||||
--c-green-soft: rgba(16, 185, 129, var(--_bg-opacity));
|
||||
|
||||
&:where(.error, .warning, .diff) {
|
||||
--bg-opacity: 0.2;
|
||||
--_bg-color: var(--bg-color, orangered);
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
inline-size: 100%;
|
||||
background-color: var(--_bg-color);
|
||||
}
|
||||
&::after {
|
||||
position: absolute;
|
||||
inset-inline-end: 4px;
|
||||
inset-block-start: 50%;
|
||||
translate: 0 -50%;
|
||||
}
|
||||
&.error {
|
||||
--bg-color: var(--c-red-soft);
|
||||
&::after {
|
||||
content: '🔴';
|
||||
}
|
||||
}
|
||||
&.warning {
|
||||
--bg-color: var(--c-orange-soft);
|
||||
&::after {
|
||||
content: '🟠';
|
||||
}
|
||||
}
|
||||
&.diff {
|
||||
&.remove {
|
||||
--bg-color: var(--c-red-soft);
|
||||
opacity: 0.7;
|
||||
&::after {
|
||||
content: '-';
|
||||
color: red;
|
||||
font-size: var(--size-0);
|
||||
}
|
||||
}
|
||||
&.add {
|
||||
--bg-color: var(--c-green-soft);
|
||||
&::after {
|
||||
content: '+';
|
||||
font-size: var(--size-0);
|
||||
color: greenyellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
.highlighted-word {
|
||||
margin-inline: 1px;
|
||||
padding: 1px;
|
||||
outline: 1px solid grey;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
@ -92,4 +92,7 @@
|
||||
--grid-wrapper: [full-start] 1fr [wrapper-start]
|
||||
minmax(0, var(--content-width)) [wrapper-end] 1fr [full-end];
|
||||
--_content-padding: var(--content-padding, var(--space-s));
|
||||
|
||||
/* overrides */
|
||||
--slidev-code-margin: var(--space-s) 0;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user