Skip to main content

Introduction To Markdown

An Introduction to Markdown (Bonus Markdown Templates Included)

An Introduction to Markdown (Bonus Markdown Templates Included)

Basic Syntax Guide

An Introduction to Markdown (Bonus Markdown Templates Included)

Basic Syntax Guide

This topic is meant to give you a very basic overview of how Markdown works, showing only some of the most common operations you use most frequently. Keep in mind that you can also use the Edit menus to inject markdown using the toolbar, which serves as a great way to see how Markdown works. However, Markdown’s greatest strength lies in its simplicity and keyboard friendly approach that lets you focus on writing your text and staying on the keyboard.

What is Markdown

Markdown is very easy to learn and get comfortable with due it’s relatively small set of markup ‘commands’. It uses already familiar syntax to represent common formatting operations. Markdown understands basic line breaks so you can generally just type text.

Markdown also allows for raw HTML inside of a markdown document, so if you want to embed something more fancy than what Markdowns 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

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

This text is bold.
This text is italic.

Header Text

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

Header 1

Header 2

Header 3

Header 4

Header 5Header 6

Line Continuation

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.

markdown
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.

Links

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

Help Builder Web Site

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

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

Images

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

Block Quotes

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

markdown
> ###  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.
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.

markdown
Gear:  Configuration

Configuration

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:

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

This text can be embedded into Markdown:
 Refresh Page

Unordered Lists

markdown
* 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

markdown
1. **Item 1**  
Item 1 is really something
2. **Item 2**
Item two is really something else
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
  2. Item 2
    Item two is really something else

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:

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

markdown
The following code demonstrates:
    // This is code by way of four leading spaces
// or a leading tab
More text here

The following code demonstrates:

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

markdown
`` `csharp
// this code will be syntax highlighted
for(var i=0; i++; i < 10)
{
Console.WriteLine(i);
}
`` `
csharp
// 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:

markdown
`` `dos
robocopy c:\temp\test d:\temp\test
`` `
dos
robocopy c:\temp\test d:\temp\test

To create a formatted block but without formatting use the txt format:

markdown
`` `txt
This is some text that will not be syntax highlighted
but shows up in a code box.
`` `

which gives you:

text
This is some text that will not be syntax highlighted
but shows up in a code box.

If you found this guide helpful feel free to checkout my github/gists where I host similar content:

bgoonz’s gists · GitHub

Or Checkout my personal Resource Site:

Comments

Popular posts from this blog

Breaking Down Scope, Context, And Closure In JavaScript In Simple Terms.

Breaking Down Scope, Context, And Closure In JavaScript In Simple Terms. Breaking Down Scope, Context, And Closure In JavaScript In Simple Terms. “JavaScript’s global scope is like a public toilet. You can’t avoid going in there, but try to limit your contact with surfaces when you… Breaking Down Scope, Context, And Closure In JavaScript In Simple Terms. Photo by Florian Olivo on  Unsplash “ J avaScript’s global scope is like a public toilet. You can’t avoid going in there, but try to limit your contact with surfaces when you do.” ― Dmitry Baranowski Here’s another (much) more simple article I wrote on the subject: Closures In Javascript Answer A closure is a function defined...

links

links Absolutely Everything You Could Need To Know About How JavaScript TOC & Condensed Links **** **** **** **** **** 1 2 3 4 5 leonardomso/33-js-concepts *This repository was created with the intention of helping developers master their concepts in JavaScript. It is not a…*github.com Call stack - MDN Web Docs Glossary: Definitions of Web-related terms MDN *A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its…*developer.mozilla.org Understanding Javascript Function Executions — Call Stack, Event Loop , Tasks & more *Web developers or Front end engineers, as that’s what we like to be called, nowadays do everything right from acting as…*medium.com Understanding the JavaScript call stack *The JavaScript engine (which is found in a hosting environment like the browser), is a single-threaded interpreter…*medium.freecodecamp.org Javascript: What Is The Execution Context? ...

Bash Proficiency

Bash Proficiency In Under 15 Minutes Bash Proficiency In Under 15 Minutes Cheat sheet and in-depth explanations located below main article contents… The UNIX shell program interprets user commands, which are… Bash Proficiency In Under 15 Minutes Cheat sheet and in-depth explanations located below main article contents… The UNIX shell program interprets user commands, which are either directly entered by the user, or which can be read from a file called the shell script or shell program. Shell scripts are interpreted, not compiled. The shell reads commands from the script line per line and searches for those commands on the system while a compiler converts a program into machine readable form, an executable file. LIFE SAVING PROTIP: A nice thing to do is to add on the first line #!/bin/bash -x I will go deeper into the explanations behind some of these examples at the bottom of this article. Here’s some previous articles I’ve written for more advanced users. Bash Commands That Sa...