Tips and tricks that you probably don't know with the Github Markdown in readme.md files

Tips and tricks that you probably don't know with the Github Markdown in readme.md files

Markdown is a lightweight and easy-to-use syntax for styling all forms of writing on the GitHub platform.

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:

  • Gists
  • Comments in Issues and Pull Requests
  • Files with the .md or .markdown extension

Embedding images

There are 2 ways to add images in a readme.md file :

Markdown

Use the following syntax to add an image.

![Image of Yaktocat](https://octodex.github.com/images/yaktocat.png)

HTML

Use the following syntax to add an image using html.

<img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" title="Github Logo">

Fixed width or height for an image

To give fixed dimensions to an image use the width and height attribute. (Remember that using html will be valid only for Github) :

<img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" width="256" height="256" title="Github Logo">

Centering an image

To center an image, we are not going to use traditional markup instead we are going to use plain html :

<p align="center">
  <img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" width="256" title="Github Logo">
</p>

Highlighting a block of code

To highlight a piece of code, wrap your code inside 6 quotes followed by the name of the language. 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. Which languages are supported and how those language names should be written will vary from renderer to renderer.

```javascript
function hello(name) {
  console.log(name);
}
```

Emojis

The Github Markdown support embedded emojis, visit the emojis cheatsheet to see a complete list of emojis.

:kissing: :laughing: :neutral_face:

Emojis markdown

Tasks lists

You can create a todo like list using markdown which will be converted to a checkbox list. 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.

- [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported
- [x] list syntax required (any unordered or ordered list supported)
- [x] this is a complete item
- [ ] this is an incomplete item

Github progress list

Embedding Youtube Videos

Pitifully, this is not possible till the date. However there's a little trick that allow you to create an image and redirect the user to the youtube video page.

Just replace the YOUTUBE_VIDEO_ID_HERE for the id of your video. An image will appear and will redirect automatically to the video in youtube.

<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 use pure markdown (without dimensions):

[![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)

Do you have another tip that could be useful and we don't have in this collection ? Please share it with us in the comment box.

Become a more social person