Add highlight.js syntax highlighting to source viewer

- Install highlight.js via npm with 8 language definitions
- SourceViewer hook applies syntax highlighting on mount/update
- Atom One Dark theme for dark mode, Atom One Light for light mode
- Add hooks directory, package.json, and package-lock.json
- Add demo document and screenshots
- Add rodney-docker.md documentation
- Ignore .rodney/ chrome data directory
This commit is contained in:
2026-05-14 13:17:10 +01:00
parent fa4825d76d
commit 54651d2349
12 changed files with 531 additions and 1 deletions
+38
View File
@@ -0,0 +1,38 @@
/**
* SourceViewer hook — scrolls to and highlights the selected line.
*
* Attached to the `#source-viewer` div via `phx-hook="SourceViewer"`.
* Reads `data-highlighted-line` to find the target line element and
* scrolls it into view with a smooth animation.
* Also applies highlight.js syntax highlighting to code blocks.
*/
import hljs from "highlight.js/lib/core"
export const SourceViewer = {
mounted() {
this.applySyntaxHighlighting()
this.scrollToHighlighted()
},
updated() {
this.applySyntaxHighlighting()
this.scrollToHighlighted()
},
applySyntaxHighlighting() {
const codeEl = this.el.querySelector("code")
if (codeEl && !codeEl.querySelector(".hljs")) {
hljs.highlightElement(codeEl)
}
},
scrollToHighlighted() {
const lineNum = this.el.dataset.highlightedLine
if (lineNum !== undefined && lineNum !== "") {
const lineEl = document.getElementById(`line-${lineNum}`)
if (lineEl) {
lineEl.scrollIntoView({ behavior: "smooth", block: "center" })
}
}
}
}