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

Example Output
*emphasis* emphasis
**bold** bold
`inline code` inline code

By indenting your content by at least 4 spaces, you can create a code block. For extensive examples of adding code samples, see Code blocks.

//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:

Image Example

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:

Scaled Image Example

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:

Column Heading Column Heading Column Heading
Data 1 Data 2 Data 3
Data 4 Data 5  
Data 6    

You can read more about table syntax here.

Advanced Syntax

Code blocks

Code blocks can also be defined using Rouge formatting. View the .md file of this template for examples.

For inline code, surround the content with single backticks: `example`.

For blocks of code, surround content with 3 backticks and an optional supported language.

Example:

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

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:

{%
include note.html
type='info'
content='This is a note callout. You can use these to provide important information on a topic.'
%}

Output:

This is a note callout. You can use these to provide important information on a topic.

Warnings:

{%
include note.html
type='warning'
content='This is a warning callout. This can be used to convey important information to the reader.'
%}

Output:

This is a warning callout. This can be used to convey important information to the reader.

Tips:

{%
include note.html
type='tip'
content='This is a tip callout. These can be used to provide useful tips or interesting facts on a topic.'
%}

Output:

This is a tip callout. These can be used to provide useful tips or interesting facts on a topic.

Collapsible content

You can use the collapsible content tag for large code samples in your content. Any content in a collapse is blocked from searching on page.

The {% collapsible %} tag must be preceded by a blank line.

Example:

  <div class="collapsible">
    <b class="collapsible-title">This is the title </b>
    <div class="collapsible-content"><p>Markdown content goes in this area.</p>
</div>
  </div>

Output:

This is the title

Markdown content goes in this area.