So I found out about 'Glorious Demo' today, and I'm testing out a demo of it. After getting Glorious Demo to work initially, I tried adding syntax highlighting via Prism. However, when I add the line const highlightedCode = Prism.highlight(code, Prism.languages.clike, 'clike'); my app breaks. What gives?
I am very much a beginner, so I apologize if I'm making some basic mistake and not realizing it.
<!-- A 'Glorious Demo' application for showcasing the example from 'Get Started with C Programming' -->
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/@glorious/demo/dist/gdemo.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-clike.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@glorious/demo/dist/gdemo.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism-tomorrow.css" rel="stylesheet" />
</head>
<body>
<div id="container"></div>
</body>
<script>
const gdemo = new GDemo('#container');
const code = '#include <stdio.h>\n#include <conio.h>\nvoid main()\n{\nprintf("Hello World!");\ngetch();\n}'
const highlightedCode = Prism.highlight(code, Prism.languages.clike, 'clike');
gdemo
.openApp('editor', {
minHeight: '400px',
windowTitle: 'hello_world.c'
})
.write(code, {
onCompleteDelay: 2000
})
.openApp('terminal', {
minHeight: '400px',
promptString: '$'
})
.command('gcc ./hello_world.c')
.respond('Hello World!')
.command('')
.end();
</script>
</html>