Scheme-aware highlighting everywhere code renders !59

merged merged by cmc on 2026-08-25 20:34 UTC · krz/gitbay:unpin-code into main

5 files changed, +66 −13

Layout: unified · split

e2e/design_test.go +4 −2

 		"# site\n\n[guide](docs/guide.md) and [export](docs/paper.html) and "+
 			"[abs](https://example.org/x) here\n\n![logo](img/logo.png)\n"+
 			"![ext](https://example.org/pic.png)\n\n"+
-			"| flag | effect |\n|------|--------|\n| `-v` | verbose |\n"), 0o644)
+			"| flag | effect |\n|------|--------|\n| `-v` | verbose |\n\n"+
+			"```go\nfunc main() {}\n```\n"), 0o644)
 	os.WriteFile(filepath.Join(dir, "docs", "guide.md"), []byte("# guide\n"), 0o644)
 	os.WriteFile(filepath.Join(dir, "docs", "paper.org"), []byte("* paper\n"), 0o644)
 	os.WriteFile(filepath.Join(dir, "img", "logo.png"), []byte{0x89, 0x50}, 0o644)
 		`src="https://example.org/pic.png"`,            // remote image untouched
 		`href="https://example.org/x"`,                 // absolute untouched
 		"<table>", "<td>verbose</td>",                  // GFM table renders
+		`<span class="kd">func</span>`, // fenced code highlighted via classes
 		`href="/alice/site/blob/main/README.md">README.md</a>`, // clickable card header
 		`<th>name</th>`, // file table column headers
 	} {
 		t.Errorf("highlighting not class-based:\n%.2000s", body)
 	}
 	if _, css := inst.get(t, "/static/style.css"); strings.Count(css, "/* Background */") < 2 ||
