You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This show usable Markdown features on GitHub as a side by side comparison. This focuses on Markdown files, while most of also works in comments etc., there are some differences, so keep that in mind.
This line is also a separate paragraph, but...
continuing on the next line puts it in the same paragraph.
You can also put manual line-breaks
with two spaces at the end of the line
or with HTML
Here's a line for us to start with.
Leave a blank line to start a *separate paragraph*.
This line is also a separate paragraph, but...
continuing on the next line puts it in the *same paragraph*.
You can also put manual line-breaks
with two spaces at the end of the line
or with HTML <br>
Inline text formatting
Emphasis, aka italics, (this also works)
Strong emphasis, aka bold, (or this)
Combined both in one context
Strikethrough uses two tildes
Inline code with single backticks.
Inline Math $a=1+2$ with LaTeX
HTML Options:
User input with <kbd>
Program output with <samp>
Mark variables with <var>
inserted Text with <ins>
deleted Text with <del>
Quote with <q> to get quotation marks
Subscriptsub with <sub> and
Superscriptsup with <sup>
_Emphasis_, aka _italics_, (*this* also works)
**Strong emphasis**, aka **bold**, (or __this__)
**Combined _both_ in one context**
~~Strikethrough~~ uses two tildes
Inline code with `single backticks`.
Inline Math $a=1+2$ with LaTeX
_HTML Options:_
<kbd>User input</kbd> with `<kbd>`
<samp>Program output</samp> with `<samp>`
Mark <var>variables</var> with `<var>`
<ins>inserted</ins> Text with `<ins>`
<del>deleted Text</del> with `<del>`
<q>Quote</q> with `<q>` to get quotation marks
Subscript<sub>sub</sub> with `<sub>` and
Superscript<sup>sup</sup> with `<sup>`
URLs and URLs in angle brackets will automatically get turned
into links. http://www.example.com or http://www.example.com
and sometimes example.com (but not on Github, for example).
Some text to show that the reference links can follow later.
[inline-style link](https://www.example.com)
[inline-style link with title](https://www.example.com "Hover Me")
[reference-style link][Arbitrary case-insensitive label]
[relative reference to a repository file](../blob/master/LICENSE)
[You can use numbers for reference-style link definitions][1]
Or leave it empty and use the [link text itself]
URLs and URLs in angle brackets will automatically get turned
into links. http://www.example.com or <http://www.example.com>
and sometimes example.com (but not on Github, for example).
And HTML also works here: <a href="https://github.com">GitHub</a>
Some text to show that the reference links can follow later.
[Arbitrary case-insensitive label]: https://www.mozilla.org
[1]: http://slashdot.org
[link text itself]: http://www.reddit.com
Horizontal Rule
Three or more...
Hyphens
Asterisks
Underscores
Three or more...
---
Hyphens
***
Asterisks
___
Underscores
Code and Syntax Highlighting
Code blocks are part of the Markdown spec, but syntax highlighting isn't. However, many renderers -- like GitHub's -- support any common programming language.
Here you can find a list of supported languages.
We already know that inline code can be created with single backticks.
Alternatively you can use the code HTML-tag.
Blocks of code are fenced by lines with three backticks ``` or the pre HTML-tag.
You select the language to be used for highlighting as shown here:
No language indicated, so no syntax highlighting.
But you could explicitly use `no-highlight`
vars="JavaScript syntax highlighting";alert(s);
# we can also use the HTML tagimportantigravityprint("hello world")
<title>HTML with syntax highlighting</title><p>
But for HTML, we need to use ```
</p>
We already know that inline code can be created
with `single backticks`. Alternatively you can use
the <code>code</code> HTML-tag.
Blocks of code are fenced by lines with three
backticks <code>```</code> or the <code>pre</code>
HTML-tag.
You select the language to be used for highlighting
as shown here:
```
No language indicated, so no syntax highlighting.
But you could explicitly use `no-highlight`
```
```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```
<pre lang="python">
# we can also use the HTML tag
import antigravity
print("hello world")
</pre>
```html
<title>HTML with syntax highlighting</title>
But for HTML, we need to use ```
```
Maths
You can use LaTex syntax to write Maths and equations
You can use it inline with a single $: $a=1+2$
Or you can create an equation block with $$
$$ f(x) = \sum^\infty_{i=0} \frac{i}{a} + b^2 $$
You can use it inline with a single `$`: $a=1+2$
Or you can create an equation block with `$$`
$$ f(x) = \sum^\infty_{i=0} \frac{i}{a} + b^2 $$
Blockquotes
Blockquotes are very handy in email to emulate reply text.
This line is part of the same quote.
Or you can use HTML for this too
> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.
<blockquote>
Or you can use HTML for this too
</blockquote>
Alerts
Alerts are special types of blockquotes that are very visible.
You can use them to relay important information to the user.
This implementation is specific to GitHub and doesn't work in many other places.
Note
Useful information that users should know, even when skimming content.
Tip
Helpful advice for doing things better or more easily.
Important
Key information users need to know to achieve their goal.
Warning
Urgent info that needs immediate user attention to avoid problems.
Caution
Advises about risks or negative outcomes of certain actions.
> [!NOTE]
> Useful information that users should know, even when skimming content.
> [!TIP]
> Helpful advice for doing things better or more easily.
> [!IMPORTANT]
> Key information users need to know to achieve their goal.
> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.
> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.
Lists
First ordered list item
Another item
Unordered sub-list
The exact numbers doesn't matter, just that it's a number
Ordered sub-list
By the way, you can split you list items
over multiple lines.
Simply keep indenting.
Unordered list can use asterisks
Or minuses
Or pluses
1. First ordered list item
2. Another item
* Unordered sub-list
1. The exact numbers doesn't matter, just that it's a number
1. Ordered sub-list
4. By the way, you can split you list items
over multiple lines.
simply keep indenting.
* Unordered list can use asterisks
- Or minuses
+ Or pluses
Definition lists
This is a special type of list that originally comes from .rst documents. It's not part of Markdown, but you can use HTML to use them on GitHub.
Definition list are made up of three Tag:
<dl>
it wraps the whole list
<dt>
text or word to define
<dd>
this containes the actuall definition
Example
This is the text defining it
Definition list are made up of three Tag:
<dl>
<dt><code><dl></code></dt>
<dd>it wraps the whole list</dd>
<dt><code><dt></code></dt>
<dd>text or word to define</dd>
<dt><code><dd></code></dt>
<dd>this containes the actuall definition</dd>
<dt>Example</dt>
<dd>This is the text defining it</dd>
</dl>
Tables
Colons can be used to align columns.
Tables
Are
Cool
col 3 is
right-aligned
$1600
col 2 is
centered
$12
zebra stripes
are neat
$1
There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to make the raw Markdown line up
prettily. You can also use inline Markdown.
Markdown
Less
Pretty
Still
renders
nicely
1
2
3
Colons can be used to align columns.
| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
There must be at least 3 dashes separating each header cell.
The outer pipes (|) are optional, and you don't need to make
the raw Markdown line up prettily.
You can also use inline Markdown.
Markdown | Less | Pretty
--- | --- | ---
_Still_ | `renders` | **nicely**
1 | 2 | 3
Images
Images are links that are prefixed with a ! and use an image URL. By default, they use the images original size, but shrink it to fit the page. If you need more control over the size, use HTML.
Inline-style:
Reference-style:
Here HTML can actually benefit you, as it gives more control:
Text next to image
Images are links that are prefixed with a `!` and use an image URL.
By default, they use the images original size, but shrink it to fit
the page. If you need more control over the size, use HTML.
Inline-style:
Reference-style:
![alt text][github-badge]
Here HTML can actually benefit you, as it gives more control:
<img
src="https://badges.aleen42.com/src/github.svg"
width="200px"
align="right"
/>
Text next to image
<div align="center">
<img
src="https://badges.aleen42.com/src/github.svg"
width="60px"
height="60px"
/>
</div>
[github-badge]: https://badges.aleen42.com/src/github.svg "also hover"
[logo]: https://simpleicons.org/icons/markdown.svg "also hover"
I had no idea you could do this...
And I work at GitHub.. Absolutely amazing, thank you!