Add code highlighting in issue titles

Signed-off-by: Yarden Shoham <hrsi88@gmail.com>

Author: yardenshoham

modules/templates/helper.go

@@ -161,6 +161,7 @@ func NewFuncMap() []template.FuncMap {
 		"RenderCommitMessageLink":        RenderCommitMessageLink,
 		"RenderCommitMessageLinkSubject": RenderCommitMessageLinkSubject,
 		"RenderCommitBody":               RenderCommitBody,
+		"RenderCodeBlock":                RenderCodeBlock,
 		"RenderIssueTitle":               RenderIssueTitle,
 		"RenderEmoji":                    RenderEmoji,
 		"RenderEmojiPlain":               emoji.ReplaceAliases,
@@ -795,6 +796,13 @@ func RenderCommitBody(ctx context.Context, msg, urlPrefix string, metas map[stri
 	return template.HTML(renderedMessage)
 }
 
+var codeMatcher = regexp.MustCompile("`([^`]+)`") // capture strings of the format `code-like text`
+
+func RenderCodeBlock(htmlEscapedTextToRender template.HTML) template.HTML {
+	htmlWithCodeTags := codeMatcher.ReplaceAllString(string(htmlEscapedTextToRender), "<code>$1</code>") // replace with HTML <code> tags
+	return template.HTML(htmlWithCodeTags)
+}
+
 // RenderIssueTitle renders issue/pull title with defined post processors
 func RenderIssueTitle(ctx context.Context, text, urlPrefix string, metas map[string]string) template.HTML {
 	renderedText, err := markup.RenderIssueTitle(&markup.RenderContext{

templates/repo/issue/view_title.tmpl

@@ -6,7 +6,7 @@
 			</div>
 		{{end}}
 		<h1>
-			<span id="issue-title">{{RenderIssueTitle $.Context .Issue.Title $.RepoLink $.Repository.ComposeMetas}}</span>
+			<span id="issue-title">{{RenderIssueTitle $.Context .Issue.Title $.RepoLink $.Repository.ComposeMetas | RenderCodeBlock}}</span>
 			<span class="index">#{{.Issue.Index}}</span>
 			<div id="edit-title-input" class="ui input" style="display: none">
 				<input value="{{.Issue.Title}}" maxlength="255" autocomplete="off">

templates/shared/issuelist.tmpl

@@ -35,7 +35,7 @@
 			</div>
 			<div class="issue-item-main f1 fc df">
 				<div class="issue-item-top-row">
-					<a class="title tdn" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji .Title}}</a>
+					<a class="title tdn issue-title" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji .Title | RenderCodeBlock}}</a>
 					{{if .IsPull}}
 						{{if (index $.CommitStatuses .PullRequest.ID)}}
 							{{template "repo/commit_statuses" dict "Status" (index $.CommitLastStatus .PullRequest.ID) "Statuses" (index $.CommitStatuses .PullRequest.ID) "root" $}}

templates/user/dashboard/feeds.tmpl

@@ -24,7 +24,7 @@
 							{{end}}
 						{{else if eq .GetOpType 6}}
 							{{$index := index .GetIssueInfos 0}}
-							{{$.locale.Tr "action.create_issue" ((printf "%s/issues/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html}}
+							{{$.locale.Tr "action.create_issue" ((printf "%s/issues/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html | RenderCodeBlock}}
 						{{else if eq .GetOpType 7}}
 							{{$index := index .GetIssueInfos 0}}
 							{{$.locale.Tr "action.create_pull_request" ((printf "%s/pulls/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html}}
@@ -99,17 +99,17 @@
 							</ul>
 						</div>
 					{{else if eq .GetOpType 6}}
-						<span class="text truncate issue title">{{index .GetIssueInfos 1 | RenderEmoji}}</span>
+						<span class="text truncate issue title issue-title">{{index .GetIssueInfos 1 | RenderEmoji | RenderCodeBlock}}</span>
 					{{else if eq .GetOpType 7}}
-						<span class="text truncate issue title">{{index .GetIssueInfos 1 | RenderEmoji}}</span>
+						<span class="text truncate issue title issue-title">{{index .GetIssueInfos 1 | RenderEmoji | RenderCodeBlock}}</span>
 					{{else if or (eq .GetOpType 10) (eq .GetOpType 21) (eq .GetOpType 22) (eq .GetOpType 23)}}
-						<a href="{{.GetCommentLink}}" class="text truncate issue title">{{.GetIssueTitle | RenderEmoji}}</a>
+						<a href="{{.GetCommentLink}}" class="text truncate issue title issue-title">{{.GetIssueTitle | RenderEmoji | RenderCodeBlock}}</a>
 						{{$comment := index .GetIssueInfos 1}}
 						{{if gt (len $comment) 0}}<p class="text light grey">{{$comment | RenderEmoji}}</p>{{end}}
 					{{else if eq .GetOpType 11}}
 						<p class="text light grey">{{index .GetIssueInfos 1}}</p>
 					{{else if or (eq .GetOpType 12) (eq .GetOpType 13) (eq .GetOpType 14) (eq .GetOpType 15)}}
-						<span class="text truncate issue title">{{.GetIssueTitle | RenderEmoji}}</span>
+						<span class="text truncate issue title issue-title">{{.GetIssueTitle | RenderEmoji | RenderCodeBlock}}</span>
 					{{else if eq .GetOpType 25}}
 					<p class="text light grey">{{$.locale.Tr "action.review_dismissed_reason"}}</p>
 						<p class="text light grey">{{index .GetIssueInfos 2 | RenderEmoji}}</p>

web_src/less/_base.less

@@ -332,6 +332,14 @@ a.commit-statuses-trigger {
   &:extend(.unselectable);
 }
 
+.issue-title {
+  code {
+    padding: 2px 4px;
+    border-radius: 6px;
+    background-color: var(--color-markup-code-block);
+  }
+}
+
 /* try to match button with no icons in height */
 .icon-button {
   padding-top: 7.42px !important;