Basic template

Overview

Introductory text that gives an overview of the topic you will be writing about.

The purpose of this page is to provide you with a pre-formatted template and useful markdown references to help you get started writing docs.

You can start off by editing the local version of this file using markdown language (and HTML where needed). Then, create a Pull Request to have your contribution reviewed by the DevDocs team.

Basic Markdown Syntax

Below are some basic examples of what you can do with markdown.

Text Effects

By indenting your content by at least 4 spaces, you can create a code block.

//This is a code block!
print "Hello World!";

For more examples of basic markdown please follow this link.

Lists

Lists are useful for organizing and displaying related items. Below are examples of a bulleted list and an ordered list.

Bulleted List:

* List Item 1
* List Item 2
* List Item 3

Output:

• List Item 1
• List Item 2
• List Item 3

Ordered List:

1. First Step
2. Second Step
3. Third Step

Output:

1. First Step
2. Second Step
3. Third Step

Images

Please add any images you may need to the common/images directory.

Once the image is added, you can use it in your documentation:

Example: ![Image]({{site.baseurl}}/common/images/install_cygwin.png)

Output:

You can even scale the image if it is too large:

Example: ![Scaled Image]({{site.baseurl}}/common/images/install_cygwin.png){:width="446" height="246"}

Output:

Tables

Tables can be useful for displaying different kinds of data in an organized way.

Example:

<!-- Basic Markdown Table Syntax -->
| Column Heading | Column Heading | Column Heading |
|----------------|----------------|----------------|
| Data 1         | Data 2         | Data 3         |
| Data 4         | Data 5         |                |
| Data 6         |                |                |

Output:

You can read more about table syntax here.

Advanced Syntax

Code blocks

Code blocks can also be defined by surrounding the block of code with ~~~ which can be seen in the table example.

For highlighted code blocks use the highlight Liquid tag.

Example:

{% highlight html %}
<div class="container">
  <h4 class="title">Title</h4>
  <div class="content">
    <p>Paragraph content.</p>
  </div>
</div>
{% endhighlight %}

Output:

<div class="container">
  <h4 class="title">Title</h4>
  <div class="content">
    <p>Paragraph content.</p>
  </div>
</div>

Callout Messages

Use these messages to highlight or bring attention to a piece of information.

Notes:

<div class="bs-callout bs-callout-info">
  <p>This is a note callout. You can use these to provide important information on a topic.</p>
</div>

Output:

Warnings:

<div class="bs-callout bs-callout-warning">
    <p>This is a warning callout. This is can be used to convey important information to the reader.</p>
</div>

Output:

Tips:

<div class="bs-callout bs-callout-tip">
  <p>This is a tip callout. These can be used to provide useful tips or interesting fact on a topic.</p>
</div>

Output:

Collapsible content

You can use the collapsible content tag to shorten your documentation.

Example:

{% collapsible This is the title %}
Markdown content goes in this area.
{% endcollapsible %}

Output: