How to use it ?

Each of those slides will show you what you can do with SFEIR School Theme

To easily understand how to reproduce the slide for your needs. This presentation will use RevealJS vertical navigation to show you the code to produce. Press space or ⬇️key to see the code

⬇️

Code to produce / Markdown

<!-- .slide: class="first-slide" sfeir-level="1" sfeir-techno="pwa" -->

# **Welcome to SFEIR School**

## **PWA 100**

Code to produce / Markdown

<!-- .slide: class="first-slide" sfeir-level="2" sfeir-techno="pwa" -->

# **Welcome to SFEIR School**

## **PWA 200**

Code to produce / Markdown

<!-- .slide: class="first-slide" sfeir-level="3" sfeir-techno="pwa" -->

# **Welcome to SFEIR School**

## **PWA 300**

Code to produce / Markdown

<!-- .slide: class="speaker-slide" -->

# Hello ! @SFEIR

![speaker](./assets/images/jf.jpg)
![company](./assets/images/logo-sfeir-blanc.png)
![badge first-badge](./assets/images/gde.png)
![badge second-badge](./assets/images/GDG-Logo-carre.png)
![badge third-badge mt-50](./assets/images/mts.png)

<h2>Jean-François<span> Garreau</span></h2>

### CTO front

<!-- .element: class="icon-rule icon-first" -->

### @jefbinomed

<!-- .element: class="icon-twitter icon-second" -->

### fake.email@sfeir.com

<!-- .element: class="icon-mail icon-third" -->

Code to produce / Markdown

<!-- .slide: class="speaker-slide blue" -->

# Hello ! @SFEIR

![speaker](./assets/images/jf-2.jpg)
![company](./assets/images/logo-sfeir-blanc.png)
![badge first-badge](./assets/images/gde.png)
![badge second-badge](./assets/images/GDG-Logo-carre.png)
![badge third-badge mt-50](./assets/images/mts.png)

<h2>Jean-François<span> Garreau</span></h2>

### CTO front

<!-- .element: class="icon-rule icon-first" -->

### @jefbinomed

<!-- .element: class="icon-twitter icon-second" -->

### fake.email@sfeir.com

<!-- .element: class="icon-mail icon-third" -->

Code to produce / Markdown

<!-- .slide: class="speaker-slide green" -->

# Hello ! @SFEIR

![speaker](./assets/images/jf-3.png)
![company](./assets/images/logo-sfeir-blanc.png)
![badge first-badge](./assets/images/gde.png)
![badge second-badge](./assets/images/GDG-Logo-carre.png)
![badge third-badge mt-50](./assets/images/mts.png)

<h2>Jean-François<span> Garreau</span></h2>

### CTO front

<!-- .element: class="icon-rule icon-first" -->

### @jefbinomed

<!-- .element: class="icon-twitter icon-second" -->

### fake.email@sfeir.com

<!-- .element: class="icon-mail icon-third" -->

Code to produce / Markdown

## ==##

## A new slide

Some Content

Code to produce / Markdown

## ==##

<!-- .slide: class="blue" -->

## A new slide

Some Content

Code to produce / Markdown

## ==##

<!-- .slide: class="green" -->

## A new slide

Some Content

Code to produce / Markdown

## Summary

-   Item 1
-   Item 2
-   Item 3

Code to produce / Markdown

## Summary

1. Item 1
2. Item 2
3. 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" -->

Code to produce / Markdown

## Title

### SubTitle

A Wonderful Content !

### Another subtitle on the same slide

More wonderful content

Code to produce / Markdown

## Main title

### Sub title

-   First Line

-   Second Line

-   Third Line

    -   Sub Content

    -   Sub Content

        -   Third Level

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%        |

Code to produce / Markdown

<blockquote>
<cite>
  To Quote or not to quote...
</cite>
</blockquote>

Code to produce / Markdown

http://developer.android.com/index.html

http://android.git.kernel.org/

http://androidcookbook.oreilly.com/

Code to produce / Markdown

## A slide with Notes

To see the notes of this slide Press : 'S'

^Notes:
A super notes for speaker

function hello() {
    console.log('World');
}

Slide 1

A paragraph with some text and a link.

Slide 2

Item 2
Item 3

Slide 1 with notes

A paragraph with some text and a link.

Press 'S'

Slide 2 with notes

Item 2
Item 3

Slide 2

Item 2
Item 3

Slide 1

A paragraph with some text and a link.

Slide 2

Item 2
Item 3

Slide 2

Item 2
Item 3

Slide 2

Item 2
Item 3

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 monospace font)

<?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
<?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 consolas font)

<?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 consolas" -->

```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 inconsolata font)

<?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 inconsolata" -->

```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" -->

```xml
<?xml version="1.0" encoding="utf-8"?>
```

<!-- .element: class="big-code" -->

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.

Code to produce / Markdown

<!-- .slide: class="transition"-->

# Transition

Code to produce / Markdown

<!-- .slide: class="transition blue"-->

# Transition blue

Code to produce / Markdown

<!-- .slide: class="transition green"-->

# Transition green

Code to produce / Markdown

<!-- .slide: class="transition bg-white" -->

# A White Transition Slide

Code to produce / Markdown

<!-- .slide: class="transition bg-blue" -->

# A Blue Transition Slide

Code to produce / Markdown

<!-- .slide: class="transition bg-green" -->

# A Green Transition Slide

Code to produce / Markdown

<!-- .slide: class="transition left transition-bg-sfeir-1" -->

# Transition left

Code to produce / Markdown

<!-- .slide: class="transition right transition-bg-sfeir-1" -->

# Transition right

Code to produce / Markdown

<!-- .slide: class="transition top transition-bg-sfeir-1" -->

