Skip to content

Instantly share code, notes, and snippets.

@seanh
Last active July 17, 2024 22:39
Show Gist options
  • Save seanh/13a93686bf4c2cb16e658b3cf96807f2 to your computer and use it in GitHub Desktop.
Save seanh/13a93686bf4c2cb16e658b3cf96807f2 to your computer and use it in GitHub Desktop.
HTML Tags You Can Use on GitHub

HTML Tags You Can Use on GitHub

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:

<details> and <summary>

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:

  1. Cash on hand: $500.00
  2. Current invoice: $75.30
  3. Due date: 5/6/19

<kbd> and <samp>

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: FileNew 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:~$ █

<sub> and <sup>

Subscriptssub and superscriptssup with <sub> and <sup>.

Footnotes

You can use <sup> to create linked footnotes.1

<ins> and <del>

Inserted text with <ins>: inserted and deleted text with <del>: deleted. These can both have the cite attribute.

<var>

Variables with <var>: myVariable.

<q>

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.

Definition lists (<dl>, <dt> and <dd>)

Publisher
CNN and others
Community admin
Admins of Climate Feedback, Public Editors, etc
Hypothesis admin
Hypothesis developer

<ruby>, <rt> and <rp>

<ruby>, <rt> and <rp> can be used for showing pronunciation of East Asian characters. Example:

(Kan)(ji)

<div>

<div> is also allowed, along with the itemscope and itemtype attributes for defining microdata:

Avatar
Director: James Cameron (born August 16, 1954) Science fiction Trailer

HTML Entities

An & gets changed into &amp; and < and > get changed into &lt; and &gt;. You can also enter HTML entities like &copy; and &pound; directly: ©, £, §, ¶, ←, →, ♥.

Unicode Characters

You can paste unicode characters directly and they'll be rendered. Here's a few: ⌘ ⌥ ❄ ★ ☂ 🍔 🤷 📚 🎒 ✋ 👓 🐅.

Emoji

You can type emoji :shortcode:'s like :shipit: into the Markdown source and get an emoji like :shipit:. See the Emoji Cheat Sheet for the full list of emoji :shortcode:'s that you can use.

