Feature request: Fancy styling of kbd tag #4439

New Issue

GiteaMirror · 2025-11-02T05:50:54-06:00

GiteaMirror commented

2025-11-02 05:50:54 -06:00

Originally created by @fwdekker on GitHub (Dec 3, 2019).

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)

Originally created by @fwdekker on GitHub (Dec 3, 2019). - Gitea version (or commit ref): 1.10.0 - Git version: 2.23.0 - Operating system: FreeBSD - Database (use `[x]`): - [ ] PostgreSQL - [ ] MySQL - [ ] MSSQL - [x] SQLite - Can you reproduce the bug at https://try.gitea.io: - [ ] Yes (provide example URL) - [ ] No - [x] Not relevant - Log gist: N/A ## Description The [`<kbd>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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 <kbd>Ctrl + C</kbd>. 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](https://github.com/FWDekker/intellij-randomness/blob/13a476a/README.md) 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 ```markdown <kbd>Ctrl + C</kbd> vs `Ctrl + C` ``` ### Output (GitHub) ![Rendering of above snipper by GitHub](https://user-images.githubusercontent.com/13442533/70037251-8e120c00-15b6-11ea-8c1d-e76ae59a90d9.png) ### Output (Gitea) ![Rendering of above snippet by Gitea](https://user-images.githubusercontent.com/13442533/70037470-e517e100-15b6-11ea-9b88-5fd233840b31.png)

GiteaMirror added the type/proposal label 2025-11-02 05:50:54 -06:00

GiteaMirror closed this issue

2025-11-02 05:50:54 -06:00

GiteaMirror commented

2025-11-02 05:50:55 -06:00

@fwdekker commented on GitHub (Dec 3, 2019):

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.

@fwdekker commented on GitHub (Dec 3, 2019): Looking at the [Markdown stylesheet](https://github.com/go-gitea/gitea/blob/master/web_src/less/_markdown.less#L446-L458), 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.

GiteaMirror commented

2025-11-02 05:50:55 -06:00

@axifive commented on GitHub (Dec 3, 2019):

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

@axifive commented on GitHub (Dec 3, 2019): @FWDekker Gitea use [Blackfriday](https://github.com/russross/blackfriday/) as markdown processor and it looks like that blackfriday can't process `<kbd>` tags

GiteaMirror commented

2025-11-02 05:50:55 -06:00

@guillep2k commented on GitHub (Dec 3, 2019):

It's probably a setting in the sanitizer:

18236973e9/modules/markup/sanitizer.go (L36-L50)

@guillep2k commented on GitHub (Dec 3, 2019): It's probably a setting in the sanitizer: https://github.com/go-gitea/gitea/blob/18236973e9be8d8dd64a594fbf6db0901ba2ea9a/modules/markup/sanitizer.go#L36-L50

GiteaMirror referenced this issue

2025-11-02 13:01:59 -06:00

[PR #4447] [CLOSED] Redirect to login page after successfully activating account #17378

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#4439