# Transition top

Code to produce / Markdown

<!-- .slide: class="transition bottom transition-bg-sfeir-1" -->

# Transition bottom

Code to produce / Markdown

<!-- .slide: class="transition-bg-sfeir-1" -->

# SFEIR bg 1

## dependant on mode (institute / school)

Code to produce / Markdown

<!-- .slide: class="transition-bg-sfeir-2" -->

# SFEIR bg 2

## dependant on mode (institute / school)

Code to produce / Markdown

<!-- .slide: class="transition-bg-sfeir-3" -->

# SFEIR bg SFEIR 3

Code to produce / Markdown

<!-- .slide: class="transition-bg-green-1" -->

# SFEIR bg green 1

Code to produce / Markdown

<!-- .slide: class="transition-bg-green-2" -->

# SFEIR bg green 2

Code to produce / Markdown

<!-- .slide: class="transition-bg-green-3" -->

# SFEIR bg green 3

Code to produce / Markdown

<!-- .slide: class="transition-bg-green-4" -->

# SFEIR bg green 4

Code to produce / Markdown

<!-- .slide: class="transition-bg-green-5" -->

# SFEIR bg green 5

Code to produce / Markdown

<!-- .slide: class="transition-bg-green-6" -->

# SFEIR bg green 6

Code to produce / Markdown

<!-- .slide: class="transition-bg-blue-1" -->

# SFEIR bg blue 1

Code to produce / Markdown

<!-- .slide: class="transition-bg-blue-2" -->

# SFEIR bg blue 2

Code to produce / Markdown

<!-- .slide: class="transition-bg-blue-3" -->

# SFEIR bg blue 3

Code to produce / Markdown

<!-- .slide: data-background="./assets/images/dark_background.jpeg"
    class="transition" -->

# A Custom Transition Slide

Code to produce / Markdown

<!-- .slide: data-background="./assets/images/dark_background.jpeg"
    class="transition mask" -->

# A Custom Transition Slide with mask

Code to produce / Markdown

<!-- .slide: data-background="#3d4349" class="transition" -->

# Transition with bg color

Code to produce / Markdown

<!-- .slide: class="exercice" -->
# Exercice Title
## Lab
<br>
1. First step
2. Second step
3. Third step
<br>
Additionnal Advice
### Step: push-1

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" -->

Code to produce / Markdown

<!-- .slide: class="bg-blur" -->
<br>
### C'est l'heure de la pause
<br>
![sfeir-icons](pause-circle)<!-- .element: style="--icon-size:300px; --icon-color:var(--light-grey);" -->
<br>
On se retrouve à
<!-- .element: class="center" -->
<br>
![sfeir-icons big](clock)<!-- .element: style="--icon-color:var(--light-grey);" --> 10h

Code to produce / Markdown

![center](./assets/images/GDG-Logo-carre.png)

Code to produce / Markdown

<img class="center" src="./assets/images/GDG-Logo-carre.png">

Code to produce / Markdown

<div class="full-center">
    <img src="./assets/images/GDG-Logo-carre.png">
</div>

Code to produce / Markdown

<!-- .slide: class="full-center" -->

![](./assets/images/GDG-Logo-carre.png)

Code to produce / Markdown

<!-- .slide: class="flex-row" -->

![h-200](./assets/images/GDG-Logo-carre.png)
![h-250](./assets/images/GDG-Logo-carre.png)
![h-300](./assets/images/GDG-Logo-carre.png)
![h-200](./assets/images/GDG-Logo-carre.png)
![h-350](./assets/images/GDG-Logo-carre.png)
![h-300](./assets/images/GDG-Logo-carre.png)
![h-350](./assets/images/GDG-Logo-carre.png)
![h-200](./assets/images/GDG-Logo-carre.png)
![h-100](./assets/images/GDG-Logo-carre.png)

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>

Code to produce / Markdown

![w-500](./assets/images/350x90.png)

<div style="background:red;" class="w-500 h-200"> w-500 h-200</div>

Code to produce / Markdown

![wm-500](./assets/images/350x90.png)

<div style="background:red; width:600px;" class="wm-500 h-200"> 
    (height:600px) wm-500 h-200</div>

Code to produce / Markdown

<!-- .slide: class="flex-row" -->

![h-200 mt-430](./assets/images/GDG-Logo-carre.png)
![h-200 mt-150](./assets/images/GDG-Logo-carre.png)
![h-200 mt-50](./assets/images/GDG-Logo-carre.png)
![h-200 mt-10](./assets/images/GDG-Logo-carre.png)
![h-200](./assets/images/GDG-Logo-carre.png)
![h-200 mb-10](./assets/images/GDG-Logo-carre.png)
![h-200 mb-50](./assets/images/GDG-Logo-carre.png)
![h-200 mb-160](./assets/images/GDG-Logo-carre.png)
![h-200 mb-430](./assets/images/GDG-Logo-carre.png)

Code to produce / Markdown

![full-width](./assets/images/Sfeir-Gris-vector.svg)

Code to produce / Markdown

<img class="full-width" src="./assets/images/Sfeir-Gris-vector.svg">

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>

Code to produce / Markdown

![float-left](./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.

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.

Code to produce / Markdown

![float-right](./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.

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.

Code to produce / Markdown

## Use Feathers icons

Using markdown image
![sfeir-icons](github) basic icon
![sfeir-icons small](github) small icon
![sfeir-icons big](github) big icon
![sfeir-icons](github)<!-- .element: style="--icon-size:96px; --icon-color:orange;" --> custom icon and custom color
Using html
<i data-feather="github" ></i> basic icon

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;" -->

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.html

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)

	<?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>

SfeirSchool Theme

Showroom of SFEIR school theme