Highlight dots homepage on the fly if you open it in browser

site/assets/css/code.css

@@ -0,0 +1,6 @@
+code {
+	tab-size: 2;
+}
+a {
+	font-size: 1.3em;
+}

site/assets/css/monokai.min.css

@@ -0,0 +1 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#272822;color:#ddd}.hljs-keyword,.hljs-literal,.hljs-name,.hljs-selector-tag,.hljs-strong,.hljs-tag{color:#f92672}.hljs-code{color:#66d9ef}.hljs-attribute,.hljs-link,.hljs-regexp,.hljs-symbol{color:#bf79db}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-emphasis,.hljs-section,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-string,.hljs-subst,.hljs-template-tag,.hljs-template-variable,.hljs-title,.hljs-type,.hljs-variable{color:#a6e22e}.hljs-class .hljs-title,.hljs-title.class_{color:#fff}.hljs-comment,.hljs-deletion,.hljs-meta,.hljs-quote{color:#75715e}.hljs-doctag,.hljs-keyword,.hljs-literal,.hljs-section,.hljs-selector-id,.hljs-selector-tag,.hljs-title,.hljs-type{font-weight:700}

site/assets/js/highlight.ts

@@ -0,0 +1,45 @@
+import hljs from 'highlight.js/lib/core';
+import bash from 'highlight.js/lib/languages/bash';
+
+hljs.registerLanguage('bash', bash);
+
+const addStylesheet = function(url: string): void {
+	const link = document.createElement('link');
+	link.rel = 'stylesheet';
+	link.href = url;
+	document.head.appendChild(link);
+};
+
+const wrapAsCode = function(container: HTMLElement, language: string): HTMLElement {
+	const code = container.innerHTML.split('\n');
+	code.pop(); // Drop the line that actually runs this script, we don't need it now.
+
+	const codeElement = document.createElement('code');
+	codeElement.className = `language-${language}`;
+	codeElement.innerHTML = code.join('\n');
+
+	const pre = document.createElement('pre');
+	pre.appendChild(codeElement);
+
+	container.replaceChildren(pre);
+	return codeElement;
+};
+
+const addReadmeLink = function(codeblock: HTMLElement): void {
+	const span = document.createElement('span');
+	span.className = 'hljs-comment';
+	const readme = document.createElement('a');
+	readme.innerText = 'WHAT IS THIS';
+	readme.href = 'https://dots.00dani.me/README';
+	span.append('# ', readme);
+
+	codeblock.querySelector('span.hljs-meta + span.hljs-comment')?.replaceWith(span);
+};
+
+addStylesheet('/assets/css/style.css');
+addStylesheet('/assets/css/code.css');
+addStylesheet('/assets/css/monokai.min.css');
+
+const codeblock = wrapAsCode(document.body, 'bash');
+hljs.highlightElement(codeblock);
+addReadmeLink(codeblock);

site/index.html

@@ -1,4 +1,4 @@
 ---
 ---
 {% include_relative local/bin/dots %}
-# <link rel="stylesheet" href="/assets/css/style.css"><style>body { display: block; white-space: pre-wrap; font-family: "Menlo", "Inconsolata", "Consolas", "Roboto Mono", "Ubuntu Mono", "Liberation Mono", "Courier New", monospace; margin: 5px; tab-size: 2; } a { font-size: 1.3em; }</style>
+# <script type="text/javascript" src="{{ '/assets/js/highlight.js' | relativepath }}"></script>