Thème SFEIR School
Présentation du thème SFEIR School
Comment l'utiliser ?
Chaque diapo montre une fonctionnalité du Thème SFEIR School
Le code utilisé pour produire cette présentation est accessible via la navigation verticale (Appuyez sur ⬇️)
⬇️
Navigation verticale !!
Maintenant que vous maîtrisez la navigation verticale, profitez des possibilités du thème SFEIR School !
Diapos de titres
Bienvenue à la SFEIR School
PWA 100
Code pour reproduire / Markdown
<!-- .slide: class="first-slide" sfeir-level="1" sfeir-techno="pwa" -->
# **Bienvenue à la SFEIR School**
## **PWA 100**Bienvenue à la SFEIR School
PWA 200
Code pour reproduire / Markdown
<!-- .slide: class="first-slide" sfeir-level="2" sfeir-techno="pwa" -->
# **Bienvenue à la SFEIR School**
## **PWA 200**Bienvenue à la SFEIR School
PWA 300
Code pour reproduire / Markdown
<!-- .slide: class="first-slide" sfeir-level="3" sfeir-techno="pwa" -->
# **Bienvenue à la SFEIR School**
## **PWA 300**Speaker slide
Code to produce / Markdown
<!-- .slide: class="speaker-slide" -->
<div class="speaker-slide">
# Hello ! @SFEIR
## Jean-François <b>Garreau</b>
### CTO Front
### fake.email@sfeir.com
### @jefbinomed
 <!-- .element: class="speaker" -->
 <!-- .element: class="company" -->
 <!-- .element: class="badge" -->
 <!-- .element: class="badge" -->
 <!-- .element: class="badge" -->
