Markdown

Tutorial

Images

Use images inside repo

Refer to images with respect to the location of the markdown file in your Github repo.

In this example there is a images/ folder right next to the markdown file which references it:

![](images/ios_install_step01.png)

Arrange/Resize images

Use html to center and resize images:

<div align="center">
  <img src="https://my_image.png" width="520" alt="Graphpack">
</div>

Result:

The entire README of this example link.

Code frame

• Carbon
• https://browserframe.com/

Mock screens

• Browser window mock: Screely
• Phone mocks: mockupphone.com

Better: Use command line tool dframe, e.g. dframe myimage.png --frame "Apple iPhone X Black" (or just to dframe myimage.png and choose a frame).

Links to internal anchors

Just one # for all heading sizes, no space between # and anchor name, anchor tag names must be lowercase, and delimited by dashes if multi-word.

Example:

[click on this link](#my-multi-word-header)

### My Multi Word Header

How to compile markdown to html in the console:

There are two possibilities:

1. Type the following in the console:

   md file.md > file.html

2. Write the document in Vim and then type

   backlash ( \ ) + md

   This will transform the entire text into hmtl, i.e. add html syntax

3. That’s it!