:bowtie: 😄 😆 😊 😃 ☺️ 😏 😍 😘 😚 😳 😌 😆 😁 😉 😜 😝 😀 😗 😙 😛 😴 😟 😦 😧 😮 😬 😕 😯 😑 😒 😅 😓 😥 😩 😔 😞 😖 😨 😰 😣 😢 😭 😂 😲 😱 :neckbeard: 😫 😠 😡 😤 😪 😋 😷 😎 😵 👿 😈 😐 😶 😇 👽 💛 💙 💜 ❤️ 💚 💔 💓 💗 💕 💞 💘 💖 ✨ ⭐ 🌟 💫 💥 💥 💢 ❗ ❓ ❕ ❔ 💤 💨 💦 🎶 🎵 🔥 💩 💩 💩 👍 👍 👎 👎 👌 👊 👊 ✊ ✌️ 👋 ✋ ✋ 👐 ☝️ 👇 👈 👉 🙌 🙏 👆 👏 💪 🤘 🖕 🏃 🏃 👫 👪 👬 👭 💃 👯 🙆‍♀️ 🙅 💁 🙋 👰‍♀️ 🙇 💑 💆 💇 💅 👦 👧 👩 👨 👶 👵 👴 👲 👳‍♂️ 👷 👮 👼 👸 😺 😸 😻 😽 😼 🙀 😿 😹 😾 👹 👺 🙈 🙉 🙊 💂‍♂️ 💀 🐾 👄 💋 💧 👂 👀 👃 👅 💌 👤 👥 💬 💭 :feelsgood: :finnadie: :goberserk: :godmode: :hurtrealbad: :rage1: :rage2: :rage3: :rage4: :suspect: :trollface: ☀️ ☔ ☁️ ❄️ ⛄ ⚡ 🌀 🌁 🌊 🐱 🐶 🐭 🐹 🐰 🐺 🐸 🐯 🐨 🐻 🐷 🐽 🐮 🐗 🐵 🐒 🐴 🐎 🐫 🐑 🐘 🐼 🐍 🐦 🐤 🐥 🐣 🐔 🐧 🐢 🐛 🐝 🐜 🪲 🐌 🐙 🐠 🐟 🐳 🐋 🐬 🐄 🐏 🐀 🐃 🐅 🐇 🐉 🐐 🐓 🐕 🐖 🐁 🐂 🐲 🐡 🐊 🐪 🐆 🐈 🐩 🐾 💐 🌸 🌷 🍀 🌹 🌻 🌺 🍁 🍃 🍂 🌿 🍄 🌵 🌴 🌲 🌳 🌰 🌱 🌼 🌾 🐚 🌐 🌞 🌝 🌚 🌑 🌒 🌓 🌔 🌕 🌖 🌗 🌘 🌜 🌛 🌙 🌍 🌎 🌏 🌋 🌌 ⛅ :octocat: 🎍 💝 🎎 🎒 🎓 🎏 🎆 🎇 🎐 🎑 🎃 👻 🎅 🎄 🎁 🔔 🔕 🎋 🎉 🎊 🎈 🔮 💿 📀 💾 📷 📹 🎥 💻 📺 📱 ☎️ ☎️ 📞 📟 📠 💽 📼 🔉 🔈 🔇 📢 📣 ⌛ ⏳ ⏰ ⌚ 📻 📡 ➿ 🔍 🔎 🔓 🔒 🔏 🔐 🔑 💡 🔦 🔆 🔅 🔌 🔋 📲 📧 📫 📮 🛀 🛁 🚿 🚽 🔧 🔩 🔨 💺 💰 💴 💵 💷 💶 💳 💸 📧 📥 📤 ✉️ 📨 📯 📪 📬 📭 📦 🚪 🚬 💣 🔫 🔪 💊 💉 📄 📃 📑 📊 📈 📉 📜 📋 📆 📅 📇 📁 📂 ✂️ 📌 📎 ✒️ ✏️ 📏 📐 📕 📗 📘 📙 📓 📔 📒 📚 🔖 📛 🔬 🔭 📰 🏈 🏀 ⚽ ⚾ 🎾 🎱 🏉 🎳 ⛳ 🚵 🚴 🏇 🏂 🏊 🏄 🎿 ♠️ ♥️ ♣️ ♦️ 💎 💍 🏆 🎼 🎹 🎻 👾 🎮 🃏 🎴 🎲 🎯 🀄 🎬 📝 📝 📖 🎨 🎤 🎧 🎺 🎷 🎸 👞 👡 👠 💄 👢 👕 👕 👔 👚 👗 🎽 👖 👘 👙 🎀 🎩 👑 👒 👞 🌂 💼 👜 👝 👛 👓 🎣 ☕ 🍵 🍶 🍼 🍺 🍻 🍸 🍹 🍷 🍴 🍕 🍔 🍟 🍗 🍖 🍝 🍛 🍤 🍱 🍣 🍥 🍙 🍘 🍚 🍜 🍲 🍢 🍡 🥚 🍞 🍩 🍮 🍦 🍨 🍧 🎂 🍰 🍪 🍫 🍬 🍭 🍯 🍎 🍏 🍊 🍋 🍒 🍇 🍉 🍓 🍑 🍈 🍌 🍐 🍍 🍠 🍆 🍅 🌽 🏠 🏡 🏫 🏢 🏣 🏥 🏦 🏪 🏩 🏨 💒 ⛪ 🏬 🏤 🌇 🌆 🏯 🏰 ⛺ 🏭 🗼 🗾 🗻 🌄 🌅 🌠 🗽 🌉 🎠 🌈 🎡 ⛲ 🎢 🚢 🚤 ⛵ ⛵ 🚣 ⚓ 🚀 ✈️ 🚁 🚂 🚊 🚞 🚲 🚡 🚟 🚠 🚜 🚙 🚘 🚗 🚗 🚕 🚖 🚛 🚌 🚍 🚨 🚓 🚔 🚒 🚑 🚐 🚚 🚋 🚉 🚆 🚅 🚄 🚈 🚝 🚃 🚎 🎫 ⛽ 🚦 🚥 ⚠️ 🚧 🔰 🏧 🎰 🚏 💈 ♨️ 🏁 🎌 🏮 🗿 🎪 🎭 📍 🚩 🇯🇵 🇰🇷 🇨🇳 🇺🇸 🇫🇷 🇪🇸 🇮🇹 🇷🇺 🇬🇧 🇬🇧 🇩🇪 1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 6️⃣ 7️⃣ 8️⃣ 9️⃣ 🔟 🔢 0️⃣ #️⃣ 🔣 ◀️ ⬇️ ▶️ ⬅️ 🔠 🔡 🔤 ↙️ ↘️ ➡️ ⬆️ ↖️ ↗️ ⏬ ⏫ 🔽 ⤵️ ⤴️ ↩️ ↪️ ↔️ ↕️ 🔼 🔃 🔄 ⏪ ⏩ ℹ️ 🆗 🔀 🔁 🔂 🆕 🔝 🆙 🆒 🆓 🆖 🎦 🈁 📶 🈹 🈴 🈺 🈯 🈷️ 🈶 🈵 🈚 🈸 🈳 🈲 🈂️ 🚻 🚹 🚺 🚼 🚭 🅿️ ♿ 🚇 🛄 🉑 🚾 🚰 🚮 ㊙️ ㊗️ Ⓜ️ 🛂 🛅 🛃 🉐 🆑 🆘 🆔 🚫 🔞 📵 🚯 🚱 🚳 🚷 🚸 ⛔ ✳️ ❇️ ✴️ 💟 🆚 📳 📴 💹 💱 ♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓ ⛎ 🔯 ❎ 🅰️ 🅱️ 🆎 🅾️ 💠 ♻️ 🔚 🔙 🔛 🔜 🕐 🕜 🕙 🕥 🕚 🕦 🕛 🕧 🕑 🕝 🕒 🕞 🕓 🕟 🕔 🕠 🕕 🕡 🕖 🕢 🕗 🕣 🕘 🕤 💲 ©️ ®️ ™️ ❌ ❗ ‼️ ⁉️ ⭕ ✖️ ➕ ➖ ➗ 💮 💯 ✔️ ☑️ 🔘 🔗 ➰ 〰️ 〽️ 🔱 ▪️ ▫️ ◾ ◽ ◼️ ◻️ ⬛ ⬜ ✅ 🔲 🔳 ⚫ ⚪ 🔴 🔵 🔷 🔶 🔹 🔸 🔺 🔻 :shipit:

