Handleiding Ubuntu-thema

Maak lesdia's met Markdown en Marp

Voorbeelden en naslag voor theme/ubuntu.css

Begin met de basis

Plaats dit blok bovenaan een nieuw bestand in content/linux/:

---
marp: true
theme: ubuntu
paginate: true
size: 16:9
---

Het thema staat in ../../theme/ubuntu.css, gezien vanuit dit bestand.
De configuratie .marprc.yml registreert het thema voor de export.

Verdeel je inhoud in dia's

Gebruik --- op een eigen regel om een nieuwe dia te beginnen.

## Eerste dia

Een korte uitleg.

---

## Tweede dia

- Een eerste punt
- Een tweede punt

Kies een stijl per dia

Een lokale directive geldt alleen voor de huidige dia:

<!-- _class: demo -->
<!-- _paginate: false -->

## Zo werkt het
  • _class kiest een stijl uit het thema.
  • _paginate: false verbergt het dianummer op deze dia.
  • Zonder underscore blijft een directive gelden voor volgende dia's,
    totdat je deze opnieuw instelt.

Overzicht van de diastijlen

Klasse Gebruik Uiterlijk
title Openingsdia Donker-paars-oranje verloop
section Nieuw onderdeel Paarse achtergrond, verticaal gecentreerd
demo Stappenplan Oranje bovenrand
terminal Commando's Donkere achtergrond
work Opdracht Lichtgrijs, oranje linkerrand
recap Terugblik Lichtpaarse achtergrond

Zonder klasse krijg je een witte dia met paarse koppen.

Titel en tussendia

Deze dia gebruikt de klasse section.

Gebruik <!-- _class: title --> voor een openingsdia.
Gebruik <!-- _class: section --> voor een nieuw onderdeel.

Zet op deze stijlen een #-kop: daarvoor maakt het thema de tekst wit.

Tekst, nadruk en citaten

Gebruik ## voor een gewone diatitel, **tekst** voor nadruk
en backticks voor een commando zoals pwd.

Dit is een citaat of kernboodschap. Begin de regel met >.

De basisopmaak gebruikt 56 px voor h1, 38 px voor h2
en 29 px voor alinea's en lijstitems.

Het lettertype is Ubuntu, met Segoe UI en Arial als terugval.
Het thema laadt het Ubuntu-lettertype niet zelf.

Demo: een stappenplan

Deze dia gebruikt <!-- _class: demo -->.

  1. Open een nieuw Markdown-bestand.
  2. Voeg de Marp-instellingen toe.
  3. Kies een klasse voor de huidige dia.
  4. Voeg een korte uitleg of genummerde lijst toe.
  5. Bekijk de dia en controleer de beschikbare ruimte.

De oranje bovenrand komt uit het thema; extra HTML is niet nodig.

Terminal: codeblokken

Deze dia gebruikt <!-- _class: terminal -->.

# Toon de huidige map
pwd

# Toon bestanden en mappen
ls

Begin een codeblok met drie backticks en bijvoorbeeld bash.
Sluit het blok af met drie backticks op een eigen regel.

Tabellen met vaste kolombreedtes

Gebruik <!-- _class: table --> en een Markdown-tabel:

| Commando | Betekenis |
| --- | --- |
| pwd | Huidige map tonen |
| ls | Inhoud van de map tonen |
Commando Betekenis
pwd Huidige map tonen
ls Inhoud van de map tonen

De klasse voegt randen, een paarse koprij en afwisselende rijkleuren toe.

Vraag, controle en resultaat

Klasse Achtergrond Geschikt voor
question Licht warm Vraag of discussie
check Lichtgroen Begrip controleren
warning Lichtoranje Aandachtspunt
success Lichtgroen Geslaagd resultaat

Gebruik bijvoorbeeld <!-- _class: question -->.
Deze klassen veranderen alleen de achtergrond: voeg zelf de kop en inhoud toe.

