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

Author: silverwind

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

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,

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

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

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;