References

Footnotes

  1. 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. ↩︎

Copy link

ghost commented Apr 2, 2021

Thank you!!!

@SaschaMann
Copy link

I know this is an old gist, but for anyone who still finds this:

I don't think there's any Markdown syntax for this. See the source code of this file for how it's done. ↩︎

Footnotes have recently been added via markdown syntax: https://github.blog/changelog/2021-09-30-footnotes-now-supported-in-markdown-fields/

Here is a simple footnote[^1]. With some additional text after it.

[^1]: My reference.

@pleasetestagain
Copy link

thankyou

@rodezf
Copy link

rodezf commented Jun 26, 2022

Nice

@ambush-predator
Copy link

Is the p tag and the <style></style>tag allowed

Copy link

ghost commented Jul 26, 2022

Is the p tag and the <style></style>tag allowed

no, same with <script> tags

@jjspace
Copy link

jjspace commented Aug 10, 2022

For anyone coming here in the future GitHub has started allowing, and encouraging, the use of <picture>, <source>, and <img> tags specifically for Specifying the theme an image is shown to

@milahu
Copy link

milahu commented Sep 22, 2022

<pre> can be used for preformatted text
<span> can be used to set text color

<pre>
<span color="red">red</span>
  <span color="orange">orange</span>
<span color="yellow">yellow</span>
  <span color="lime">lime</span>
<span color="green">green</span>
  <span color="turquoise">turquoise</span>
  <span color="cyan">cyan</span>
<span color="blue">blue</span>
  <span color="purple">purple</span>
  <span color="magenta">magenta</span>
<span color="red">red</span>
</pre>

demo:

red
  orange
yellow
  lime
green
  turquoise
  cyan
blue
  purple
  magenta
red

see also my https://github.com/milahu/random/blob/master/markdown/test-github-markdown-renderer.md
there are some differences between blob api and comments api, for exampe line endings (softbreak vs hardbreak)

@GibberishDev
Copy link

Is the p tag and the <style></style>tag allowed

haha funny centered text with p tag

