Willem van den Ende
54651d2349
- 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
39 lines
1.0 KiB
JavaScript
39 lines
1.0 KiB
JavaScript
/**
|
|
* 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" })
|
|
}
|
|
}
|
|
}
|
|
}
|