Work: zelfstandig oefenen

Deze dia gebruikt <!-- _class: work -->.

Opdracht: maak drie dia's met title, demo en terminal.

Opleveren: een Markdown-bestand met een korte uitleg en een codeblok.

Tijd: 10 minuten.

De inhoud staat verticaal gecentreerd, met een oranje rand links.

Een afbeelding naast de tekst

![bg right:35% contain](../assets/ubuntu.webp)

right:35% reserveert rechts ruimte voor de afbeelding.
contain houdt de hele afbeelding zichtbaar.

Afbeeldingspaden zijn relatief aan het Markdown-bestand.
Vanuit content/linux/ verwijst ../assets/ naar content/assets/.

Een afbeelding over de hele dia

Voor een gewone afbeelding in de inhoud:

![Ubuntu h:240](../assets/ubuntu.webp)

Voor een dia met alleen een achtergrondafbeelding:

<!-- _paginate: false -->

![bg contain](../assets/waarom-linux.png)

Gebruik bij spaties in het pad punthaken: (<../assets/mijn foto.png>).

Zo maak je een galerij

<!-- _class: gallery -->

## Mijn afbeeldingen

![Eerste](a.png) ![Tweede](b.png) ![Derde](c.png)
  • Zet alle afbeeldingen in dezelfde alinea.
  • Afbeeldingen delen de breedte; hun hoogte is 460 px.
  • object-fit: contain bewaart de verhouding en toont het hele beeld.
  • Houd deze dia bij een kop en afbeeldingen: de stijl maakt iedere
    directe alinea tot een flexrij.

Twee kolommen met HTML

Linkerkolom: een korte uitleg.

Rechterkolom: een voorbeeld.

<div class="two">
  <div><p>Linkerkolom</p></div>
  <div><p>Rechterkolom</p></div>
</div>

.two maakt twee gelijke kolommen met 34 px tussenruimte.
Gebruik HTML-elementen binnen het blok; de export schakelt HTML in.

Labels en notities

Theorie10 minuten

Een notitie met een oranje rand links.
<span class="pill">Theorie</span>

<div class="note">Een korte toelichting.</div>

.pill maakt een omlijnd label. .note maakt een lichtgrijs vlak.
Beide gebruik je als HTML-klasse op een element.

Tekstgrootte aanpassen

<!-- _class: small --> maakt alinea's en lijstitems 24 px.
De koppen, tabellen en codeblokken behouden hun eigen grootte.

Combineer klassen met een spatie: <!-- _class: demo small -->.

Een grote kernzin

Een kleiner onderschrift

<p class="big">Een grote kernzin</p>
<p class="caption">Een kleiner onderschrift</p>

.big gebruikt 42 px; .caption gebruikt 21 px en een grijze tekstkleur.
Gebruik deze apart van small, dat alinea's specifieker selecteert.

Thema aanpassen en exporteren

Pas gedeelde opmaak aan in theme/ubuntu.css.
De variabelen bovenaan bevatten onder andere oranje #e95420,
aubergine #77216f en donkerpaars #2c001e.

Voer vanuit de projectmap uit:

npm run export

De export maakt HTML, PDF en PPTX in public/, met dezelfde submappen
als in content/. Open public/index.html voor de viewer en downloads.

Met npm run index werk je alleen de overzichten bij, niet de dia's.

Controleer je nieuwe presentatie

  • Staat theme: ubuntu in de instellingen bovenaan?
  • Heeft iedere dia één duidelijke boodschap?
  • Gebruik je _class voor een stijl op één dia?
  • Bestaan de afbeeldingen op de opgegeven relatieve paden?
  • Passen tekst, tabellen en code binnen de dia?
  • Heb je na wijzigingen opnieuw geëxporteerd?

Kopieer de voorbeelden uit deze handleiding naar je eigen lesbestand.

