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:
@@ -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" })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user