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 0fbf0f0b24..7fdf66c4bc 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 fa1eb824a2..44c0596dce 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 ea945584b4..63e7f4d3bd 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 a1a4f26b47..e16848581d 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 c9d19f5cc8..155bb5a74d 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;