</div>Classic Slides
A new slide
Some Content
Code to produce / Markdown
## ==##
## A new slide
Some ContentSummary
- Item 1
- Item 2
- Item 3
Code to produce / Markdown
## Summary
- Item 1
- Item 2
- Item 3Summary
- List Item 1
- List Item 2
- List Item 3
Code to produce / Markdown
## Summary
1. Item 1
2. Item 2
3. Item 3List with fragments
- List Item 1
- List Item 2
- List Item 3
- Item 1
- Item 2
- Item 3
Code to produce / Markdown
## List with fragments
1. List Item 1
2. List Item 2
3. List Item 3
<!-- .element: class="list-fragment" -->
- Item 1
- Item 2
- **Item 3**
<!-- .element: class="list-fragment" -->Title
SubTitle
A Wonderful Content !
Another subtitle on the same slide
More wonderful content
Code to produce / Markdown
## Title
### SubTitle
A Wonderful Content !
### Another subtitle on the same slide
More wonderful contentMain title
Sub title
First Line
Second Line
Third Line
Sub Content
Sub Content
- Third Level
Code to produce / Markdown
## Main title
### Sub title
- First Line
- Second Line
- Third Line
- Sub Content
- Sub Content
- Third LevelA Slide with Table
| Version | Codename | API | Distribution |
|---|---|---|---|
| 2.2 | Froyo | 8 | 2.4% |
| 2.3.3 - 2.3.7 | Gingerbread | 10 | 30.7% |
| 3.2 | Honeycomb | 13 | 0.1% |
| 4.0.3 - 4.0.4 | Ice Cream Sandwich | 15 | 21.7% |
Code to produce / Markdown
| Version | Codename | API | Distribution |
| ------------- | ------------------ | --- | ------------ |
| 2.2 | Froyo | 8 | 2.4% |
| 2.3.3 - 2.3.7 | Gingerbread | 10 | 30.7% |
| 3.2 | Honeycomb | 13 | 0.1% |
| 4.0.3 - 4.0.4 | Ice Cream Sandwich | 15 | 21.7% |A Quote
To Quote or not to quote...
Code to produce / Markdown
<blockquote>
<cite>
To Quote or not to quote...
</cite>
</blockquote>Links
http://developer.android.com/index.html
Code to produce / Markdown
http://developer.android.com/index.html
http://android.git.kernel.org/
http://androidcookbook.oreilly.com/A slide with Notes
To see the notes of this slide Press : 'S'
Code to produce / Markdown
## A slide with Notes
To see the notes of this slide Press : 'S'
^Notes:
A super notes for speakerDifferents layouts
Slide 1
A paragraph with some text and a link.
Slide 2
- Item 2
- Item 3
Code to produce / Markdown
<!-- .slide: class="tc-multiple-columns" -->
##++##
## Slide 1
A paragraph with some text and a [link](http://hakim.se).
##++##
##++##
## Slide 2
- Item 2
- Item 3
<!-- .element: class="list-fragment" -->
##++##Slide 2 with notes
- Item 2
- Item 3
Code to produce / Markdown
<!-- .slide: class="tc-multiple-columns" data-state="test" -->
##++##
## Slide 1 with notes
A paragraph with some text and a [link](http://hakim.se).
Press 'S'
##++##
##++##
## Slide 2 with notes
- Item 2
- Item 3
<!-- .element: class="list-fragment" -->
##++##
<aside class="notes"><p>Notes for slide
```</p>
</aside>Slide 2
- Item 2
- Item 3
Code to produce / Markdown
<!-- .slide: class="tc-multiple-columns" -->
##++## data-background="./assets/images/dark_background.jpeg"
##++##
##++##
## Slide 2
- Item 2
- Item 3
<!-- .element: class="list-fragment" -->
##++##Slide 1
A paragraph with some text and a link.
Slide 2
- Item 2
- Item 3
Code to produce / Markdown
<!-- .slide: class="tc-multiple-columns" -->
##++##
## Slide 1
A paragraph with some text and a [link](http://hakim.se).
##++##
##++## data-background="./assets/images/dark_background.jpeg" class="contrast-opposite"
## Slide 2
- Item 2
- Item 3
<!-- .element: class="list-fragment" -->
##++##Slide 2
- Item 2
- Item 3
Code to produce / Markdown
<!-- .slide: class="tc-multiple-columns" -->
##++##
##++##
##++## data-background="var(--black)" class="contrast-opposite"
## Slide 2
- Item 2
- Item 3
##++##Slide 2
- Item 2
- Item 3
Code to produce / Markdown
<!-- .slide: class="tc-multiple-columns" -->
##++##
##++##
##++## data-background="./assets/images/light-background.webp"
## Slide 2
- Item 2
- Item 3
##++##Slide 2
- Item 2
- Item 3
Code to produce / Markdown
<!-- .slide: class="tc-multiple-columns" -->
##++##
##++##
##++## class="mask contrast-opposite" data-background="./assets/images/light-background.webp"
## Slide 2
- Item 2
- Item 3
##++##Some Code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
</LinearLayout>Code to produce / Markdown
<!-- .slide: class="with-code-dark" -->
```xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
</LinearLayout>
```Some Code with lots of code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<TextView
android:text="@string/hello"/>
</LinearLayout>Code to produce / Markdown
<!-- .slide: class="with-code-dark max-height" -->
```xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<TextView
android:text="@string/hello"/>
</LinearLayout>
```Some Code with line numbers
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout>
Code to produce / Markdown
<!-- .slide: class="with-code-dark" -->
```xml []
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
</LinearLayout>
```Some black bloc code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
</LinearLayout>Code to produce / Markdown
<!-- .slide: class="with-code-bg-dark" -->
```xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
</LinearLayout>
```Some Code (with highlighting of individual lines)
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout>
Code to produce / Markdown
<!-- .slide: class="with-code-dark" -->
```xml [1,7-11]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
</LinearLayout>
```Some Code (with highlighting of individual lines step by step)
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout>
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout>
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout>
Code to produce / Markdown
<!-- .slide: class="with-code" -->
```xml [1|5-6|7-11]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
</LinearLayout>
```Some BIG Code
<?xml version="1.0" encoding="utf-8"?>Code to produce / Markdown
<!-- .slide: class="with-code big-code" -->
```xml
<?xml version="1.0" encoding="utf-8"?>
```Some BIG Code centered
<?xml version="1.0" encoding="utf-8"?>Code to produce / Markdown
<!-- .slide: class="with-code big-code" -->
```xml
<?xml version="1.0" encoding="utf-8"?>
```
<!-- .element: class="alone" -->Text with inline code
- attribut
draggable=truesur l'élément html. ondragstartevent sur l'élément draggable.ondropevent dans la zone de dépot.ondraghoverevent sur la zone de dépot.
Code to produce / Markdown
<!-- .slide: class="with-code" -->
<br><br>
- attribut `draggable=true` sur l'élément html.
<br><br>
- `ondragstart` event sur l'élément draggable.
<br><br>
- `ondrop` event dans la zone de dépot.
<br><br>
- `ondraghover` event sur la zone de dépot.Custom slides
Transition
Code to produce / Markdown
<!-- .slide: class="transition"-->
# TransitionTransition blue
Code to produce / Markdown
<!-- .slide: class="transition blue"-->
# Transition blueTransition Green
Code to produce / Markdown
<!-- .slide: class="transition green"-->
# Transition greenA White Transition Slide
Code to produce / Markdown
<!-- .slide: class="transition bg-white" -->
# A White Transition SlideA Blue Transition Slide
Code to produce / Markdown
<!-- .slide: class="transition bg-blue" -->
# A Blue Transition SlideA Green Transition Slide
Code to produce / Markdown
<!-- .slide: class="transition bg-green" -->
# A Green Transition SlideTransition left
Code to produce / Markdown
<!-- .slide: class="transition left transition-bg-sfeir-1" -->
# Transition leftTransition right
Code to produce / Markdown
<!-- .slide: class="transition right transition-bg-sfeir-1" -->
# Transition rightTransition top
Code to produce / Markdown
<!-- .slide: class="transition top transition-bg-sfeir-1" -->
# Transition topTransition bottom
Code to produce / Markdown
<!-- .slide: class="transition bottom transition-bg-sfeir-1" -->
# Transition bottomSFEIR bg 1
dependant on mode (institute / school)
Code to produce / Markdown
<!-- .slide: class="transition-bg-sfeir-1" -->
# SFEIR bg 1
## dependant on mode (institute / school)SFEIR bg 2
dependant on mode (institute / school)
Code to produce / Markdown
<!-- .slide: class="transition-bg-sfeir-2" -->
# SFEIR bg 2
## dependant on mode (institute / school)SFEIR bg 3
dependant on mode (institute / school)
Code to produce / Markdown
<!-- .slide: class="transition-bg-sfeir-3" -->
# SFEIR bg SFEIR 3SFEIR bg green 1
Code to produce / Markdown
<!-- .slide: class="transition-bg-green-1" -->
# SFEIR bg green 1SFEIR bg green 2
Code to produce / Markdown
<!-- .slide: class="transition-bg-green-2" -->
# SFEIR bg green 2SFEIR bg green 3
Code to produce / Markdown
<!-- .slide: class="transition-bg-green-3" -->
# SFEIR bg green 3SFEIR bg green 4
Code to produce / Markdown
<!-- .slide: class="transition-bg-green-4" -->
# SFEIR bg green 4SFEIR bg green 5
Code to produce / Markdown
<!-- .slide: class="transition-bg-green-5" -->
# SFEIR bg green 5SFEIR bg green 6
Code to produce / Markdown
<!-- .slide: class="transition-bg-green-6" -->
# SFEIR bg green 6SFEIR bg blue 1
Code to produce / Markdown
<!-- .slide: class="transition-bg-blue-1" -->
# SFEIR bg blue 1SFEIR bg blue 2
Code to produce / Markdown
<!-- .slide: class="transition-bg-blue-2" -->
# SFEIR bg blue 2SFEIR bg blue 3
Code to produce / Markdown
<!-- .slide: class="transition-bg-blue-3" -->
# SFEIR bg blue 3A Custom Transition Slide
Code to produce / Markdown
<!-- .slide: data-background="./assets/images/dark_background.jpeg"
class="transition" -->
# A Custom Transition SlideA Custom Transition Slide with mask
Code to produce / Markdown
<!-- .slide: data-background="./assets/images/dark_background.jpeg"
class="transition mask" -->
# A Custom Transition Slide with maskTransition with bg color
Code to produce / Markdown
<!-- .slide: data-background="#3d4349" class="transition" -->
# Transition with bg colorExercice Title
Exercice
- First step
- Second step
- Third step
Additionnal Advice
Step: push-1
Code to produce / Markdown
<!-- .slide: class="exercice" -->
# Exercice Title
## Exercice
<br>
1. First step
2. Second step
3. Third step
<br>
Additionnal Advice
### Step: push-1A dedicate Quote slide
To Quote or not to quote...
Code to produce / Markdown
<!-- .slide: class="quote-slide" -->
## A dedicate Quote slide
<blockquote>
<cite>
To Quote or not to quote...
</cite>
</blockquote>
[Credit of citation](http://www.sfeir.com)
<!-- .element: class="credits" -->C'est l'heure de la pause
On se retrouve à
10h
Code to produce / Markdown
<!-- .slide: class="bg-blur" -->
<br>
### C'est l'heure de la pause
<br>
<!-- .element: style="--icon-size:300px; --icon-color:var(--light-grey);" -->
<br>
On se retrouve à
<!-- .element: class="center" -->
<br>
![](clock 'tc-icons feather tc-big'<!-- .element: style="--icon-color:var(--light-grey);" --> 10hSlides using helpers of theme
Slide with center image (horizontal)
First way
Code to produce / Markdown
Slide with center image (horizontal)
Second way
Code to produce / Markdown
<img class="center" src="./assets/images/GDG-Logo-carre.png">Slide with center image (horizontal & vertical)
First way
Code to produce / Markdown
<div class="full-center">
<img src="./assets/images/GDG-Logo-carre.png">
</div>Slide with center image (horizontal & vertical)
Second way
Code to produce / Markdown
<!-- .slide: class="full-center" -->
Flex row alignement with auto wrap
First way
Code to produce / Markdown
<!-- .slide: class="flex-row" -->
Flex row alignement with auto wrap
Second way
Code to produce / Markdown
<div class="flex-row">
<img class="h-200" src="./assets/images/GDG-Logo-carre.png">
<img class="h-250" src="./assets/images/GDG-Logo-carre.png">
<img class="h-300" src="./assets/images/GDG-Logo-carre.png">
<img class="h-200" src="./assets/images/GDG-Logo-carre.png">
<img class="h-350" src="./assets/images/GDG-Logo-carre.png">
<img class="h-300" src="./assets/images/GDG-Logo-carre.png">
<img class="h-350" src="./assets/images/GDG-Logo-carre.png">
<img class="h-200" src="./assets/images/GDG-Logo-carre.png">
<img class="h-100" src="./assets/images/GDG-Logo-carre.png">
</div>Play with images sizes
Image from 50px to 1000px (width and height)
Image (w-500) :
Div background:
w-500 h-200
Code to produce / Markdown
<div style="background:red;" class="w-500 h-200"> w-500 h-200</div>Play with images max-sizes
Image from 50px to 1000px (max-width and max-height)
Image :
Div background:
(height:600px) wm-500 h-200
Code to produce / Markdown
<div style="background:red; width:600px;" class="wm-500 h-200">
(height:600px) wm-500 h-200</div>Play with margin top or bottom
Code to produce / Markdown
<!-- .slide: class="flex-row" -->
Image with full width
First way
Code to produce / Markdown
Image with full width
Second way
Code to produce / Markdown
<img class="full-width" src="./assets/images/Sfeir-Gris-vector.svg">Image with full height
Div with height of 600px;
Code to produce / Markdown
<!-- .slide: style="height:100%" -->
<div style="height:600px; width:100%; border: dashed 3px grey;">
<img class="full-height" src="./assets/images/Sfeir-Gris-vector.svg">
</div>Content with float-left
First way
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec risus leo. Vestibulum condimentum orci in urna auctor aliquet. Quisque mi erat, placerat non porttitor ut, gravida eu erat. Fusce semper ipsum vel nibh porttitor aliquam. Cras sed porttitor est, id scelerisque odio. Pellentesque sit amet imperdiet ex. Aliquam erat.
Code to produce / Markdown
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec risus leo. Vestibulum condimentum orci in urna auctor aliquet. Quisque mi erat, placerat non porttitor ut, gravida eu erat. Fusce semper ipsum vel nibh porttitor aliquam. Cras sed porttitor est, id scelerisque odio. Pellentesque sit amet imperdiet ex. Aliquam erat.Content with float-left
Second way
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec risus leo. Vestibulum condimentum orci in urna auctor aliquet. Quisque mi erat, placerat non porttitor ut, gravida eu erat. Fusce semper ipsum vel nibh porttitor aliquam. Cras sed porttitor est, id scelerisque odio. Pellentesque sit amet imperdiet ex. Aliquam erat.
Code to produce / Markdown
<img class="float-left" src="./assets/images/gde.png">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec risus leo. Vestibulum condimentum orci in urna auctor aliquet. Quisque mi erat, placerat non porttitor ut, gravida eu erat. Fusce semper ipsum vel nibh porttitor aliquam. Cras sed porttitor est, id scelerisque odio. Pellentesque sit amet imperdiet ex. Aliquam erat.Content with float-right
First way
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec risus leo. Vestibulum condimentum orci in urna auctor aliquet. Quisque mi erat, placerat non porttitor ut, gravida eu erat. Fusce semper ipsum vel nibh porttitor aliquam. Cras sed porttitor est, id scelerisque odio. Pellentesque sit amet imperdiet ex. Aliquam erat.
Code to produce / Markdown
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec risus leo. Vestibulum condimentum orci in urna auctor aliquet. Quisque mi erat, placerat non porttitor ut, gravida eu erat. Fusce semper ipsum vel nibh porttitor aliquam. Cras sed porttitor est, id scelerisque odio. Pellentesque sit amet imperdiet ex. Aliquam erat.Content with float-right
Second way
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec risus leo. Vestibulum condimentum orci in urna auctor aliquet. Quisque mi erat, placerat non porttitor ut, gravida eu erat. Fusce semper ipsum vel nibh porttitor aliquam. Cras sed porttitor est, id scelerisque odio. Pellentesque sit amet imperdiet ex. Aliquam erat.
Code to produce / Markdown
<img class="float-right" src="./assets/images/gde.png">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec risus leo. Vestibulum condimentum orci in urna auctor aliquet. Quisque mi erat, placerat non porttitor ut, gravida eu erat. Fusce semper ipsum vel nibh porttitor aliquam. Cras sed porttitor est, id scelerisque odio. Pellentesque sit amet imperdiet ex. Aliquam erat.Image with source
Use Feathers icons
Using markdown image
basic icon
small icon
big icon
custom icon and custom color
Using html
basic icon
Complete list of icons : https://feathericons.com/
Code to produce / Markdown
## Use Feathers icons
Using markdown image
 basic icon
 small icon
 big icon
<!-- .element: style="--tc-icon-size:96px; --tc-icon-color:orange;" --> custom icon and custom color
Using html
<i data-feather="github" ></i> basic iconUse Material icons
Using markdown image
android basic icon
android small icon
android big icon
android custom icon and custom color
Code to produce / Markdown
## Use Material icons
Using markdown image
 basic icon
 small icon
 big icon
<!-- .element: style="--tc-icon-size:96px; --tc-icon-color:orange;" --> custom icon and custom colorUse Fontawesome icons
Using markdown image
basic icon
small icon
big icon
custom icon and custom color
Code to produce / Markdown
## Use Fontawesome icons
Using markdown image
 basic icon
 small icon
 big icon
<!-- .element: style="--tc-icon-size:96px; --tc-icon-color:orange;" --> custom icon and custom colorAdmonition Blocks
Du texte Admonition en mode informatif mais qui est vraiment assez long et qui du coup nécessite un retour à la ligne
Mode abstract
Mode tip
Mode note
Mode success
Mode question
Mode warning
Mode failure
Mode danger
Mode important
Mode bug
Mode example
Mode quote
Mode custom
Mode custom and custom color
Code to produce / Markdown
# Admonition Blocks
Du texte Admonition en mode informatif mais qui est vraiment assez long et qui du coup nécessite un retour à la ligne
<!-- .element: class="admonition info" -->
Mode abstract
<!-- .element: class="admonition abstract" -->
Mode tip
<!-- .element: class="admonition tip" -->
Mode note
<!-- .element: class="admonition note" -->
Mode success
<!-- .element: class="admonition success" -->
Mode question
<!-- .element: class="admonition question" -->
Mode warning
<!-- .element: class="admonition warning" -->
Mode failure
<!-- .element: class="admonition failure" -->
Mode danger
<!-- .element: class="admonition danger" -->
Mode important
<!-- .element: class="admonition important" -->
Mode bug
<!-- .element: class="admonition bug" -->
Mode example
<!-- .element: class="admonition example" -->
Mode quote
<!-- .element: class="admonition quote" -->
Mode custom
<!-- .element: class="admonition custom" data-admonition-icon="🐼 Custom" -->
Mode custom and custom color
<!-- .element: class="admonition custom" data-admonition-icon="🕶️ Custombis" style="--admonition-bg-color:#d7be00;" -->Admonition Blocks - using custom syntax
Some info block
Custom and custom color
Code to produce / Markdown
# Admonition Blocks - using custom syntax
!!! info
Some info block
!!!
!!! custom tc-admonition-type="🕶️ Custombis" tc-admonition-color="#d7be00"
Custom and custom color
!!!You can include QR Code to your slides
You can put QR Codes with plain text in it (URL, text, everything that is inline text for this version)
When you use QR Code, please think at the accessibility of the data you expose ! The QR Code should not be the only way to share your information
The qrcode is inline (it's an img). text to produce :
Some examples
some text
some text above
some text below
some text left
Code to produce / Markdown
# Some examples
<div class="flex-row">
 some text
 some text above
 some text below
 some text left
</div>Somes meta examples
VCard
BEGIN:VCARD
VERSION:3.0
N:Lastname;Firstname
FN:Firstname Lastname
ORG:CompanyName
TITLE:JobTitle
ADR:;;123 Sesame St;SomeCity;CA;12345;USA
TEL;WORK;VOICE:1234567890
TEL;CELL:Mobile
TEL;FAX:
EMAIL;WORK;INTERNET:foo@email.com
URL:http://website.com
END:VCARD
Code to produce / Markdown
Somes meta examples
V Calendar
BEGIN:VCALENDAR
VERSION:2.0
BEGIN:VEVENT
SUMMARY:Event Title
DTSTART:Start Date and Time
DTEND:End Date and Time
LOCATION:Event Location
DESCRIPTION:Event Description
END:VEVENT
END:VCALENDAR
Code to produce / Markdown
Somes meta examples
Emails
mailto:email_address?subject=email_subject&body=email_body
Code to produce / Markdown
Somes meta examples
Geo Format
geo:latitude,longitude,altitude
Code to produce / Markdown
Somes meta examples
SMS
smsto:phone_number:message
Code to produce / Markdown
Somes meta examples
WIFI
WIFI:T:network_type;S:network_name;P:password;H:hidden;;
Code to produce / Markdown
Slides using hidden slides
Slides using hidden slides
We can configure some slides and it's HTML to display or hidde some slides
Code to produce / Markdown
<!-- .slide: data-type-show="prez" -->
For slide present on presentation
<!-- .slide: data-type-show="full" -->
For slide present on restitution version
To configure with index.htmlInternationalization
Internationalization
We can provide slides in different languages. Just write several versions of each markdown file (e.g., 00_intro.md and 00_intro.EN.md).
To select the language to be used, you can
- set the language in index.html by setting the HTML attribute
data-lang; or - pick the language when presenting by setting the URL parameter lang.
The URL parameter takes precedence over the HTML attribute.
For instance, add ?data-lang=fr or &data-lang=fr to the URL before the hash sign to switch to the French version of this presentation (only the introduction slides are translated)
Thème SFEIR School Présentation du thème SFEIR School