Markdown is a lightweight and easy-to-use syntax for styling all forms of writing on the GitHub platform.
What you will learn:
In this video we will discuss what Markdown is, what it is used for and we will jump into VSCode and learn the entire syntax in around 10 minutes. Rich text media — Reddit supports submissions containing images, videos, and gifs, and these are encoded into the Markdown with a customized inline image syntax. This feature is only supported by the Fancy Pants editor — the syntax would be prohibitively difficult to write manually at present.
- How the Markdown format makes styled collaborative editing easy
- How Markdown differs from traditional formatting approaches
- How to use Markdown to format text
- How to leverage GitHub’s automatic Markdown rendering
- How to apply GitHub’s unique Markdown extensions
What is Markdown?
Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like #
or *
.
You can use Markdown most places around GitHub:
- Comments in Issues and Pull Requests
- Files with the
.md
or.markdown
extension
For more information, see “Writing on GitHub” in the GitHub Help.
Examples
Syntax guide
Here’s an overview of Markdown syntax that you can use anywhere on GitHub.com or in your own text files.
Headers
Emphasis
Lists
Unordered
Ordered
Images
Links
Blockquotes
Inline code
GitHub Flavored Markdown
GitHub.com uses its own version of the Markdown syntax that provides an additional set of useful features, many of which make it easier to work with content on GitHub.com.
Note that some features of GitHub Flavored Markdown are only available in the descriptions and comments of Issues and Pull Requests. These include @mentions as well as references to SHA-1 hashes, Issues, and Pull Requests. Task Lists are also available in Gist comments and in Gist Markdown files.
Syntax highlighting
Here’s an example of how you can use syntax highlighting with GitHub Flavored Markdown:
You can also simply indent your code by four spaces:
Here’s an example of Python code without syntax highlighting:
Task Lists
If you include a task list in the first comment of an Issue, you will get a handy progress indicator in your issue list. It also works in Pull Requests!
Tables
You can create tables by assembling a list of words and dividing them with hyphens -
(for the first row), and then separating each column with a pipe |
:
Would become:
First Header | Second Header |
---|---|
Content from cell 1 | Content from cell 2 |
Content in the first column | Content in the second column |
SHA references
Any reference to a commit’s SHA-1 hash will be automatically converted into a link to that commit on GitHub.
Issue references within a repository
Any number that refers to an Issue or Pull Request will be automatically converted into a link.
Username @mentions
Typing an @
symbol, followed by a username, will notify that person to come and view the comment. This is called an “@mention”, because you’re mentioning the individual. You can also @mention teams within an organization.
Automatic linking for URLs
Any URL (like http://www.github.com/
) will be automatically converted into a clickable link.
Strikethrough
Any word wrapped with two tildes (like ~~this~~
) will appear crossed out.
Emoji
GitHub supports emoji!
To see a list of every image we support, check out the Emoji Cheat Sheet.
Last updated Jan 15, 2014
I usually struggle to remember all the parameters for inserting links and especially images to the markdown which is the default format for GitHub, GitLab comments and documentation files and for this blog as well. Moreover, neither GitHub nor GitLab supports inserting videos.
Markdown Video Github
One of the workarounds for this issue with videos is to insert an image of for the video wrapped in a link pointing to the video location. For markdown files images are inserted in the following way:
whereas we use the following markup to insert links
So, combining these two markups allows us inserting image with link to the markdown
Good! Now we know how to have clickable images in our markdown which will redirect us to some link. But how can we do the same trick with youtube video?
Inserting youtube clickable image to markdown
Let’s try to do the same thing with Audi R8 youtube video.
First, we need to grab an image from the video. Hopefully there is and API to do that. You will need vide id which is alphanumeric sequence in the urls v
parameter. In the example above it is KOxbO0EI4MA
. The link to image will be
For Audi R8 video the image is going to be
The only one thing is left, which is combining image with url
Great! We have just created a clickable image that can be inserted in the markdown and used in GitHub or GitLab comments. So, now you can praise awesome commits with funny cat videos.
Automatic Conversion
R Markdown Video
Remembering the markdown specifics to create clickable images is quite hard. So there is a web tool that’s doing that automatically. Navigate to the embedyoutube. You will see
Markdown Video Embed
Just put there your youtube link, alt text and title for the image and you will get the markdown that is ready to be pasted to the Git comment or markdown.
Markup And Markdown Videos
To conclude, we learned how we can embed youtube links into markdown files and GitHub and GitLab comments using image and link markup, also we learned how to do it automatically using embedyoutube.org