Feature request: Fancy styling of kbd tag

[FWDekker]

• Gitea version (or commit ref): 1.10.0
• Git version: 2.23.0
• Operating system: FreeBSD
• Database (use [x]):
  • PostgreSQL
  • MySQL
  • MSSQL
  • SQLite
• Can you reproduce the bug at https://try.gitea.io:
  • Yes (provide example URL)
  • No
  • Not relevant
• Log gist: N/A

Description

The <kbd> tag can be used to display a keyboard shortcut in HTML/Markdown. While it is similar to using backticks (`) to display code, some websites style it to appear like an actual button. For example, on GitHub the input <kbd>Ctrl + C</kbd> is rendered as Ctrl + C. I think this representation clearly indicates to readers that it's a keyboard shortcut rather than code.

To give an example of a real-world usage of <kbd>, consider the README of this repository of mine where I explain which shortcuts my program accepts.

I think Gitea should style <kbd> similar to how GitHub styles it, or should at the very least apply a monospace font to it.

Screenshots

The screenshots below show how the following snippet of markdown is rendered differently by GitHub than by Gitea.

Input

<kbd>Ctrl + C</kbd> vs `Ctrl + C`

Output (GitHub)

Output (Gitea)

[FWDekker]

Looking at the Markdown stylesheet, it looks like the styling is already inplace. The issue appears to be that the Markdown parser replaces the <kbd> tag with a <p> tag. Manually replacing the <p> tag with a <kbd> tag using inspect element will actually apply the expected styling. I have absolutely 0 experience with Go so I have no idea how to go about fixing the parser.

[axifive]

@FWDekker Gitea use Blackfriday as markdown processor and it looks like that blackfriday can't process <kbd> tags

[guillep2k]

It's probably a setting in the sanitizer:

gitea/modules/markup/sanitizer.go

Lines 36 to 50 in 1823697

	func ReplaceSanitizer() {
	sanitizer.policy = bluemonday.UGCPolicy()
	// We only want to allow HighlightJS specific classes for code blocks
	sanitizer.policy.AllowAttrs("class").Matching(regexp.MustCompile(`^language-\w+$`)).OnElements("code")
	// Checkboxes
	sanitizer.policy.AllowAttrs("type").Matching(regexp.MustCompile(`^checkbox$`)).OnElements("input")
	sanitizer.policy.AllowAttrs("checked", "disabled").OnElements("input")
	// Custom URL-Schemes
	sanitizer.policy.AllowURLSchemes(setting.Markdown.CustomURLSchemes...)
	// Allow keyword markup
	sanitizer.policy.AllowAttrs("class").Matching(regexp.MustCompile(`^` + keywordClass + `$`)).OnElements("span")
	}