Mijn naam is Piper Parrot, en ik ben je stem Welkom bij de handleiding voor het Ubuntu-thema. In deze sessie leg ik uit hoe je met Markdown en Marp slides kunt maken en het Ubuntu-thema kunt gebruiken. We beginnen met het basisblok dat je bovenaan elk nieuw bestand moet plaatsen en ik laat zien waar het thema zich bevindt en hoe je paginering en formaat instelt. Vervolgens demonstreer ik hoe je dia's scheidt met three dashes (`---`) en geef ik voorbeelden van veelgebruikte elementen zoals koppen, codeblokken en afbeeldingen. Aan het einde laat ik zien waar je extra themabestanden kunt vinden en hoe je de .marprc.yml gebruikt om het thema te registreren voor export. Tip: schrijf korte, duidelijke zinnen op je dia's en gebruik deze gesproken tekst om extra uitleg en voorbeelden te geven.

Dit basisblok moet je altijd gebruiken. Het vertelt Marp om Markdown naar slides om te zetten, welk thema je wilt gebruiken, en of je paginanummers wilt zien. De grootte 16:9 is standaard voor moderne beamers en schermen.

Met drie streepjes op een eigen regel begin je een nieuwe dia. Houd boven en onder deze scheiding een lege regel vrij. In het codevoorbeeld zie je de broncode van twee dia's; binnen een codeblok worden de streepjes als tekst getoond en beginnen ze geen nieuwe dia. Verdeel lange uitleg over meerdere dia's zodat de tekst leesbaar blijft.

Een directive is een instructie voor Marp. De underscore maakt de instructie lokaal: de gekozen klasse en paginering gelden dan alleen voor deze dia. Zonder underscore blijft de instelling van toepassing op volgende dia's totdat je haar verandert. Laat zien hoe dezelfde inhoud eruitziet met en zonder de klasse demo.

Dit overzicht helpt je een stijl te kiezen op basis van het doel van je dia. Gebruik title voor de opening, section voor een overgang en demo voor een stappenplan. Terminal past bij commando's, work bij een opdracht en recap bij een terugblik. De tabelopmaak van deze dia komt van de klasse table.

Een tussendia markeert een nieuw onderdeel van de les. De klasse section centreert de inhoud verticaal op een paarse achtergrond. Title gebruikt een kleurverloop. Gebruik bij beide stijlen een kop met één hekje, omdat het thema die kop wit maakt. Houd de tekst kort zodat de overgang duidelijk zichtbaar is.

Gebruik koppen om structuur aan te brengen en vetgedrukte woorden om de kern te benadrukken. Backticks maken korte commando's herkenbaar; een groter-dan-teken begint een citaat. De lettergroottes en kleuren komen uit het thema. Als Ubuntu niet is geïnstalleerd, kiest de browser een van de opgegeven vervangende lettertypen.

De klasse demo voegt een oranje bovenrand toe. Een genummerde lijst maakt zichtbaar in welke volgorde de handelingen plaatsvinden. Doorloop de stappen tijdens het voordoen en geef per stap een korte toelichting. Wordt de lijst te lang, verdeel de demonstratie dan over meerdere dia's.

Gebruik een codeblok om commando's en eventuele toelichting bij elkaar te houden. Het woord bash na de openingsbackticks geeft de taal aan voor syntaxiskleuring. De klasse terminal maakt de dia donker. In dit voorbeeld toont pwd de huidige map en geeft ls de inhoud daarvan weer. Laat bij een demonstratie ook de uitvoer zien.

De klasse table geeft de tabel de volle beschikbare breedte en een vaste kolomindeling. De koprij wordt paars en de rijen krijgen afwisselende achtergrondkleuren. De verticale strepen scheiden de cellen in Markdown. Houd celinhoud beknopt: lange teksten maken rijen hoger en kunnen buiten de dia vallen.

