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>
This commit is contained in:
parent
671c609c46
commit
b9cd6fb703
6 changed files with 24 additions and 9 deletions
|
@ -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,16 @@ func RenderCommitBody(ctx context.Context, msg, urlPrefix string, metas map[stri
|
|||
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
|
||||
func RenderIssueTitle(ctx context.Context, text, urlPrefix string, metas map[string]string) template.HTML {
|
||||
renderedText, err := markup.RenderIssueTitle(&markup.RenderContext{
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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" $}}
|
||||
|
|
|
@ -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">{{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">{{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">{{.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">{{.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>
|
||||
|
|
|
@ -332,6 +332,11 @@ 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;
|
||||
|
|
|
@ -141,10 +141,9 @@
|
|||
}
|
||||
|
||||
code {
|
||||
padding: 1px;
|
||||
font-size: 85%;
|
||||
background-color: rgba(0, 0, 0, .04);
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--color-markup-code-block);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue