Wherever HTML is rendered on GitHub (gists, README files in repos, comments on issues and pull requests, ...) you can use any of the HTML elements that GitHub Flavored Markdown (GFM) provides syntactic sugar for. You can either use the syntactic sugar that GFM (or other GitHub-supported markup language you're using) provides or, since Markdown can contain raw HTML, you can enter the HTML tags manually.
But GitHub also allows you to use a few HTML elements beyond what Markdown provides by entering the tags manually, and some of them are styled with CSS. Most raw HTML tags get stripped before rendering the HTML. Those tags that can be generated by GFM syntactic sugar, plus a few more, are whitelisted. These aren't documented anywhere that I can find. Here's what I've discovered so far:
A <details>
element with a <summary>
inside it can be used to create a disclosure widget, and you can add the open
attribute to the <details>
element if you want it to already be open on page load:
This is the summary
And here are the details:
- Cash on hand: $500.00
- Current invoice: $75.30
- Due date: 5/6/19
Sample or quoted output from a computer program using <samp>
: sample output.
User input with <kbd>
: help mycommand.
Tip: multiple keystrokes as part of a single input like Ctrl+c should be represent with nested <kbd>
's. The Ctrl
is wrapped in its own <kbd>
, the +
doesn't get its own <kbd>
, then the c
gets its own <kbd>
: <kbd><kbd>Ctrl</kbd>+<kbd>c</kbd>
. Results in: Ctrl+c
You can also nest <samp>
's inside <kbd>
's to represent text presented by the system which is then used for some user input. With GitHub's CSS these look the same as <kbd>
's nested inside <kbd>
's. For example: the OK button (<kbd><samp>OK</samp></kbd>
).
If clicking multiple buttons (or menu items, etc) as part of a single input, you need <kbd>
's nested inside <kbd>
's to represent the multiple parts to a single input, same as with multiple keystrokes. But then you also nest <samp>
's inside the leaf <kbd>
's to represent that it's clicking on things presented by the program rather than just keystrokes. Example: File⇒New Document (<kbd><kbd><samp>File</samp></kbd>⇒<kbd><samp>New Document</samp></kbd></kbd>
).
A <kbd>
inside a <samp>
represents output from a computer program, but when the program was echoing back some previous input from the user! Not styled any differently by GitHub: git add my-new-file.cpp. Another example of this from MDN is showing the output of a terminal session as a <samp>
inside a <pre>
, and with the user-entered parts wrapped in <kbd>
's inside the <samp>
. This ends up styled a little oddly on GitHub but it does make sense (also note the use of Unicode █ as the cursor):
mike@interwebz:~$ md5 -s "Hello world" MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62 mike@interwebz:~$ █
Subscriptssub and superscriptssup with <sub>
and <sup>
.
You can use <sup>
to create linked footnotes.1
Inserted text with <ins>
: inserted and deleted text with <del>
: deleted. These can both have the cite
attribute.
Variables with <var>
: myVariable.
Inline quotes with <q>
get curly quotation marks around them: inline quote
. You can also use the cite
attribute on them. You can use cite
on a <blockquote>
too, if you enter the <blockquote>
manually.
- Publisher
- CNN and others
- Community admin
- Admins of Climate Feedback, Public Editors, etc
- Hypothesis admin
- Hypothesis developer
<ruby>
, <rt>
and <rp>
can be used for showing pronunciation of East Asian characters. Example:
<div>
is also allowed, along with the itemscope
and itemtype
attributes for defining microdata:
An &
gets changed into &
and <
and >
get changed into <
and >
.
You can also enter HTML entities like ©
and £
directly:
©, £, §, ¶, ←, →, ♥.
You can paste unicode characters directly and they'll be rendered. Here's a few: ⌘ ⌥ ❄ ★ ☂ 🍔 🤷 📚 🎒 ✋ 👓 🐅.
You can type emoji :shortcode:
's like :shipit:
into the Markdown source and get an emoji like .
See the Emoji Cheat Sheet
for the full list of emoji :shortcode:
's that you can use.
😄
😆
😊
😃
- GitHub's HTML sanitization code
- A GitHub issue about this
-
Since you need an
id
attribute on both the footnote and on the footnote reference (to enable the footnote to contain a link back to the reference) I think they both need to be done in raw HTML. I don't think there's any Markdown syntax for this. See the source code of this file for how it's done. ↩︎
haha funny centered text with p tag
No styling tho 😢done with
<p align="center">