Merge pull request #12 from jorenbroekema/chore/highlight-theme

chore: inline hightlight.js css theme for deploy

.gitignore

@@ -2,4 +2,5 @@ node_modules
 .d.ts
 coverage
 demo/index.html
-**/custom-elements.json
+demo/highlight-hybrid.css
+**/custom-elements.json

demo/template.html

@@ -9,7 +9,7 @@
       content="A Web Component abstraction to declaratively render elements that depend on asynchronous processes"
     />
     <title>Suspense Element</title>
-    <link rel="stylesheet" href="../node_modules/highlight.js/styles/hybrid.css" />
+    <link rel="stylesheet" href="./highlight-hybrid.css" />
     <link rel="stylesheet" href="./style.css" />
     <script type="module" src="./index.js"></script>
   </head>

marked/buildHtmlFromMd.js

@@ -29,5 +29,12 @@ export const buildHtmlFromMd = async () => {
       path.resolve(rootFolder, `index.html`),
       template.replace('{{ content }}', htmlString),
     );
+
+    // Pick a highlight.js theme and put it in the rootfolder so this folder can
+    // be deployed and work anywhere (e.g. netlify, heroku, whatever).
+    await fs.copyFile(
+      path.resolve('node_modules', 'highlight.js', 'styles', 'hybrid.css'),
+      path.resolve(rootFolder, 'highlight-hybrid.css'),
+    );
   }
 };

marked/watch-marked.js

@@ -4,6 +4,8 @@ import { buildHtmlFromMd } from './buildHtmlFromMd.js';
 
 const watcher = chokidar.watch(path.resolve());
 
+buildHtmlFromMd();
+
 watcher.on('change', (filePath) => {
   if (filePath.endsWith('.md') || filePath.endsWith('template.html') || filePath.endsWith('.css')) {
     buildHtmlFromMd();