loading...

Rich HTML in GitHub README

omrilotan profile image omrilotan Originally published at Medium on ・1 min read

Embed rich HTML in any Markdown document, even a GitHub readme using foreignObject.

TL;DR

Jump to the example below to create a rich HTML document enveloped in an SVG file.

Readme frenzy

With the new GitHub profile readme feature, rich readme files with personal banners and customised messaging have become real popular. But Markdown, especially GitHub markdown is limited, and us snowflakes want to display our uniqueness in code! We don’t want animated GIFs, what is this, GeoCities? We want a way to incorporate rich, styled HTML in your readme files.

This could be live HTML

Enter foreignObject

<foreignObject> is an SVG element which can include elements from different XML namespaces. So, if our main XML namespace is SVG (http://www.w3.org/2000/svg), it can contain XHTML (http://www.w3.org/1999/xhtml), and all the features it supports, including a style tag.

Then, all that’s left is to include this an as image in your readme

# Welcome, I've been expecting you.
![](./really-cool-banner.svg)

Following is an example of an SVG file with embedded HTML document featuring CSS styles

Go nuts, create amazing things with HTML and CSS to enrich your readme and show off your wicked skills.

isbot readme banner
The banner from isbot repo. It even blinks

Posted on by:

Discussion

markdown guide