Kroger...

Markdown Tutorial

The following tutorial is designed for those who want to add documentation to the marketplace. For more details, see contributing documentation overview.

In This Tutorial

This tutorial covers the basics of the Markdown language and how to create and start write your first document.

Introduction to Markdown

Markdown is a lightweight markup language that allows for adding formatted elements to plain text documents. In other words, you can take your web documentation to the next level without any programming.

Create a Document

To create your first Markdown document, open your code editor and create a file with a .md extension. You can add a title to your document by placing a single number sign in front of your title with a space between them.

  Each document should only have one title.

# Your Title 

Rendered as:

Your Title

Adding Sections and Text

To add section headers within your document, use two number signs followed by the section name with a space between the two. You can create sub-sections within that section by placing three number signs in front of the sub-section name.

# Your Title

## Section

### Sub-section

Rendered as:

Your Title

Section

Sub-section

Now that there are sections in the document, you can begin adding plain text. To italicize a word or phrase, place an asterisks on both sides of the word or phrase. The same can be done for bolding a word or phrase by adding two asterisks on both sides.

# Your Title

## Section

This is an example of text in a document. Here is an *italicized* word. Here is a **bold** word. 

### Sub-section

Rendered as:

Your Title

Section

This is an example of text in a document. Here is an italicized word. Here is a bold word.

Sub-section

Adding Elements

While this tutorial does not cover all of the supported markdown features, this section shows the three most common elements.

Lists

To make a list in markdown, you place each item on a new line below the previous item with the proper syntax.

For a bulleted list, place an asterisks in front of each item with a space between them.

* Item One 
* Item Two 
* Item Three

Rendered as:

  • Item One
  • Item Two
  • Item Three

For a numbered list, place a number in front of each item with a space between them.

1. Item One 
2. Item Two 
3. Item Three

Rendered as:

  1. Item One
  2. Item Two
  3. Item Three

Code Samples

To include a code samples in documentation, you place three back-ticks with the code language before the sample, and three back-ticks following the code.


```javascript
var s = "javascript syntax highlighting";
alert (s);
```

Rendered as:

var s = "javascript syntax highlighting";
alert (s);

Short snippets of code can also be placed inline with plain text by placing a single back-tick on both sides of the snippet.

A `code snippet` inline with plain text.

Rendered as:

A code snippet inline with plain text.

Tables

To create a table in your documentation, you place vertical bars on both side of the information with three hyphens under the first row. The first row above the hyphens create the column titles. The information below the hyphens are the data rows.

| column title | column title | column title |
|     ---      |     ---      |     ---      |
|     row      |     row      |     row      |
|      1       |      2       |      3       |

Rendered as:

column title column title column title
row row row
1 2 3

Next Steps

Now that you have a basic understanding of the Markdown language, check out the Markdown Cheat Sheet for all Markdown elements supported by the marketplace.