From 8b290b87e990ed1aa002836088ba2462451effd9 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 30 Oct 2025 06:15:42 +0100
Subject: [PATCH] Improve and fix markup code preview rendering (#35777)

1. Add the color on the link to the referenced file, which is the more
likely thing the user wants to click
2. Use monospace font on the SHA
3. Tweak text colors
4. Change SHA link to go to the commit instead of the repo root with
commit filter set
5. Added the repo name to the file link text
6. Fix broken line numbering rendering
---
 modules/markup/sanitizer_default.go              |  3 +++
 services/markup/renderhelper_codepreview.go      |  1 +
 services/markup/renderhelper_codepreview_test.go | 14 +++++++-------
 templates/base/markup_codepreview.tmpl           |  4 ++--
 web_src/css/markup/codepreview.css               |  1 +
 5 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/modules/markup/sanitizer_default.go b/modules/markup/sanitizer_default.go
index 0fbf0f0b24c..7fdf66c4bce 100644
--- a/modules/markup/sanitizer_default.go
+++ b/modules/markup/sanitizer_default.go
@@ -30,6 +30,9 @@ func (st *Sanitizer) createDefaultPolicy() *bluemonday.Policy {
 	// Chroma always uses 1-2 letters for style names, we could tolerate it at the moment
 	policy.AllowAttrs("class").Matching(regexp.MustCompile(`^\w{0,2}$`)).OnElements("span")
 
+	// Line numbers on codepreview
+	policy.AllowAttrs("data-line-number").OnElements("span")
+
 	// Custom URL-Schemes
 	if len(setting.Markdown.CustomURLSchemes) > 0 {
 		policy.AllowURLSchemes(setting.Markdown.CustomURLSchemes...)
diff --git a/services/markup/renderhelper_codepreview.go b/services/markup/renderhelper_codepreview.go
index fa1eb824a2f..44c0596dcec 100644
--- a/services/markup/renderhelper_codepreview.go
+++ b/services/markup/renderhelper_codepreview.go
@@ -110,6 +110,7 @@ func renderRepoFileCodePreview(ctx context.Context, opts markup.RenderCodePrevie
 		"FilePath":         opts.FilePath,
 		"LineStart":        opts.LineStart,
 		"LineStop":         realLineStop,
+		"RepoName":         opts.RepoName,
 		"RepoLink":         dbRepo.Link(),
 		"CommitID":         opts.CommitID,
 		"HighlightLines":   highlightLines,
diff --git a/services/markup/renderhelper_codepreview_test.go b/services/markup/renderhelper_codepreview_test.go
index ea945584b42..63e7f4d3bdf 100644
--- a/services/markup/renderhelper_codepreview_test.go
+++ b/services/markup/renderhelper_codepreview_test.go
@@ -24,15 +24,15 @@ func TestRenderHelperCodePreview(t *testing.T) {
 		OwnerName: "user2",
 		RepoName:  "repo1",
 		CommitID:  "65f1bf27bc3bf70f64657658635e66094edbcb4d",
-		FilePath:  "/README.md",
+		FilePath:  "README.md",
 		LineStart: 1,
 		LineStop:  2,
 	})
 	assert.NoError(t, err)
 	assert.Equal(t, `<div class="code-preview-container file-content">
 	<div class="code-preview-header">
-		<a href="http://full" class="muted" rel="nofollow">/README.md</a>
-		repo.code_preview_line_from_to:1,2,<a href="/user2/repo1/src/commit/65f1bf27bc3bf70f64657658635e66094edbcb4d" rel="nofollow">65f1bf27bc</a>
+		<a href="http://full" class="tw-font-semibold" rel="nofollow">repo1/README.md</a>
+		repo.code_preview_line_from_to:1,2,<a href="/user2/repo1/commit/65f1bf27bc3bf70f64657658635e66094edbcb4d" class="muted tw-font-mono tw-text-text" rel="nofollow">65f1bf27bc</a>
 	</div>
 	<table class="file-view">
 		<tbody><tr>
@@ -52,14 +52,14 @@ func TestRenderHelperCodePreview(t *testing.T) {
 		OwnerName: "user2",
 		RepoName:  "repo1",
 		CommitID:  "65f1bf27bc3bf70f64657658635e66094edbcb4d",
-		FilePath:  "/README.md",
+		FilePath:  "README.md",
 		LineStart: 1,
 	})
 	assert.NoError(t, err)
 	assert.Equal(t, `<div class="code-preview-container file-content">
 	<div class="code-preview-header">
-		<a href="http://full" class="muted" rel="nofollow">/README.md</a>
-		repo.code_preview_line_in:1,<a href="/user2/repo1/src/commit/65f1bf27bc3bf70f64657658635e66094edbcb4d" rel="nofollow">65f1bf27bc</a>
+		<a href="http://full" class="tw-font-semibold" rel="nofollow">repo1/README.md</a>
+		repo.code_preview_line_in:1,<a href="/user2/repo1/commit/65f1bf27bc3bf70f64657658635e66094edbcb4d" class="muted tw-font-mono tw-text-text" rel="nofollow">65f1bf27bc</a>
 	</div>
 	<table class="file-view">
 		<tbody><tr>
@@ -76,7 +76,7 @@ func TestRenderHelperCodePreview(t *testing.T) {
 		OwnerName: "user15",
 		RepoName:  "big_test_private_1",
 		CommitID:  "65f1bf27bc3bf70f64657658635e66094edbcb4d",
-		FilePath:  "/README.md",
+		FilePath:  "README.md",
 		LineStart: 1,
 		LineStop:  10,
 	})
diff --git a/templates/base/markup_codepreview.tmpl b/templates/base/markup_codepreview.tmpl
index a1a4f26b478..e16848581d9 100644
--- a/templates/base/markup_codepreview.tmpl
+++ b/templates/base/markup_codepreview.tmpl
@@ -1,7 +1,7 @@
 <div class="code-preview-container file-content">
 	<div class="code-preview-header">
-		<a href="{{.FullURL}}" class="muted" rel="nofollow">{{.FilePath}}</a>
-		{{$link := HTMLFormat `<a href="%s/src/commit/%s" rel="nofollow">%s</a>` .RepoLink .CommitID (.CommitID | ShortSha) -}}
+		<a href="{{.FullURL}}" class="tw-font-semibold" rel="nofollow">{{.RepoName}}/{{.FilePath}}</a>
+		{{$link := HTMLFormat `<a href="%s/commit/%s" class="muted tw-font-mono tw-text-text" rel="nofollow">%s</a>` .RepoLink .CommitID (.CommitID | ShortSha) -}}
 		{{- if eq .LineStart .LineStop -}}
 			{{ctx.Locale.Tr "repo.code_preview_line_in" .LineStart $link}}
 		{{- else -}}
diff --git a/web_src/css/markup/codepreview.css b/web_src/css/markup/codepreview.css
index c9d19f5cc85..155bb5a74d2 100644
--- a/web_src/css/markup/codepreview.css
+++ b/web_src/css/markup/codepreview.css
@@ -5,6 +5,7 @@
 }
 
 .markup .code-preview-container .code-preview-header {
+  color: var(--color-text-light-1);
   border-bottom: 1px solid var(--color-secondary);
   padding: 0.5em;
   font-size: 12px;