Improve control char rendering and escape button styling (#37094)

Follow-up to #37078.

- Use Unicode Control Pictures](U+2400-U+2421) to render C0 control characters
- Make it work in diff view too
- Replace escape warning emoji with SVG
- Align escape warning button with code lines

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
silverwind
2026-04-06 13:07:33 +02:00
committed by GitHub
parent e47c6135dd
commit 423cdd4d94
37 changed files with 1561 additions and 1794 deletions
+1 -1
View File
@@ -101,7 +101,7 @@ func renderRepoFileCodePreview(ctx context.Context, opts markup.RenderCodePrevie
escapeStatus := &charset.EscapeStatus{}
lineEscapeStatus := make([]*charset.EscapeStatus, len(highlightLines))
for i, hl := range highlightLines {
lineEscapeStatus[i], hl.FormattedContent = charset.EscapeControlHTML(hl.FormattedContent, webCtx.Base.Locale, charset.RuneNBSP)
lineEscapeStatus[i], hl.FormattedContent = charset.EscapeControlHTML(hl.FormattedContent, webCtx.Base.Locale, charset.EscapeOptionsForView())
escapeStatus = escapeStatus.Or(lineEscapeStatus[i])
}
@@ -37,10 +37,12 @@ func TestRenderHelperCodePreview(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"><div class="code-inner"><span class="gh"># repo1</div></td>
<td class="lines-code chroma"><div class="code-inner"><span class="gh"># repo1
</span></div></td>
</tr><tr>
<td class="lines-num"><span data-line-number="2"></span></td>
<td class="lines-code chroma"><div class="code-inner"></span></div></td>
<td class="lines-code chroma"><div class="code-inner">
</div></td>
</tr></tbody>
</table>
</div>
@@ -64,7 +66,8 @@ func TestRenderHelperCodePreview(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"><div class="code-inner"><span class="gh"># repo1</div></td>
<td class="lines-code chroma"><div class="code-inner"><span class="gh"># repo1
</span></div></td>
</tr></tbody>
</table>
</div>