-		!strings.Contains(css, ".chroma, .bg { background: var(--code-bg)") {
+		!strings.Contains(css, ".chroma, .bg { background: transparent") {
 		t.Error("stylesheet missing dual syntax palettes")
 	}
 	// Explore rows carry topics, license, and updated date.

go.mod +2 −1

 	github.com/niklasfasching/go-org v1.9.1
 	github.com/spf13/cobra v1.10.2
 	github.com/yuin/goldmark v1.8.5
+	github.com/yuin/goldmark-highlighting/v2 v2.0.0-20230729083705-37449abec8cc
+	go.yaml.in/yaml/v3 v3.0.4
 	golang.org/x/crypto v0.55.0
 	golang.org/x/net v0.57.0
 	golang.org/x/term v0.45.0
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
 	github.com/russross/blackfriday/v2 v2.1.0 // indirect
 	github.com/spf13/pflag v1.0.9 // indirect
-	go.yaml.in/yaml/v3 v3.0.4 // indirect
 	golang.org/x/sys v0.47.0 // indirect
 	golang.org/x/text v0.41.0 // indirect
 	modernc.org/libc v1.74.4 // indirect

go.sum +12

 github.com/ProtonMail/go-crypto v1.4.1/go.mod h1:e1OaTyu5SYVrO9gKOEhTc+5UcXtTUa+P3uLudwcgPqo=
 github.com/alecthomas/assert/v2 v2.11.0 h1:2Q9r3ki8+JYXvGsDyBXwH3LcJ+WK5D0gc5E8vS6K3D0=
 github.com/alecthomas/assert/v2 v2.11.0/go.mod h1:Bze95FyfUr7x34QZrjL+XP+0qgp/zg8yS+TtBj1WA3k=
+github.com/alecthomas/chroma/v2 v2.2.0/go.mod h1:vf4zrexSH54oEjJ7EdB65tGNHmH3pGZmVkgTP5RHvAs=
 github.com/alecthomas/chroma/v2 v2.27.0 h1:FodwmyOBgJULFYmDqibcp9pvfDLWdtPRh9v/r5BXYZs=
 github.com/alecthomas/chroma/v2 v2.27.0/go.mod h1:NjJ3ciIgrqBNeIkWZ4e46nseoLDslxU1LmfCoL+wcY8=
+github.com/alecthomas/repr v0.0.0-20220113201626-b1b626ac65ae/go.mod h1:2kn6fqh/zIyPLmm3ugklbEi5hg5wS435eygvNfaDQL8=
 github.com/alecthomas/repr v0.5.2 h1:SU73FTI9D1P5UNtvseffFSGmdNci/O6RsqzeXJtP0Qs=
 github.com/alecthomas/repr v0.5.2/go.mod h1:Fr0507jx4eOXV7AlPV6AVZLYrLIuIeSOWtW57eE/O/4=
 github.com/aymerick/douceur v0.2.0 h1:Mv+mAeH1Q+n9Fr+oyamOlAkUNPWPlA8PPGR0QAaYuPk=
 github.com/cloudflare/circl v1.6.3/go.mod h1:2eXP6Qfat4O/Yhh8BznvKnJ+uzEoTQ6jVKJRn81BiS4=
 github.com/cpuguy83/go-md2man/v2 v2.0.6 h1:XJtiaUW6dEEqVuZiMTn1ldk455QWwEIsMIJlo5vtkx0=
 github.com/cpuguy83/go-md2man/v2 v2.0.6/go.mod h1:oOW0eioCTA6cOiMLiUPZOpcVxMig6NIQQ7OS05n1F4g=
+github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/dlclark/regexp2 v1.4.0/go.mod h1:2pZnwuY/m+8K6iRw6wQdMtk+rH5tNGR1i55kozfMjCc=
+github.com/dlclark/regexp2 v1.7.0/go.mod h1:DHkYz0B9wPfa6wondMfaivmHpzrQ3v9q8cnmRbL6yW8=
 github.com/dlclark/regexp2/v2 v2.2.1 h1:mf4KkFUj0gJuarK8P+LgiS+Lit7m9N1yAwEfPbee7R0=
 github.com/dlclark/regexp2/v2 v2.2.1/go.mod h1:avUrQvPaLz2DrFNHJF0taWAFFX2C1GMSSoeiqFjcBmU=
 github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
 github.com/spf13/cobra v1.10.2/go.mod h1:7C1pvHqHw5A4vrJfjNwvOdzYu0Gml16OCs2GRiTUUS4=
 github.com/spf13/pflag v1.0.9 h1:9exaQaMOCwffKiiiYk6/BndUBv+iRViNW+4lEMi0PvY=
 github.com/spf13/pflag v1.0.9/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
+github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
+github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+github.com/yuin/goldmark v1.4.15/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
 github.com/yuin/goldmark v1.8.5 h1:r6N5afV5qj/5S4UTch8agZHJ8UxNCMwX7WjkkJam2NA=
 github.com/yuin/goldmark v1.8.5/go.mod h1:ip/1k0VRfGynBgxOz0yCqHrbZXhcjxyuS66Brc7iBKg=
+github.com/yuin/goldmark-highlighting/v2 v2.0.0-20230729083705-37449abec8cc h1:+IAOyRda+RLrxa1WC7umKOZRsGq4QrFFMYApOeHzQwQ=
+github.com/yuin/goldmark-highlighting/v2 v2.0.0-20230729083705-37449abec8cc/go.mod h1:ovIvrum6DQJA4QsJSovrkC4saKHQVs7TvcaeO8AIl5I=
 go.yaml.in/yaml/v3 v3.0.4 h1:tfq32ie2Jv2UxXFdLJdh3jXuOzWiL1fo0bu/FbuKpbc=
 go.yaml.in/yaml/v3 v3.0.4/go.mod h1:DhzuOOF2ATzADvBadXxruRBLzYTpT36CKvDb3+aBEFg=
 golang.org/x/crypto v0.55.0 h1:+KWHjbgOaAQ66dh/YlkZKHlz9ZUlq61AFirAR9ntP8M=
 golang.org/x/tools v0.48.0/go.mod h1:08xX0orndb/F7jJxGDicx061tyd5pcMto75YMAXr6lk=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 modernc.org/cc/v4 v4.29.1 h1:MKgdCV3WykTSPqpVrnxdEDS0HEd2FHpKZDzxzU5LyeI=
 modernc.org/cc/v4 v4.29.1/go.mod h1:OnovgIhbbMXMu1aISnJ0wvVD1KnW+cAUJkIrAWh+kVI=
 modernc.org/ccgo/v4 v4.34.6 h1:sBgfIwyN0TQ9C5hwIeuqyeAKyMWnbvj2fvpF4L11uzU=

internal/httpd/web.go +45 −7

 	"github.com/microcosm-cc/bluemonday"
 	"github.com/niklasfasching/go-org/org"
 	"github.com/yuin/goldmark"
+	highlighting "github.com/yuin/goldmark-highlighting/v2"
 	"github.com/yuin/goldmark/extension"
 	"gitbay.org/gitbay/internal/autolink"
 	chromaFormatter.WriteCSS(&buf, styles.Get("friendly"))
 	buf.WriteString("\n@media (prefers-color-scheme: dark) {\n")
 	chromaFormatter.WriteCSS(&buf, styles.Get("github-dark"))
-	buf.WriteString("}\n.chroma, .bg { background: var(--code-bg) !important; }\n")
+	buf.WriteString("}\n.chroma, .bg { background: transparent !important; }\n")
 	return buf.Bytes()
 }()
 }
 // markdown is the shared renderer: GFM (tables, strikethrough, autolinks,
