Add `code` highlighting in issue titles (#21432)

This changes the rendering logic of issue titles. If a substring in an
issue title is enclosed with a pair of backticks, it'll be rendered with
a monospace font (HTML `code` tag).

* Closes #20887

Signed-off-by: Yarden Shoham <hrsi88@gmail.com>
Co-authored-by: Gusted <williamzijl7@hotmail.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: 6543 <6543@obermui.de>
tokarchuk/v1.18
Yarden Shoham 2 years ago committed by GitHub
parent 671c609c46
commit b9cd6fb703
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 11
      modules/templates/helper.go
  2. 2
      templates/repo/issue/view_title.tmpl
  3. 2
      templates/shared/issuelist.tmpl
  4. 8
      templates/user/dashboard/feeds.tmpl
  5. 5
      web_src/less/_base.less
  6. 5
      web_src/less/_dashboard.less

@ -161,6 +161,7 @@ func NewFuncMap() []template.FuncMap {
"RenderCommitMessageLink": RenderCommitMessageLink, "RenderCommitMessageLink": RenderCommitMessageLink,
"RenderCommitMessageLinkSubject": RenderCommitMessageLinkSubject, "RenderCommitMessageLinkSubject": RenderCommitMessageLinkSubject,
"RenderCommitBody": RenderCommitBody, "RenderCommitBody": RenderCommitBody,
"RenderCodeBlock": RenderCodeBlock,
"RenderIssueTitle": RenderIssueTitle, "RenderIssueTitle": RenderIssueTitle,
"RenderEmoji": RenderEmoji, "RenderEmoji": RenderEmoji,
"RenderEmojiPlain": emoji.ReplaceAliases, "RenderEmojiPlain": emoji.ReplaceAliases,
@ -795,6 +796,16 @@ func RenderCommitBody(ctx context.Context, msg, urlPrefix string, metas map[stri
return template.HTML(renderedMessage) return template.HTML(renderedMessage)
} }
// 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
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 // RenderIssueTitle renders issue/pull title with defined post processors
func RenderIssueTitle(ctx context.Context, text, urlPrefix string, metas map[string]string) template.HTML { func RenderIssueTitle(ctx context.Context, text, urlPrefix string, metas map[string]string) template.HTML {
renderedText, err := markup.RenderIssueTitle(&markup.RenderContext{ renderedText, err := markup.RenderIssueTitle(&markup.RenderContext{

@ -6,7 +6,7 @@
</div> </div>
{{end}} {{end}}
<h1> <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> <span class="index">#{{.Issue.Index}}</span>
<div id="edit-title-input" class="ui input" style="display: none"> <div id="edit-title-input" class="ui input" style="display: none">
<input value="{{.Issue.Title}}" maxlength="255" autocomplete="off"> <input value="{{.Issue.Title}}" maxlength="255" autocomplete="off">

@ -35,7 +35,7 @@
</div> </div>
<div class="issue-item-main f1 fc df"> <div class="issue-item-main f1 fc df">
<div class="issue-item-top-row"> <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 .IsPull}}
{{if (index $.CommitStatuses .PullRequest.ID)}} {{if (index $.CommitStatuses .PullRequest.ID)}}
{{template "repo/commit_statuses" dict "Status" (index $.CommitLastStatus .PullRequest.ID) "Statuses" (index $.CommitStatuses .PullRequest.ID) "root" $}} {{template "repo/commit_statuses" dict "Status" (index $.CommitLastStatus .PullRequest.ID) "Statuses" (index $.CommitStatuses .PullRequest.ID) "root" $}}

@ -99,17 +99,17 @@
</ul> </ul>
</div> </div>
{{else if eq .GetOpType 6}} {{else if eq .GetOpType 6}}
<span class="text truncate issue title">{{index .GetIssueInfos 1 | RenderEmoji}}</span> <span class="text truncate issue title">{{index .GetIssueInfos 1 | RenderEmoji | RenderCodeBlock}}</span>
{{else if eq .GetOpType 7}} {{else if eq .GetOpType 7}}
<span class="text truncate issue title">{{index .GetIssueInfos 1 | RenderEmoji}}</span> <span class="text truncate issue title">{{index .GetIssueInfos 1 | RenderEmoji | RenderCodeBlock}}</span>
{{else if or (eq .GetOpType 10) (eq .GetOpType 21) (eq .GetOpType 22) (eq .GetOpType 23)}} {{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">{{.GetIssueTitle | RenderEmoji | RenderCodeBlock}}</a>
{{$comment := index .GetIssueInfos 1}} {{$comment := index .GetIssueInfos 1}}
{{if gt (len $comment) 0}}<p class="text light grey">{{$comment | RenderEmoji}}</p>{{end}} {{if gt (len $comment) 0}}<p class="text light grey">{{$comment | RenderEmoji}}</p>{{end}}
{{else if eq .GetOpType 11}} {{else if eq .GetOpType 11}}
<p class="text light grey">{{index .GetIssueInfos 1}}</p> <p class="text light grey">{{index .GetIssueInfos 1}}</p>
{{else if or (eq .GetOpType 12) (eq .GetOpType 13) (eq .GetOpType 14) (eq .GetOpType 15)}} {{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">{{.GetIssueTitle | RenderEmoji | RenderCodeBlock}}</span>
{{else if eq .GetOpType 25}} {{else if eq .GetOpType 25}}
<p class="text light grey">{{$.locale.Tr "action.review_dismissed_reason"}}</p> <p class="text light grey">{{$.locale.Tr "action.review_dismissed_reason"}}</p>
<p class="text light grey">{{index .GetIssueInfos 2 | RenderEmoji}}</p> <p class="text light grey">{{index .GetIssueInfos 2 | RenderEmoji}}</p>

@ -332,6 +332,11 @@ a.commit-statuses-trigger {
&:extend(.unselectable); &: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 */ /* try to match button with no icons in height */
.icon-button { .icon-button {
padding-top: 7.42px !important; padding-top: 7.42px !important;

@ -141,10 +141,9 @@
} }
code { code {
padding: 1px; padding: 2px 4px;
font-size: 85%;
background-color: rgba(0, 0, 0, .04);
border-radius: 3px; border-radius: 3px;
background-color: var(--color-markup-code-block);
word-break: break-all; word-break: break-all;
} }

Loading…
Cancel
Save