Theme Update 14-01-2023
published-date: 14 Jan 2023 22:44 +0700
categories: hugo-theme-update
tags: static-site-generator html
edit 2023-01-15 13:18:21
Nevermind, none of these are used. I decided to go back to server-side rendering with Go-Chroma builtin syntax highlighting https://gohugo.io/content-management/syntax-highlighting/
further read: https://gohugo.io/getting-started/configuration-markup/#highlight
I also add a copy to clipboard button.
JS added as follows:
1function remEl(parent, elClassName) {
2 const els = parent.getElementsByClassName(elClassName)
3 while (els.length > 0) {
4 els[0].parentNode.removeChild(els[0])
5 }
6}
7
8function copyCodeblockButton(targetNode) {
9 element = document.createElement('input')
10 element.type = 'button'
11 element.value = 'Copy'
12 element.classList = 'copy-button'
13 element.onclick = () => {
14 let elCopy = targetNode.cloneNode(true)
15 remEl(elCopy, 'ln');
16 navigator.clipboard.writeText(elCopy.innerText);
17 console.log("Copied to clipboard successfully!");
18 }
19 return element
20}
21
22document.addEventListener('DOMContentLoaded', (event) => {
23
24 document.querySelectorAll('pre code').forEach((el) => {
25 const child = document.createElement('span')
26 var copyCodeblockButtonEl = copyCodeblockButton(el)
27
28 child.style.setProperty('display', 'flex')
29 child.style.setProperty('color', 'var(--tx-c-primary-half)')
30 child.style.setProperty('margin-bottom', '.5em')
31 child.style.setProperty('align-items', 'center')
32 child.innerHTML = el.attributes.getNamedItem('data-lang').value
33 child.appendChild(copyCodeblockButtonEl)
34 el.parentNode.insertBefore(child, el.parentNode.firstChild)
35 });
36
37});
fancy!
Now to the old content:
Now supports codeblock highlighting with highlight.js
.
Code samples:
Get-ChildItem -Path "C:/target/path" -Depth 4 -Filter *.pdf | sort Descending > pdf_files.txt
also handles element overflow.
1Option Explicit
2
3Private Function getMonthByIndex$(n As Long)
4 ' returns month-name string from index n. Supports overflow wrap-around.
5 n = n Mod 12
6 getMonthByIndex = Array("JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER")(n)
7End Function
8
9Public Sub test()
10 Debug.Assert getMonthByIndex(69420) = "JANUARY" ' Fuck You, It's January!
11End Sub
I’ve added some js, thinking it would look better with the data-lang
visible in the element.
1document.addEventListener('DOMContentLoaded', (event) => {
2
3 document.querySelectorAll('pre code').forEach((el) => {
4
5 const child = document.createElement('span')
6 child.style.setProperty('display', 'flex')
7 child.style.setProperty('opacity', .5)
8 child.style.setProperty('margin-bottom', '.5em')
9 child.innerHTML = el.attributes.getNamedItem('data-lang').value
10 el.parentNode.insertBefore(child, el.parentNode.firstChild)
11
12 hljs.highlightElement(el);
13
14 el.parentElement.style.setProperty('background-color', el.style['background-color'])
15 el.parentElement.classList += 'hljs' // wtf
16
17 });
18
19});
This addition however still needs some fixing. Console logs shows some problem related to unescaped strings. The cause might be the unsafe settings I had to enable since this particular goldmark renderer somehow doesn’t properly render inline HTML from markdown :(.