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

app/assets/js/app.js

@@ -23,13 +23,34 @@ import "phoenix_html"
 import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 import {hooks as colocatedHooks} from "phoenix-colocated/firehose"
+import {SourceViewer} from "./hooks/source_viewer"
 import topbar from "../vendor/topbar"
 
+// Syntax highlighting via highlight.js
+import hljs from "highlight.js/lib/core"
+import elixir from "highlight.js/lib/languages/elixir"
+import javascript from "highlight.js/lib/languages/javascript"
+import typescript from "highlight.js/lib/languages/typescript"
+import markdown from "highlight.js/lib/languages/markdown"
+import python from "highlight.js/lib/languages/python"
+import ruby from "highlight.js/lib/languages/ruby"
+import bash from "highlight.js/lib/languages/bash"
+import sql from "highlight.js/lib/languages/sql"
+
+hljs.registerLanguage("elixir", elixir)
+hljs.registerLanguage("javascript", javascript)
+hljs.registerLanguage("typescript", typescript)
+hljs.registerLanguage("markdown", markdown)
+hljs.registerLanguage("python", python)
+hljs.registerLanguage("ruby", ruby)
+hljs.registerLanguage("bash", bash)
+hljs.registerLanguage("sql", sql)
+
 const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 const liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
   params: {_csrf_token: csrfToken},
-  hooks: {...colocatedHooks},
+  hooks: {...colocatedHooks, SourceViewer},
 })
 
 // Show progress bar on live navigation and form submits

app/assets/js/hooks/source_viewer.js

@@ -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" })
+      }
+    }
+  }
+}