1---
2title: "Simple presentations with Markdown"
3url: presentations-with-markdown.html
4date: 2023-06-21T08:54:48+02:00
5type: note
6draft: false
7---
8
9A simple way to make presentations without using desktop apps or using online
10services is https://github.com/remarkjs/remark.
11
12First create `index.html` and be sure you make changes to `config` variable.
13
14```html
15<!DOCTYPE html>
16<html>
17
18<head>
19 <title></title>
20 <meta charset="utf-8">
21 <style>
22 body {
23 font-family: 'SF Pro Display';
24 }
25
26 .remark-code,
27 .remark-inline-code {
28 font-family: 'SF Mono';
29 font-size: medium;
30 background-color: gainsboro;
31 border-radius: 5px;
32 padding: 0 5px;
33 }
34 </style>
35</head>
36
37<body>
38 <textarea id="source"></textarea>
39 <script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>
40 <script>
41 const config = {
42 title: 'My presentation',
43 file: 'presentation.md',
44 };
45
46 document.title = config.title;
47 remark.create({ sourceUrl: config.file });
48 </script>
49</body>
50
51</html>
52```
53
54Now the markdown file `presentation.md` with presenetation. `---` is used to
55separate slides. Other stuff is just pure markdown.
56
57```md
58class: center, middle
59
60# Main title of the presentation
61
62---
63
64# Fist slide
65
66Eveniet mollitia nemo architecto rerum aut iure iste. Sit nihil nobis libero iusto fugit nam laudantium ut. Dignissimos corrupti laudantium nisi.
67
68- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
69- Integer aliquet mauris a felis fringilla, ut congue massa finibus.
70
71---
72
73# Slide two
74
75- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
76- Vestibulum eget leo ac dolor venenatis pulvinar.
77```