From c59c91a9e529f23c36c1b855ec18a91affa93933 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 0fbf0f0b24c08..7fdf66c4bce5a 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 fa1eb824a2f54..44c0596dcecd8 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 ea945584b427e..63e7f4d3bdf10 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 a1a4f26b478da..e16848581d949 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 c9d19f5cc8523..155bb5a74d291 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;