Deze vier klassen geven de dia een achtergrondkleur die bij het doel past. Ze voegen zelf geen vraag, icoon of waarschuwing toe. Schrijf dus een duidelijke kop en formuleer de inhoud expliciet. Gebruik bijvoorbeeld question om een gesprek te starten en check om te laten controleren of een opdracht is gelukt.

Een opdrachtdia moet duidelijk maken wat de deelnemer doet, wat er wordt ingeleverd en hoeveel tijd beschikbaar is. De klasse work centreert de inhoud verticaal en voegt links een oranje rand toe. Laat deelnemers hier drie verschillende stijlen toepassen en daarna controleren of hun Markdown goed wordt weergegeven.

Met bg wordt de afbeelding onderdeel van de achtergrondindeling. Right met 35 procent reserveert het rechterdeel voor het beeld; contain voorkomt dat delen worden afgesneden. Het pad wordt gelezen vanaf de map van het Markdown-bestand. Controleer bij een ontbrekende afbeelding dus eerst de bestandsnaam en de relatieve mapverwijzing.

Maak onderscheid tussen een afbeelding in de gewone inhoud en een achtergrondafbeelding. Bij de eerste kun je bijvoorbeeld de hoogte instellen op 240 pixels. Met bg contain past de hele afbeelding binnen de achtergrondruimte; er kan daardoor lege ruimte overblijven. Punthaken rond een pad helpen bij bestandsnamen met spaties.

Gebruik _class: gallery. Plaats de afbeeldingen op één regel in dezelfde alinea, zonder lege regels ertussen. De uitleg staat op de volgende dia.

Voor de galerij moeten de afbeeldingen in dezelfde Markdown-alinea staan. Een lege regel maakt een nieuwe alinea en verbreekt de bedoelde groepering. De CSS verdeelt de breedte en gebruikt een vaste hoogte van 460 pixels. Omdat alle directe alinea's op een galerijdia flexrijen worden, kun je uitgebreidere uitleg beter op een aparte dia zetten.

De klasse two gebruikt CSS Grid voor twee even brede kolommen. Iedere directe div vormt hier één kolom. Schrijf binnen deze HTML-blokken ook de alinea's met HTML-tags, zodat de verwerking voorspelbaar blijft. Het exportscript staat HTML toe. Gebruik de kolommen bijvoorbeeld om een uitleg naast een voorbeeld te plaatsen.

Een pill is een compact label, bijvoorbeeld voor een onderwerp of tijdsduur. Een note is een zichtbaar tekstvlak met een oranje rand. Deze note-klasse is iets anders dan een Markdown-commentaarblok met presentatornotities: de inhoud van het note-vlak verschijnt op de dia. Gebruik labels en notitievlakken spaarzaam om de aandacht gericht te houden.

De klasse small verkleint alinea's en lijstitems, maar niet alle elementen op de dia. Big en caption zijn bedoeld voor afzonderlijke HTML-elementen. Op deze dia kan small de grootte van die alinea's overschrijven doordat de CSS-selector specifieker is. Gebruik big en caption op een dia zonder small om hun eigen groottes te zien. Splits overvolle inhoud liever op dan steeds kleinere letters te kiezen.

Wijzigingen in ubuntu.css werken door in alle presentaties die dit thema gebruiken wanneer je ze opnieuw rendert of exporteert. Start npm run export vanuit de projectmap om de uitvoerbestanden en indexen bij te werken. Npm run index vernieuwt alleen de navigatiepagina's. Controleer na een themawijziging zowel de HTML-weergave als de bestanden die je wilt delen.

Loop deze checklist door voordat je de presentatie deelt. Controleer niet alleen de instellingen en bestandspaden, maar bekijk ook elke dia op leesbaarheid en overlopende inhoud. Exporteer opnieuw na de laatste wijziging. Gebruik de voorbeelden uit deze handleiding als startpunt en vervang de voorbeeldinhoud door je eigen lesmateriaal.