Fix code block style for code preview (#30298)

Fix #30292

To avoid unnecessary style overriding, use "div" instead of "code"

diff --git a/modules/markup/sanitizer.go b/modules/markup/sanitizer.go
index 77fbdf4520fc61affcdf6cad26c699076f9011e9..570a1da24809429bd918b50dd8378402becd2856 100644 (file)
--- a/modules/markup/sanitizer.go
+++ b/modules/markup/sanitizer.go
@@ -65,7 +65,7 @@ func createDefaultPolicy() *bluemonday.Policy {
        policy.AllowAttrs("class").Matching(regexp.MustCompile(`^lines-num$`)).OnElements("td")
        policy.AllowAttrs("data-line-number").OnElements("span")
        policy.AllowAttrs("class").Matching(regexp.MustCompile(`^lines-code chroma$`)).OnElements("td")
-       policy.AllowAttrs("class").Matching(regexp.MustCompile(`^code-inner$`)).OnElements("code")
+       policy.AllowAttrs("class").Matching(regexp.MustCompile(`^code-inner$`)).OnElements("div")
 
        // For code preview (unicode escape)
        policy.AllowAttrs("class").Matching(regexp.MustCompile(`^file-view( unicode-escaped)?$`)).OnElements("table")

diff --git a/services/markup/processorhelper_codepreview_test.go b/services/markup/processorhelper_codepreview_test.go
index 01db792925e30dc66ce84e1b8e705c82a022693e..154e4e8e441188a8c6ca8564332831f99cc3157a 100644 (file)
--- a/services/markup/processorhelper_codepreview_test.go
+++ b/services/markup/processorhelper_codepreview_test.go
@@ -36,10 +36,10 @@ func TestProcessorHelperCodePreview(t *testing.T) {
        <table class="file-view">
                <tbody><tr>
                                <td class="lines-num"><span data-line-number="1"></span></td>
-                               <td class="lines-code chroma"><code class="code-inner"><span class="gh"># repo1</code></td>
+                               <td class="lines-code chroma"><div class="code-inner"><span class="gh"># repo1</div></td>
                        </tr><tr>
                                <td class="lines-num"><span data-line-number="2"></span></td>
-                               <td class="lines-code chroma"><code class="code-inner"></span><span class="gh"></span></code></td>
+                               <td class="lines-code chroma"><div class="code-inner"></span><span class="gh"></span></div></td>
                        </tr></tbody>
        </table>
 </div>
@@ -63,7 +63,7 @@ func TestProcessorHelperCodePreview(t *testing.T) {
        <table class="file-view">
                <tbody><tr>
                                <td class="lines-num"><span data-line-number="1"></span></td>
-                               <td class="lines-code chroma"><code class="code-inner"><span class="gh"># repo1</code></td>
+                               <td class="lines-code chroma"><div class="code-inner"><span class="gh"># repo1</div></td>
                        </tr></tbody>
        </table>
 </div>

diff --git a/templates/base/markup_codepreview.tmpl b/templates/base/markup_codepreview.tmpl
index c65ab284065c71817ed450688fd96d4f50a1e0b9..a1a4f26b478dadd4a85fe626d1c173375d3797b7 100644 (file)
--- a/templates/base/markup_codepreview.tmpl
+++ b/templates/base/markup_codepreview.tmpl
@@ -17,7 +17,7 @@
                                        {{- $lineEscapeStatus := index $.LineEscapeStatus $idx -}}
                                        <td class="lines-escape">{{if $lineEscapeStatus.Escaped}}<a href="#" class="toggle-escape-button btn interact-bg" title="{{if $lineEscapeStatus.HasInvisible}}{{ctx.Locale.Tr "repo.invisible_runes_line"}} {{end}}{{if $lineEscapeStatus.HasAmbiguous}}{{ctx.Locale.Tr "repo.ambiguous_runes_line"}}{{end}}"></a>{{end}}</td>
                                {{- end}}
-                               <td class="lines-code chroma"><code class="code-inner">{{$line.FormattedContent}}</code></td>
+                               <td class="lines-code chroma"><div class="code-inner">{{$line.FormattedContent}}</div></td>{{/* only div works, span generates incorrect HTML structure */}}
                        </tr>
                        {{- end -}}
                </tbody>

diff --git a/web_src/css/markup/content.css b/web_src/css/markup/content.css
index 376d3030c7351ae42b3928dd88962bc08ada8df2..d44e727a2589ca56b0504bf465b4eb4d53aa83c3 100644 (file)
--- a/web_src/css/markup/content.css
+++ b/web_src/css/markup/content.css
@@ -432,7 +432,7 @@
   text-align: right;
 }
 
-.markup code:not(.code-inner),
+.markup code,
 .markup tt {
   padding: 0.2em 0.4em;
   margin: 0;