Mirrors/gitea
0
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2025-11-06 12:20:45 +01:00
Code Issues Activity

Improve and fix markup code preview rendering (#35777) (#35787)

Browse Source 
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:

<img width="286" height="162" alt="Screenshot 2025-10-29 at 19 09 59"
src="https://github.com/user-attachments/assets/f16b4eec-caf2-4c31-a2b5-ae5f41747d4b"
/>

After:

<img width="378" height="157" alt="image"
src="https://github.com/user-attachments/assets/0c91dfd3-0910-4b2d-a43b-8c87cfbb933e"
/>

For comparison, GitHub rendering:

<img width="286" height="177" alt="image"
src="https://github.com/user-attachments/assets/8a9a07b7-9153-4415-9d7a-5685853e472a"
/>

Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
Giteabot 2025-10-30 17:06:44 +08:00 committed by GitHub
parent 04b6f90889
commit e194d89c74
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
modules/markup/sanitizer_default.go
View File

@ -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...)

1
services/markup/renderhelper_codepreview.go
View File

@ -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,

14
services/markup/renderhelper_codepreview_test.go
View File

@ -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,
})

4
templates/base/markup_codepreview.tmpl
View File

@ -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 -}}

1
web_src/css/markup/codepreview.css
View File

@ -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;