DCodeViewer

A VGUI component for Garry's Mod that renders syntax-highlighted, line-numbered source code inside a DHTML panel. Built on highlight.js v9.18.1 and a modified version of highlightjs-line-numbers.js.

Compatible with every GMod branch.

^{As seen in gPeek | Derma-Github-Theme}

Note

Artificial intelligence (AI), specifically Claude, was used to translate the “properties” file into 31 other languages supported by GMod.

✨ Features

• Syntax highlighting via highlight.js with support for custom languages
• Line numbers with non-selectable gutter
• Themed via swappable hljs CSS themes
• Configurable font family and font size
• Right-click to copy selected text to clipboard
• Cookie-based persistence for user preferences
• Scroll-to-line support
• In-game user preferences under Utilities > User > Code Viewer Settings
• Multi-instance supported

Supported Languages

apache, bash, coffeescript, cpp, cs, css, csv, diff, glua, go, http, ini, java, javascript, json, kotlin, less, lua, makefile, markdown, nginx, objective, perl, php, plaintext, properties, python, ruby, rust, scss, shell, sql, swift, typescript, xml, yaml

📝 Usage

local viewer = vgui.Create("DCodeViewer")
viewer:SetContent(fileContents, "glua")

🧩 API

PANEL:SetContent(text, lang, line)

Sets the content to display in the viewer.

Parameter	Type	Description
text	string	The source code or text to display.
lang	string	The highlight.js language identifier (e.g. "lua", "glua", "json"). Defaults to "glua".
line	int	(Optional) Line number to scroll to on load. Defaults to 1.

viewer:SetContent(fileContents, "lua", 42)

---

PANEL:SetTheme(theme)

Applies an hljs CSS theme by name. The theme name must match a file in vgui/dcodeviewer/themes/. The selection is persisted via cookie.

viewer:SetTheme("github-dark")

---

PANEL:SetFont(font)

Sets the font family used for code rendering. Accepts any font name available to the browser context. The selection is persisted via cookie.

viewer:SetFont("JetBrains Mono")

---

PANEL:SetFontSize(size)

Sets the font size in pixels. Must be a number. The selection is persisted via cookie.

viewer:SetFontSize(14)

---

PANEL:GoToLine(line)

Scrolls the viewport to the given line number.

viewer:GoToLine(100)

🔤 Adding Languages

Languages are plain Lua files in vgui/dcodeviewer/languages/ that return a highlight.js language registration string. The file is included and its return value is injected into the HTML document head as a <script> block.

-- vgui/dcodeviewer/languages/glua.lua
return [[hljs.registerLanguage("glua", function(e) {
    -- language definition
});]]

The filename has no bearing on the language identifier — that is determined by the string passed to hljs.registerLanguage.

🎨 Adding Themes

Themes are plain Lua files in vgui/dcodeviewer/themes/ that return a raw hljs CSS string. The filename (without extension) becomes the theme name used with SetTheme.

-- vgui/dcodeviewer/themes/github-dark.lua
return [[
.hljs { background: #0d1117; color: #c9d1d9; }
-- ...
]]

🍪 User Preferences

All user preferences are stored as cookies under the DCodeViewer namespace and applied automatically when a new instance is created via LoadCookies.

Cookie	Default	Description
DCodeViewer.Theme	github-dark	The active hljs theme name.
DCodeViewer.Font	Consolas	The font family used for code. Uses system fonts, not in-game fonts.
DCodeViewer.FontSize	12	The font size in pixels.

Preferences can be changed in-game via the spawnmenu under Utilities > User > DCodeViewer, or programmatically via the API. Changes apply to all active instances immediately.

📋 Clipboard

Text selected inside the viewer can be copied to the system clipboard by right-clicking after making a selection. This is handled via a JavaScript mouseup listener that calls back into GLua using dcodeviewer.SetClipboardText.

📦 Dependencies

• highlight.js v9.18.1 - bundled, license in data_static
• highlightjs-line-numbers.js - bundled (modified), license in data_static