the repository which powers this website
Diffstat (limited to 'filters/syntax-highlighting-shiki.sh')
| -rwxr-xr-x | filters/syntax-highlighting-shiki.sh | 32 |
1 files changed, 32 insertions, 0 deletions
diff --git a/filters/syntax-highlighting-shiki.sh b/filters/syntax-highlighting-shiki.sh new file mode 100755 index 00000000..2f2a281d --- /dev/null +++ b/filters/syntax-highlighting-shiki.sh @@ -0,0 +1,32 @@ +#!/bin/bash +BASENAME="$1" +EXTENSION="${BASENAME##*.}" + +[ "${BASENAME}" = "${EXTENSION}" ] && EXTENSION=txt +[ -z "${EXTENSION}" ] && EXTENSION=txt + +# map Makefile and Makefile.* to .mk +[ "${BASENAME%%.*}" = "Makefile" ] && EXTENSION=mk + +echo -n '<div id="code-block"><pre style="background-color: #1f2430; color: #cccac2"><code id="contents">' + +sed 's/&/\&/g; s/</\</g; s/>/\>/g; s/"/\"/g; s/'"'"'/\'/g' + +cat << EOF +</code></pre></div><script type="module"> +import { createHighlighter } from 'https://esm.sh/[email protected]'; +const t = Object.freeze((await fetch("/icons/theme.json")).json()); +const highlighter = await createHighlighter({ themes: [], langs: ["$EXTENSION"] }); +await highlighter.loadTheme(t); +const o = document.getElementById('code-block'); +const i = document.getElementById('contents'); +o.innerHTML = (await highlighter.codeToHtml(i.innerText, { + lang: "$EXTENSION", + theme: 'ayu-mirage' +})).replaceAll( + "font-style:italic", + "font-family:'Cascadia Code NF Italic', 'Cascadia Code', italic", +); +</script> + +EOF |