Announcements and Chatter
Markdown Editing Basics for Forum Messages
Gravatar is a globally recognized avatar based on your email address. Markdown Editing Basics for Forum Messages
  Rick Strahl
  All
  Mar 29, 2016 @ 04:53pm

Since the new message board uses Markdown, here's a simple overview of some of the features of Markdown you can use when composing messages here.

What is Markdown

Markdown is very easy to learn and work with because it's basically plain text the way you'd expect it to work, with the addition of a relatively small set of markup 'operators' that allow you to easily add things like *italic* and **bold** or * line for bulleted text. You can also embed code blocks with syntax highlighting easily, which is important for a coding message board like this one.

Markdown also allows for raw HTML inside of a markdown document, so if you want to embed something more fancy than what Markdown's syntax can do you can always fall back to HTML. However to keep documents readable that's generally not recommended.

Basic Markdown Syntax

The following are a few examples of the most common things you are likely to do with Markdown while building typical documentation.

Bold and Italic

This text **is bold**. 
This text *is italic*.

This text is bold.
This text is italic.

Header Text

# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Line Continuation

Markdown understands basic line breaks so you can generally just type text as you normally do. However, Markdown treats single line breaks as spaces - only a double line break is considered a paragraph break.

In order to break text you need to either:

  • Use a double line break (paragraph break)
  • Add two spaces or a \ at the end of the line (soft line break)

By default Markdown adds paragraphs at double line breaks. Single line breaks by themselves are simply wrapped together into a single line. If you want to have soft returns that break a single line, add two spaces at the end of the line.

This line has a paragraph break at the end (empty line after).

Theses two lines should display as a single
line because there's no double space at the end.

The following line has a soft break at the end (two spaces at end)  
This line should be following on the very next line.

This line has a paragraph break at the end (empty line after).

Theses two lines should display as a single line because there's no double space at the end.

The following line has a soft break at the end (two spaces at end)
This line should be following on the very next line.

[Help Builder Web Site](http://helpbuilder.west-wind.com/)

If you need additional image tags like targets or title attributes you can also embed HTML directly:

Go the Help Builder site: <a href="http://west-wind.com/" target="_blank">Help Builder Site</a>.

Go the Help Builder site: Help Builder Site.

Images

Markdown supports linking images via a URL like this:

![Help Builder Web Site](https://helpbuilder.west-wind.com/images/HelpBuilder_600.png)

Help Builder Web Site

The editor here also supports embedding images by simply by pasting from the Clipboard, or by using the image icon on the toolbar to upload an image. Both of these upload the image to the server, and then link it in your message.

Block Quotes

Block quotes are callouts that are great for adding notes or warnings into documentation.

> ### @ icon-info-circle Headers break on their own
> Note that headers don't need line continuation characters 
as they are block elements and automatically break. Only text
lines require the double spaces for single line breaks.

(there's no space between the @ and the icon - used here to allow markdown to display)

Headers break on their own

Note that headers don't need line continuation characters as they are block elements and automatically break. Only text lines require the double spaces for single line breaks.

Fontawesome Icons

Help Builder includes a custom syntax for FontAwesome icons in its templates. You can embed a @ icon- followed by a font-awesome icon name to automatically embed that icon without full HTML syntax.

Gear: @ icon-cog Configuration 

note there's no space between the @ and the icon-cog - done here for display purpose

Configuration

Emoji

Emoji can be embedded into Markdown with Emoji shortcut text strings or common symbols like :-)

:smile: :sweat: :rage:
:-) :-( :-/

😄 😓 😡

😃 😦 😕

HTML Markup

You can also embed plain HTML markup into the page if you like. For example, if you want full control over fontawesome icons you can use this:

This text can be **embedded** into Markdown:  
<i class="fas fa-sync fa-spin fa-lg"></i> Refresh Page

This text can be embedded into Markdown:
Refresh Page

Unordered Lists

* Item 1
* Item 2
* Item 3
This text is part of the third item. Use two spaces at end of the the list item to break the line.

A double line break, breaks out of the list.
  • Item 1
  • Item 2
  • Item 3
    This text is part of the third item. Use two spaces at end of the the list item to break the line.

A double line break, breaks out of the list.

Ordered Lists

1. **Item 1**  
Item 1 is really something (no line break here)
2. **Item 2**  
Item two is really something else (two spaces after 'header' breaks)

If you want lines to break using soft returns use two spaces at the end of a line. 
  1. Item 1 Item 1 is really something (no line break here)
  2. Item 2
    Item two is really something else (two spaces after 'header' breaks)

If you want to lines to break using soft returns use to spaces at the end of a line.

Inline Code

If you want to embed code in the middle of a paragraph of text to highlight a coding syntax or class/member name you can use inline code syntax:

Structured statements like `for x =1 to 10` loop structures 
can be codified using single back ticks.

Structured statements like for x =1 to 10 loop structures can be codified using single back ticks.

Code Blocks with Syntax Highlighting

Markdown supports code blocks syntax in a variety of ways:

The following code demonstrates:

    // This is code by way of four leading spaces
    // or a leading tab

More text here

The following code demonstrates:

// This is code by way of four leading spaces
// or a leading tab

More text here

Code Blocks

You can also use triple back ticks plus an optional coding language to support for syntax highlighting (space injected before last ` to avoid markdown parsing):

```csharp
// this code will be syntax highlighted
for(var i=0; i++; i < 10)
{
    Console.WriteLine(i);
}
```    
// this code will be syntax highlighted
for(var i=0; i++; i < 10)
{
    Console.WriteLine(i);
}

Many languages are supported: html, xml, javascript, css, csharp, foxpro, vbnet, sql, python, ruby, php and many more. Use the Code drop down list to get a list of available languages.

You can also leave out the language to get no syntax coloring but the code box:

```cmd
robocopy c:\temp\test d:\temp\test
```
robocopy c:\temp\test d:\temp\test
© 1996-2024