---
title: Ma présentation BUNIGE
subtitle: Une démo
date: le 9 février 2024
place: Ici
id: 20240925143527
author:
- name: Présentateur/trice 
  email: Présentateur-trice@unige.ch
licence:
- type: CC-BY-SA 4.0
  url: https://creativecommons.org/licenses/by-sa/4.0/
source: https://example.org
bibliography: static/references.json
csl-style: static/heg-iso-690.csl
link-citations: true
---

## Plan

1. [Partie 1](#partie-1).
1. [Partie 2](#partie-2).

# Partie 1

---

## [`reveal-js`]{.bunige-code-inline} et [`pandoc`]{.bunige-code-inline}

- Rédige tes *slides* en markdown.
- Converti ton markdown en un fichier HTML suivant le modèle de
  [`reveal-js`]{.bunige-code-inline}.
- Mais avec une version proche de la charte graphique de l'UNIGE.
- Un exemple est donnée dans le fichier
  [`./bunige-demo.md`]{.bunige-code-inline}.

---

- Un lien : <https://example.org>.
- Texte préformaté : [`preformated`]{.bunige-code-inline}

---

## Des classes en markdown ?

Pour ajouter une classe à un élément en ligne en
[`pandoc`]{.bunige-code-inline} markdown, voici comment faire :

```{.markdown}
Un peu de [texte]{.class} en ligne.
```

Ce qui donne :

```{.html}
<p>Un peu de <span class="class">texte</span> en ligne.
```

---

Un joli texte avant une belle image. Machin

![Légende de l'image](https://www.unige.ch/biblio/files/cache/d7d5b0a60baf07a4ad8534ad20b9839c_f9197.jpg)

---

## Des colonnes

Pour les colonnes, il y a les classes \
[`bunige-columns`]{.bunige-code-inline} pour le contenant principal, et \
[`bunige-column`]{.bunige-code-inline} pour chaque colonne.

::: {.bunige-columns}

::: {.bunige-column}

![Logo Markdown](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg)

:::

::: {.bunige-columnf

![Logo Reveal.js](https://revealjs.com/images/logo/reveal-black-text.svg)

:::

:::

---

## Des colonnes, en mieux

- [`bunige-columns-center`]{.bunige-code-inline} pour centrer verticalement le
  contenu. 
- [`bunige-no-border`]{.bunige-code-inline} pour supprimer les bordures des
  images dans la colonne.

::: {.bunige-columns .bunige-columns-center}

::: {.bunige-column .bunige-no-border}

![Logo Markdown](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg)
:::

::: {.bunige-column .bunige-no-border}

![Pandoc](https://pandoc.org/pandoc-cartoon.svgz)

:::

::: {.bunige-column .bunige-no-border}

![Logo Reveal.js](https://revealjs.com/images/logo/reveal-black-text.svg)

:::

:::


# Partie 2

---

Un exemple de code :

```{.html .number-lines startFrom="70"}
<code class="bunige-code-inline">Texte préformaté.</code>
<figure>
	<img src="./img.jpeg" alt="alternate text">
	<figcaption>Figure caption.</figcaption>
</figure>
```

## Image de fond {background-image="https://www.unige.ch/biblio/files/cache/d7d5b0a60baf07a4ad8534ad20b9839c_f9197.jpg" data-background-opacity="0.5"}

Avec un degré de transparence de [`0.5`]{.bunige-code-inline}

---

## Citation

Selon Pochet, … [@pochetMarkdownVous2023].

Alors qu'Ovadia, … [@ovadiaMarkdownLibrariansAcademics2014].

---

::: {.r-fit-text .bunige-color}
Merci !
:::

---

## Références {#references}