Render code blocks in repo description (#26830)

Backtick syntax now works in repo description too. Also, I replaced the
CSS for this was a new single class, making it more flexible and not
dependent on a parent. Also, very slightly reduced font size from 16.8px
to 16px.

---------

Co-authored-by: wxiaoguang <[email protected]>

Author: silverwind

modules/templates/util_render.go

@@ -108,10 +108,9 @@ func RenderCommitBody(ctx context.Context, msg, urlPrefix string, metas map[stri
 // Match text that is between back ticks.
 var codeMatcher = regexp.MustCompile("`([^`]+)`")
 
-// RenderCodeBlock renders "`…`" as highlighted "<code>" block.
-// Intended for issue and PR titles, these containers should have styles for "<code>" elements
+// RenderCodeBlock renders "`…`" as highlighted "<code>" block, intended for issue and PR titles
 func RenderCodeBlock(htmlEscapedTextToRender template.HTML) template.HTML {
-	htmlWithCodeTags := codeMatcher.ReplaceAllString(string(htmlEscapedTextToRender), "<code>$1</code>") // replace with HTML <code> tags
+	htmlWithCodeTags := codeMatcher.ReplaceAllString(string(htmlEscapedTextToRender), `<code class="inline-code-block">$1</code>`) // replace with HTML <code> tags
 	return template.HTML(htmlWithCodeTags)
 }
 

templates/repo/home.tmpl

@@ -6,9 +6,9 @@
 		{{template "repo/code/recently_pushed_new_branches" .}}
 		{{if and (not .HideRepoInfo) (not .IsBlame)}}
 		<div class="ui repo-description">
-			<div id="repo-desc">
+			<div id="repo-desc" class="gt-font-16">
 				{{$description := .Repository.DescriptionHTML $.Context}}
-				{{if $description}}<span class="description">{{$description}}</span>{{else if .IsRepositoryAdmin}}<span class="no-description text-italic">{{.locale.Tr "repo.no_desc"}}</span>{{end}}
+				{{if $description}}<span class="description">{{$description | RenderCodeBlock}}</span>{{else if .IsRepositoryAdmin}}<span class="no-description text-italic">{{.locale.Tr "repo.no_desc"}}</span>{{end}}
 				<a class="link" href="{{.Repository.Website}}">{{.Repository.Website}}</a>
 			</div>
 			{{if .RepoSearchEnabled}}

web_src/css/base.css

@@ -454,7 +454,7 @@ a.label,
   background: var(--color-hover);
 }
 
-.issue-title code {
+.inline-code-block {
   padding: 2px 4px;
   border-radius: var(--border-radius-medium);
   background-color: var(--color-markup-code-block);

web_src/css/repo.css

@@ -236,10 +236,6 @@
   }
 }
 
-.repository.file.list #repo-desc {
-  font-size: 1.2em;
-}
-
 .repository.file.list .repo-path {
   word-break: break-word;
 }