From e194d89c74a57d0e83739e5fb7cbd52ac5b705e5 Mon Sep 17 00:00:00 2001 From: Giteabot Date: Thu, 30 Oct 2025 17:06:44 +0800 Subject: [PATCH] Improve and fix markup code preview rendering (#35777) (#35787) Backport #35777 by @silverwind 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 The only major difference to GitHub is now the missing line numbers. Before: Screenshot 2025-10-29 at 19 09 59 After: image For comparison, GitHub rendering: image Co-authored-by: silverwind --- 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, `
- /README.md - repo.code_preview_line_from_to:1,2,65f1bf27bc + repo1/README.md + repo.code_preview_line_from_to:1,2,65f1bf27bc
@@ -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, `
- /README.md - repo.code_preview_line_in:1,65f1bf27bc + repo1/README.md + repo.code_preview_line_in:1,65f1bf27bc
@@ -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 @@
- {{.FilePath}} - {{$link := HTMLFormat `%s` .RepoLink .CommitID (.CommitID | ShortSha) -}} + {{.RepoName}}/{{.FilePath}} + {{$link := HTMLFormat `%s` .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;