-// task lists) on top of CommonMark. Raw HTML is still dropped.
+// task lists) on top of CommonMark, with class-based fence highlighting
-var markdown = goldmark.New(goldmark.WithExtensions(extension.GFM))
+// (the palette lives in the stylesheet, per scheme). Raw HTML is still
+// dropped.
+var markdown = goldmark.New(goldmark.WithExtensions(extension.GFM,
+	highlighting.NewHighlighting(highlighting.WithFormatOptions(html.WithClasses(true)))))
+// fenceHighlight renders one code block with chroma classes, for org and
+// anything else outside goldmark. Unknown languages fall back to plain.
+func fenceHighlight(source, lang string) string {
+	lexer := lexers.Get(lang)
+	if lexer == nil {
+		lexer = lexers.Fallback
+	}
+	iterator, err := lexer.Tokenise(nil, source)
+	if err != nil {
+		return "<pre>" + template.HTMLEscapeString(source) + "</pre>"
+	}
+	var buf bytes.Buffer
+	f := html.New(html.WithClasses(true))
+	if err := f.Format(&buf, styles.Get("friendly"), iterator); err != nil {
+		return "<pre>" + template.HTMLEscapeString(source) + "</pre>"
+	}
+	return buf.String()
+}
 // mdHTML renders user-authored markdown (issue and MR bodies, comments).
 // goldmark's default renderer drops raw HTML, so this is safe as-is.
 // ugcPolicy sanitizes rendered repo content before it enters the forge's
 // origin: markdown is already safe (goldmark drops raw HTML), but org-mode
-// output and repo-authored HTML are not.
+// output and repo-authored HTML are not. Chroma's highlighting classes
-var ugcPolicy = bluemonday.UGCPolicy()
+// must survive; the pattern admits only short token codes, not the site's
+// own class names.
+var ugcPolicy = func() *bluemonday.Policy {
+	p := bluemonday.UGCPolicy()
+	p.AllowAttrs("class").
+		Matching(regexp.MustCompile(`^(chroma|[a-z0-9]{1,3})( (chroma|[a-z0-9]{1,3}))*$`)).
+		OnElements("span", "pre", "code", "div")
+	return p
+}()
 // renderReadme renders a README by extension: markdown, org-mode, and
 // (sanitized) HTML richly; everything else as escaped plaintext.
 		return template.HTML(buf.String())
 	case ".org":
 		doc := org.New().Parse(bytes.NewReader(raw), name)
-		html, err := doc.Write(org.NewHTMLWriter())
+		writer := org.NewHTMLWriter()
+		writer.HighlightCodeBlock = func(source, lang string, inline bool, params map[string]string) string {
+			if inline {
+				return "<code>" + template.HTMLEscapeString(source) + "</code>"
+			}
+			return fenceHighlight(source, lang)
+		}
+		out, err := doc.Write(writer)
 		if err != nil {
 			return plain()
 		}
-		return template.HTML(ugcPolicy.Sanitize(html))
+		return template.HTML(ugcPolicy.Sanitize(out))
 	case ".html", ".htm":
 		return template.HTML(ugcPolicy.Sanitize(string(raw)))
 	default:

internal/web/static/style.css +3 −3

	@@ -457,9 +457,9 @@ button.linklike:hover { text-decoration: underline; filter: none; }
457	margin-top: var(--sp-4);	457	margin-top: var(--sp-4);
458	overflow-x: auto;	458	overflow-x: auto;
459	}	459	}
460	/* chroma emits inline styles for a light background; pin code blocks to	460	/* Highlighting is class-based with a palette per scheme, so code blocks
461	light colors in both schemes so unstyled tokens stay legible. */	461	follow the site's own colors. */
462	.code { background: #f8f8f8; color: #1a1a1a; padding: var(--sp-3) var(--sp-4); color-scheme: light; }	462	.code { background: var(--code-bg); color: var(--fg); padding: var(--sp-3) var(--sp-4); }
463	.code pre { margin: 0; background: transparent !important; }	463	.code pre { margin: 0; background: transparent !important; }
464	@media (prefers-color-scheme: dark) {	464	@media (prefers-color-scheme: dark) {
465	.code { border-color: var(--line); }	465	.code { border-color: var(--line); }