Skip to content

Commit d66ba42

Browse files
nicholasdillenicholasdille
committed
Added support for mermaid
1 parent 29fa90b commit d66ba42

3 files changed

Lines changed: 132 additions & 2 deletions

File tree

‎2026-08-11_mermaid.html‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<?xml version="1.0" encoding="ISO-8859-1" ?>
2+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3+
<html xmlns="http://www.w3.org/1999/xhtml">
4+
<head>
5+
<meta charset="utf-8"/>
6+
7+
<title>How Much Shell Code is Too Much</title>
8+
9+
<!-- https://gauger.io/fonticon/ -->
10+
<link rel="icon" href="images/favicons/renovate.ico"/>
11+
12+
<link rel="stylesheet" href="node_modules/reveal.js/dist/reset.css" />
13+
<link rel="stylesheet" href="node_modules/reveal.js/dist/reveal.css" />
14+
<link rel="stylesheet" href="node_modules/reveal.js/dist/theme/black.css" id="theme" />
15+
<link rel="stylesheet" href="node_modules/highlight.js/styles/rainbow.css" />
16+
<link rel="stylesheet" href="themes/theme2022.css" id="theme" />
17+
<link rel="stylesheet" href="themes/common.css" />
18+
<link rel="stylesheet" href="themes/fontawesome.css" />
19+
<style>
20+
.reveal p code {
21+
background-color: #505050;
22+
padding-left: 0.1em;
23+
padding-right: 0.1em;
24+
border-radius: 0.2em;
25+
}
26+
27+
</style>
28+
</head>
29+
30+
<body>
31+
<div class="reveal">
32+
<div class="slides">
33+
34+
<section>
35+
<h2>Agenda</h2>
36+
37+
<pre class="mermaid">
38+
---
39+
config:
40+
class:
41+
hideEmptyMembersBox: true
42+
---
43+
classDiagram
44+
Observer --o Subject
45+
ConcreteObserver --|> Observer
46+
ConcreteSubject --|> Subject
47+
ConcreteObserver --> ConcreteSubject : observes
48+
49+
class Observer {
50+
&lt;&lt;interface&gt;&gt;
51+
+update()
52+
}
53+
54+
class Subject {
55+
&lt;&lt;interface&gt;&gt;
56+
+attach(o: Observer)
57+
+detach(o: Observer)
58+
+notify()
59+
}
60+
</pre>
61+
62+
</div>
63+
</div>
64+
65+
<script type="module">
66+
import mermaid from './node_modules/mermaid/dist/mermaid.esm.min.mjs';
67+
mermaid.initialize({
68+
startOnLoad: true,
69+
theme: 'dark'
70+
});
71+
</script>
72+
73+
<script src="node_modules/reveal.js/dist/reveal.js"></script>
74+
<script src="node_modules/reveal.js/dist/plugin/markdown.js"></script>
75+
<script src="node_modules/reveal.js/dist/plugin/highlight.js"></script>
76+
<script src="node_modules/reveal.js/dist/plugin/notes.js"></script>
77+
<script>
78+
Reveal.initialize({
79+
width: 1920,
80+
height: 1080,
81+
minScale: 0.5,
82+
maxScale: 2.0,
83+
margin: 0.05,
84+
85+
controls: false,
86+
controlsTutorial: false,
87+
progress: true,
88+
slideNumber: false,
89+
keyboard: true,
90+
touch: true,
91+
mouseWheel: false,
92+
93+
hash: true,
94+
history: false,
95+
overview: true,
96+
fragments: true,
97+
fragmentInURL: true,
98+
transition: 'convex',
99+
transitionSpeed: 'default',
100+
backgroundTransition: 'fade',
101+
hideInactiveCursor: true,
102+
103+
autoPlayMedia: null,
104+
previewLinks: false,
105+
106+
center: true,
107+
help: true,
108+
109+
markdown: {
110+
smartypants: true
111+
},
112+
113+
plugins: [
114+
RevealMarkdown,
115+
RevealHighlight,
116+
RevealNotes
117+
]
118+
});
119+
</script>
120+
121+
</body>
122+
</html>

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@
99
"@awesome.me/webawesome": "^3.6.0",
1010
"@fortawesome/fontawesome-pro": "7.2.0",
1111
"highlight.js": "11.11.1",
12+
"mermaid": "11.16.1",
1213
"reveal.js": "6.0.0"
1314
},
1415
"devDependencies": {
1516
"browser-sync": "3.0.4",
16-
"gulp": "5.0.1",
17-
"markdown-link-check": "3.14.2"
17+
"gulp": "5.0.1"
1818
}
1919
}

‎template.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,14 @@ <h3 id="events">Upcoming events</h3>
102102
</div>
103103
</div>
104104

105+
<script type="module">
106+
import mermaid from './node_modules/mermaid/dist/mermaid.esm.min.mjs';
107+
mermaid.initialize({
108+
startOnLoad: true,
109+
theme: 'dark'
110+
});
111+
</script>
112+
105113
<script src="node_modules/reveal.js/dist/reveal.js"></script>
106114
<script src="node_modules/reveal.js/dist/plugin/markdown.js"></script>
107115
<script src="node_modules/reveal.js/dist/plugin/highlight.js"></script>

0 commit comments

Comments
 (0)