Skip to content

Markdown Here Cheatsheet

Jump to bottom
Adrien Centonze edited this page Jan 10, 2017 · 4 revisions

Cette page est là pour référence et démonstration. Pour de infos plus complète, allez voir John Gruber's original spec et Github-flavored Markdown info page.

Cette note est spécifique à Mardown Here, la version de Markdown designé pour GitHub. Elle diffère un peu en style et en syntaxe de l'utilisation classique sur GitHub, donc ce que vous allez voir ici differt un petit peu de ce que vous avez l'habitude de voir dans les @mail Markdown Here mais cela est tout de même assez proche.

Vous pouvez jouer un peu avec le Markdown sur notre live demo page.

Si vous n'êtes pas un utilisateur de Markdown Here, regarder Markdown Cheatsheet qui n'est pas specifique à Markdown Here.

Table des matières

Headers
Emphasis
Lists
Links
Images
Code and Syntax Highlighting
Tables
Blockquotes
Inline HTML
Horizontal Rule
Line Breaks
Youtube videos

## Headers 
# H1
## H2
### H3
#### H4
##### H5
###### H6

Une alternative pour les H1 et H2 en version sous-lignés :

Alt-H1
======

Alt-H2
------

H1

H2

H3

H4

H5
H6

Une alternative pour les H1 et H2 en version sous-lignés :

Alt-H1

Alt-H2

## Emphases 

Les accentuation comme l'italique avec *astérisques* ou _underscores_.

Le gras, aka bold avec **astérisques** ou __underscores__.

Les deux combinés **astérisques et _underscores_**.

L'utilisation du barré en utilisant deux tildes ~~Scratch this.~~

Les accentuation comme l'italique avec astérisques ou underscores.

Le gras, aka bold avec asterisks or underscores.

Les deux combinés asterisks and underscores.

L'utilisation du barré en utilisant deux tildes Scratch this.

## Lists 
1. Premier élément de la liste
2. Un autre élément
  * Un sous élément non-ordonné

1. En réalité, le chiffre ne compte pas, c'est jute un chiffre.
  1. Une liste sous-ordonnée
4. Et un autre élément
   
   Du texte qui doit s'aligner avec l'élément supérieur.

* Une liste non ordonnée peut utiliser un astérisque
- ou un signe moins
+ ou un signe plus
  1. Premier élément de la liste
  2. Un autre élément
  • Un sous élément non-ordonné

  1. En réalité, le chiffre ne compte pas, c'est jute un chiffre.

  2. Une liste sous-ordonnée

  3. Et un autre élément

    Du texte qui doit s'aligner avec l'élément supérieur.

  • Une liste non ordonnée peut utiliser un astérisque
  • ou un signe moins
  • ou un signe plus
## Links

Il y a deux façons de creer un liens.

[Je suis un élément de lien en ligne](https://www.google.com)

[Je suis un lien de référence stylisé][Arbitrary case-insensitive reference text]

[Vous pouvez utiliser la définition d'un numéro de liens de référence][1]

Ou le laisser 
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).

Some text to show that the reference links can follow later.

[arbitrary case-insensitive reference text]: https://www.mozilla.org
[1]: http://slashdot.org
[link text itself]: http://www.reddit.com

I'm an inline-style link

I'm a reference-style link

You can use numbers for reference-style link definitions

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).

Some text to show that the reference links can follow later.

## Images 
Here's our logo (hover to see the title text):

Inline-style: 
![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")

Reference-style: 
![alt text][logo]

[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"

Here's our logo (hover to see the title text):

Inline-style: alt text

Reference-style: alt text

## Code and Syntax Highlighting

Code blocks are part of the Markdown spec, but syntax highlighting isn't. However, many renderers -- like Github's and Markdown Here -- support syntax highlighting. Markdown Here supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers); to see the complete list, and how to write the language names, see the highlight.js demo page.

Inline `code` has `back-ticks around` it.

Inline code has back-ticks around it.

Blocks of code are either fenced by lines with three back-ticks ```, or are indented with four spaces. I recommend only using the fenced code blocks -- they're easier and only they support syntax highlighting.

```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```
 
```python
s = "Python syntax highlighting"
print s
```
 
```
No language indicated, so no syntax highlighting. 
But let's throw in a <b>tag</b>.
```

var s = "JavaScript syntax highlighting";
alert(s);
s = "Python syntax highlighting"
print s
No language indicated, so no syntax highlighting in Markdown Here (varies on Github). 
But let's throw in a <b>tag</b>.

Again, to see what languages are available for highlighting, and how to write those language names, see the highlight.js demo page.

## Tables

Tables aren't part of the core Markdown spec, but they are part of GFM and Markdown Here supports them. They are an easy way of adding tables to your email -- a task that would otherwise require copy-pasting from another application.

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 |

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

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
## Blockquotes 
> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

Quote break.

> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.

Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.

Quote break.

This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

## Inline HTML

You can also use raw HTML in your Markdown, and it'll mostly work pretty well.

<dl>
  <dt>Definition list</dt>
  <dd>Is something people use sometimes.</dd>

  <dt>Markdown in HTML</dt>
  <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>
Definition list
Is something people use sometimes.
Markdown in HTML
Does *not* work **very** well. Use HTML tags.
## Horizontal Rule 
Three or more...

---

Hyphens

***

Asterisks

___

Underscores

Three or more...

Hyphens

Asterisks

Underscores

## Line Breaks

My basic recommendation for learning how line breaks work is to experiment and discover -- hit <Enter> once (i.e., insert one newline), then hit it twice (i.e., insert two newlines), see what happens. You'll soon learn to get what you want. "Markdown Toggle" is your friend.

Here are some things to try out:

Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a *separate paragraph*.

This line is also a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the *same paragraph*.

Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a separate paragraph.

This line is also begins a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the same paragraph.

(Technical note: Markdown Here uses GFM line breaks, so there's no need to use MD's two-space line breaks.)

## Youtube videos

They can't be added directly but you can add an image with a link to the video like this:

<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" 
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>

Or, in pure Markdown, but losing the image sizing and border:

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)

Clone this wiki locally