No styling tho 😢

done with <p align="center">

@david-trimble
Copy link

I'm not sure if this is appropriate to ask here but does anyone know how to add today's date to github? I tried the html code I found on w3 school but it didn't work. Thanks.

@kafle1
Copy link

kafle1 commented Dec 11, 2022

I am trying to add dev icons to my readme files but :(( its not working. How can i use link tags in readme files for github.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css">

<i style="margin: 5px; font-size: 65px" class="devicon-react-original-wordmark colored"></i>

@matefs
Copy link

matefs commented Jan 1, 2023

Tip: Use https://dillinger.io/ to test comments and see how they work.

@muzimuzhi
Copy link

FYI: GitHub markdown fields learnt footnotes in Sept 2021, see https://github.blog/changelog/2021-09-30-footnotes-now-supported-in-markdown-fields/.

Here is a simple footnote[^1]. With some additional text after it.

[^1]: My reference.

Here is a simple footnote1. With some additional text after it.

Footnotes

  1. My reference.

@SirMoogle
Copy link

SirMoogle commented Jun 9, 2023

Don't suppose Github allows the use of span tags? ☹️

@Artoria2e5
Copy link

Artoria2e5 commented Jun 20, 2023

For what is worth, https://github.com/gjtorikian/html-pipeline/blob/main/lib/html_pipeline/sanitization_filter.rb is the new link. So... @SirMoogle span is allowed, but given that you can use style=, what do you even use a span for?

Oh wait. GitHub isn't using that gem any more! Where's the new thing located?

Sigh, just sent them https://github.com/orgs/community/discussions/58528.

@LoveEmiliaForever
Copy link

thanks, I'm finding this

@milahu
Copy link

milahu commented Jun 23, 2023

<i style="margin: 5px; font-size: 65px" class="devicon-react-original-wordmark colored"></i>

use the svg image from https://github.com/devicons/devicon

<img height="65" src="https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original-wordmark.svg">

limitation: no margin

@milahu
Copy link

milahu commented Jun 23, 2023

how to add today's date to github?

that makes little sense...

you can use a badge from https://github.com/badges/shields

there is relative-date

timestamp 1540814400 was Relative date
timestamp -62167219200 was Relative date

you could ask them to add a current-date badge, accepting a format string like %F and a timezone
a current-time badge would not work because of caching

stupid workaround: dynamic-json-badge
Dynamic JSON Badge
Dynamic JSON Badge
Dynamic JSON Badge

@DecathectZero
Copy link

DecathectZero commented Nov 26, 2023

<video/> tags are also allowed now, as long as they are from a github source.

For reference:

Screen.Recording.2023-11-26.at.1.32.19.PM.mov

@michael-lehn
Copy link

\<pre\> can be used for preformatted text <span> can be used to set text color

<pre>
<span color="red">red</span>
  <span color="orange">orange</span>
<span color="yellow">yellow</span>
  <span color="lime">lime</span>
<span color="green">green</span>
  <span color="turquoise">turquoise</span>
  <span color="cyan">cyan</span>
<span color="blue">blue</span>
  <span color="purple">purple</span>
  <span color="magenta">magenta</span>
<span color="red">red</span>
</pre>

demo:

red
orange
yellow
lime
green
turquoise
cyan
blue
purple
magenta
red
see also my https://github.com/milahu/random/blob/master/markdown/test-github-markdown-renderer.md there are some differences between blob api and comments api, for exampe line endings (softbreak vs hardbreak)

I don't see colors :(

So I guess this is now disabled by GitHub?? I really need that for manually highlight syntax

@Artoria2e5
Copy link

Long gone, a different closed-source sanitizer is used now. Maybe you can get some colored text via SVG <img>.

@michael-lehn
Copy link

Long gone, a different closed-source sanitizer is used now. Maybe you can get some colored text via SVG <img>.

That's unfortunate. I guess I move to GitLab

@signalogic
Copy link

Footnotes have recently been added via markdown syntax: https://github.blog/changelog/2021-09-30-footnotes-now-supported-in-markdown-fields

Nice but it would be good if footnotes were rendered where they are placed in the markdown, instead of assuming the bottom of the document. Often there is a need to footnote a section without scrolling an unknown number of pages to find the footnote.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment