• Print
  • Share
  • Dark
    Light

Markdown Guide

  • Updated on 13 Feb 2019
  • 6 minutes to read
  • Contributors

Markdown Formatting Style

Markdown-Guide.png

In general terms, Markdown is a short-hand syntax that can be used to easily convert text to HTML.

If you are not familiar with Markdown, you just need to learn few basic syntax to get started with using Markdown.

Headings (H2, H3, H4)

To create Headings (H2, H3, H4), precede text with the hashtag (#) symbol.

Syntax Output
## This is Heading 2 image.png
### This is Heading 3 image.png
#### This is Heading 4 image.png
Note: The number of hashtags (#) determines the heading level.

Paragraph Styling (Bold, Italics, Strikethrough)

You can add the following types of styling to a normal paragraph text —

Style Syntax Example Shortcut Key
Bold ** ** The text is in bold formatting Ctrl+b or Cmd+b
Italics * * (or) _ _ The text is in italics. This is also in italics Ctrl+i or Cmd+i
Strikethrough ~~ ~~ The text is in strikethrough

Lists

You can choose either Ordered or Unordered list.

List Syntax Output
For Ordered list, precede text with a Numeric value. This is ordered list #1
This is ordered list #2
This is ordered list #3
  1. This is ordered list #1
  2. This is ordered list #2
  3. This is ordered list #3
For bulleted unordered list, precede text with * * This is unordered list #1
* This is unordered list #2
* This is unordered list #3
  • This is unordered list #1
  • This is unordered list #2
  • This is unordered list #3
Note
Ordered list refers to a list of items for which order of the series should remain constant.
Unordered list refers to a list of related items for which order of the series can be altered.

Blockquote Text

You can refer a quote or highlight an important point by using the '>' before the line.

> This will quote the entire line of text

The output will be like:

This will quote the entire line of text


Insert horizontal line

You can enter a horizontal line to divide two lines of text by using the three asterisk symbols.

Syntax:
***
Shell

Output:


Shell

Insert table

You can create a table by separating two rows of text with the hyphen (-) and two columns of text with the pipe (|) symbol.

Row Header 1 | Row Header 2 | Row Header 3 |
------------ | ------------ | ------------ |
R1C1 content | R1C2 content | R1C3 content |
R2C1 content | R2C2 content | R2C3 content |

The output table format will be like:

Row Header 1 Row Header 2 Row Header 3
R1C1 content R1C2 content R1C3 content
R2C1 content R2C2 content R2C3 content

Insert image

To insert images into your article,

Syntax:
![Image Alt Text] (http://linktoyourimage/image.png){height="" width=""}

Note
You can alter the height and width of the image by providing the values in pixels. Example: height="600px" width="400px".

Output

D360 banner.png

You can also use the "Insert Image" option on the editor to add an image to your documentation. This will pop open a window where you can either upload a file or provide a link to a file.

Editor - Insert Image.png


Insert video

To embed videos into your article, enter the markdown text as shown below

![Video Alt Text](http://yourvideourl/){height="" width=""}
Note
You can alter the height and width of the video by providing the values in pixels. Example: height="600px" width="400px".

The output will be like:

You can alter the height and width of the video by providing the values in pixels. Example: height="600px" width="400px".

You can also use the "Insert Video" option on the editor to embed a video to your documentation. This will pop open a window where you can provide the video URL.

Editor - Insert Video.png

YouTube and Vimeo
Document360 supports embedding videos from YouTube, Wistia and Vimeo.

Insert link

To add a link to a particular text, simply add the text to be hyperlinked within [ ] and then add the URL within ( ).

I am hyperlinking [this text](https://document360.io)

The output will be like:

I am hyperlinking this text

You can also use the "Insert Link" option on the editor to insert links on your documentation. This will pop open a window where you can provide the link URL and an Alt text.

Editor - Insert Link.png


Insert codeblock

You can wrap your code with 3 backticks (). Additionally, you can specify the language after the first 3 backticks which will automatically syntax highlight the code.

HTML

<h1>This is heading 1</h1>
<b>This is bold text</b>

CSS

a.cta {
border: 1px;
}

PowerShell

New-Alias -Name utd -Value Update-TypeData -Scope Global

Codeblocks for specific language

Markdown coverts text with four leading spaces into a code block; Add an optional language identifier and your code will get syntax highlighting.

For example, to syntax highlight Ruby code:

```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```

Output

require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html

For example, to syntax highlight Javascript code:

function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ` class="${cls}"`;
  } catch (e) {
    /* handle exception */
  } 
export  $initHighlight;

Information callout

You can use this feature to add specific information that users need to keep in mind when reading the documentation. Simply add @(Info) followed by a title for the information message in ( ) and the content within the second ( ).

@(Info)(your title goes here)(your content goes here)

The output will be like:

Information
This is an information content.

Warning callout

You can use this feature to add any important info that users need to keep in mind when reading the documentation. This is best used for product documentation when you want to alert users about some specific operation.

Simply add @(Warning) followed by a title for the information message in ( ) and the content within the second ( ).

@(Warning)(your title goes here)(your content goes here)

The output will be like:

Warning!
This is a warning information for the readers.

Error callout

You can use this feature to add any error information or error code details in the product. Simply add @(Error) followed by a title for the information message in ( ) and the content within the second ( ).

@(Error)(your title goes here)(your content goes here)

The output will be like:

Error!
Details about the error message.

Scroll on

Click the Scroll on link to let the Markdown editor and the preview pane to scroll simultaneously. This will give you a real-time preview of the content as you type in the editor.

Scroll-on.png


Splitter

You can use the splitter icon to view only the Markdown editor, or both the editor and preview pane. Click the > to expand the Markdown editor to the full screen view. Click the < to view the preview pane alongside the Markdown editor.

Splitter.png

Markdown shortcut

These appear at the bottom left hand side of the editor to give you some shortcuts you can use.

Shortcut.png

Was this article helpful?