Presentation som kod
(Bild genererad av DALL-E som med lite fantasi föreställer en tomte som skriver en presentation med kod.)
Traditionella presentationsprogram
Ni har säkert använt Microsoft PowerPoint, Apple Keynote eller Google Slides någon gång. I dessa traditionella presentationsprogram används muspekaren i ett grafiskt gränssnitt för att skapa presentationer genom att dra och släppa olika textobjekt och grafik på en rad av bildrutor. På detta sätt skapas bildspel som man kan använda som hjälpmedel för att presentera något för sin publik på ett ganska enkelt sätt.
Men ett problem med detta traditionella arbetssätt är att det går ganska fort att skapa själva innehållet i presentationen, men det tar mycket längre tid att få den att se ut som man vill. Saker flyttas runt, typsnitt ändras och bilder byts ut flera gånger tills man till slut känner sig nöjd.
Ett annat problem kan vara med vilket filformat som presentationen sparas i programmet. Om det är ett patentskyddat eller låst format kan det vara svårt att öppna filerna om ursprungsprogrammet av någon anledning skulle försvinna från marknaden. Är formatet binärt kan det vara svårt att versionshantera och spåra ändringar i filerna på ett bra sätt. Iallafall jämfört med hur lätt det är med kod och Git.
Ingen av dessa problem är antagligen stora nog för att sluta använda ett presentationsprogram som man har vant sig vid och lärt sig att arbeta effektivt med. Men om musarmen börjat ömma eller om man bara tycker det är kul att testa något annorlunda, kanske det är dags att skapa en presentation med kod.
Mängder med alternativ
Det finns många sätt att skapa presentationer med kod. Vilket källformat man vill skriva koden i och vilka slutformat presentationen ska visas i är så klart viktigt. Som källformat kan man använda vanliga format som Markdown eller HTML, men också lite ovanligare alternativ som vi kommer till strax. För att presentera är faktiskt HTML också ett alternativ, även om det kanske inte är lika vanligt som PowerPoint eller PDF. Och även om man vill skriva sin presentation i kod, men sedan vill (eller måste) presentera en PowerPoint går det också att konvertera presentationer i kod till nästan vilket format som helst.
En del har kanske använt typsättningssystemet LaTeX för att skriva någon artikel eller uppsats i skolan, men det går även bra att använda som källformat för att skapa presentationer i samma språk med dokumentklassen Beamer. Det här alternativet är kanske lite ovanligare och för en del lite krångligare, speciellt om man inte arbetat med det tidigare. Man behöver en TeX-distribution för att bygga presentationer, det är lite högre tröskel för att lära sig språket och det är nog också lite krångligare att anpassa stilmässigt än dom andra alternativen.
Ett mer lättillgängligt alternativ är presentationssystemet Marp. Här är källformatet Markdown och det går att anpassa stilmallen med vanlig CSS. Det finns ett tillägg till Visual Studio Code som underlättar författandet och ett kommandoradsverktyg som man kan använda för att konvertera sina presentationer till olika slutformat, inklusive PowerPoint. Det var faktiskt det här alternativet jag först tänkte välja för att skapa ett exempel här, men av oklara anledningar så valde jag nästa alternativ istället. 🤷
Ett uppenbart exempel
Reveal.js är ett presentationsramverk skrivet i JavaScript. Källformat är som standard HTML, men det finns stöd för att bädda in Markdown om man vill. Färg och form anpassas som vanligt med CSS. Eftersom presentationen sker i webbläsaren går det till och med att pimpa presentationen med egna skript om man vill. Presentatören kan enkelt öppna ett eget fönster för att se sina anteckningar, presentationstid och vilken nästa bild är.
För att skapa en presentation med Reveal.js kan man ladda ner ett paket från hemsidan och skapa ett vanligt HTML-dokument där man länkar in de CSS- och JavaScript-filer som behövs. För att visa presentationen öppnar man bara dokumentet i webbläsaren och presenterar det fönstret för publiken. Så här kan koden se ut:
<!doctype html> <html lang="sv-SE"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>reveal.js exempel</title> <link rel="stylesheet" href="dist/reset.css"> <link rel="stylesheet" href="dist/reveal.css"> <link rel="stylesheet" href="dist/theme/black.css"> <link rel="stylesheet" href="plugin/highlight/monokai.css"> </head> <body> <!-- Presentationsinnehåll börjar --> <div class="reveal"> <div class="slides"> <section>Presentation som kod</section> <section>Traditionella presentationsprogram</section> <section>Mängder med alternativ</section> <section>Ett uppenbart exempel</section> </div> </div> <!-- Presentationsinnehåll slutar --> <script src="dist/reveal.js"></script> <script src="plugin/notes/notes.js"></script> <script src="plugin/markdown/markdown.js"></script> <script src="plugin/highlight/highlight.js"></script> <script> Reveal.initialize({ hash: true, plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ] }); </script> </body> </html>
Om man bara tittar på presentationsinnehållet så är det ganska enkelt - fyra bildrutor med en rubrik i varje. Men det blir ganska mycket ceremoni runt omkring för att få presentationen att fungera. Det hade varit skönt att slippa detta och bara fokusera på innehållet istället. Och det kan man!
Man kan skriva innehåll i Markdown som källformat och sedan konvertera till olika format med andra verktyg, ett tillvägagångssätt som nämndes tidigare. Det finns ett program som heter Pandoc som är skapat för att just konvertera dokument mellan olika format. Det går alltså att skriva presentationen i Markdown och sedan konvertera den till vilket format man vill som Pandoc har stöd för, inklusive Reveal.js, LaTeX Beamer och PowerPoint!
Förutsatt att Pandoc är installerat och en fil slides.md med det här innehållet finns i arbetskatalogen på datorn:
% Presentationer som kod % Andreas Jonsson % 16 december 2023 ## Traditionella presentationsprogram - Microsoft PowerPoint - Apple Keynote - Google Slides ## Mängder av alternativ - LaTeX Beamer - Marp - Reveal.js ## Ett uppenbart exempel
Då kan vi konvertera den till en HTML-presentation i Reveal.js med Pandoc så här:
pandoc -t revealjs -s slides.md -o slides.html
- -t anger vilket slutformat att konvertera till.
- -s anger källfilen att konvertera ifrån.
- -o anger vilken fil presentationen skrivas till.
Det går så klart också att anpassa hur presentationen ser ut genom att välja något av medföljande teman, eller skapa ett eget, och lägga till ytterligare en parameter -V theme=[tema]. Eller om man bara vill göra mindre anpassningar kan man bara skjuta in lite extra CSS med parametern --include-in-header=mina-anpassningar.css.
Slutsats
Det finns mängder med alternativ till hur presentationer kan skrivas med kod och här har vi bara gått igenom några stycken. Om det låter intressant rekommenderar jag att ni besöker Reveal.js hemsida där det finns många fina exempel på hur färdiga presentationer kan se ut. Man kommer långt med Markdown och det är ganska lätt att använda som källformat och konvertera till andra slutformat med Pandoc. Den här texten skrev jag faktiskt först i Markdown och konverterade den sedan till HTML med Pandoc, för att kunna publicera den här. Om du har läst så här långt har den här luckan i julkalendern förhoppningsvis varit lite inspirerande och jag önskar er en God Jul! 🎅