Insights

Markdown for Sitecore: Authoring Cheatsheet

A cheatsheet to quick content creation

Markdown is a syntax designed for the web to easy-to-read and easy-to-write. It's not intended to replace HTML, but it focuses on replacing subset of frequently used HTML tags with natural manner of writing. As John Gruber wrote "HTML is a publishing format. Markdown is a writing format."

Additional Links:

Markdown for Sitecore implements Markdown and nearly all the enhanced features in Markdown Extra.

Markdown Features

Headings

Creating the <H1> family of markup.

H1 w/ underline
===========

### H2 w/ dashed-underline

# H1 
## H2 
### H3 
#### H4
##### H5
###### H6

Paragraphs

Paragraphs are created on line returns with spaces. Just like you'd expect

I really like Sitecore.

I really like not typing HTML.  Imagine that.

Strong & Emphasis

In the modern web we defer to strong and em tags to give extra meaning to text. In a simpler time we called them bold and italtics.

Enclose content in matching asterisks or underscores for <em>'s and double asterisks or underscores for <strong>'.

Be sure *italicize* this word instead of using air quotes.  What do you mean _air quotes_?

Now that is a **bold** statement.  I really __mean it__.

Links

Links can be relative or absolute.


I love when [multiple words are used a link](http://getfishtank.ca/).

When I'm linking within our site I use [relative urls](/blog).

They can also use links by reference which allows to treat them as variables.


I want [this to link to google][googleurl] and [this too](googleurl).

Put this on it's own line anywhere in your Markdown field.

[googleurl]: https://www.google.com/

Markdown for Sitecore also allows to specify some additional properties for how to handle your links. These are configured in the Source property of Markdown field used in Sitecore.

Attribute Description
newwindowforexternallinks External links are assigned target="_blank"
newwindowforlocallinks Site links are assigned target="_blank"
nofollowlinks Adds a rel="nofollow" to links

Images

The <img /> can be expressed inline or by reference just like links.

![Alt text for the image](http://getfishtank.ca/gone-fishing.jpg "Optional title")

![Relative Image](/gone-fishing.jpg)

![Image By Referenece][Logo]

[Logo] http://placehold.it/250x200
[Banner] http://placehold.it/800x300 "Optional title"

Markdown for Sitecore also allows to declare a css class to be added to all images with a title. This is configured using the Source property on the field.

Attribute Description
htmlclasstitledimages CSS class applied to title images (requires extra mode)

Markdown Extra Features

To enable Markdown Extra features the Source of the Markdown field must contain extramode=1. See the Markdown for Sitecore setup documentation for more info.

Markdown Inside HTML

This allows you to use Markdown syntax inside of html blocks should it suit your fancy.

<p markdown="1">
  I have a **strong** opinion about this.
</p>

Code Blocks

Writing some code or something technical? Make sure the number of ~ match above and below.

~~~~
public void HighFive(Person peeps) { // execute high five }
~~~~

And it will output:

<pre><code>
public void HighFive(Person peeps) { // execute high five }
</code></pre>

Tables

Tables! Tables! Tables! One of my least things to create in HTML is now pretty simple.

Traditional table below.

Column A|Column B|Column C
======|====|======
Yes|No|No
No|Yes|No
No|No|No

Use the colons underneath row headings to align left, center & right.

Left Aligned|Center Aligned|Right Aligned
:===========|:============:|=============:
Yes|No|No
No|Yes|No
No|No|No

Some extra unnecessary formatting to make it look more like a table

|Column 1|Column 2|
|========|========|
|One     |Two     |

Defintion Lists

While they're not commonly used, definitions lists are a great fit for certain content... like lists of definitions.

There must be an empty line between definitions. There must be a space following the colon.

### Favorite Fruits 

Apple
: Crunchy fruit that grows on trees.

Orange
: Delicious sweet fruit.  Ironically not found in orange juice.

A new paragraph about fruit.

Abbreviations

Create an abbreviation anywhere in your Markdown field and any uses of it in your content will get transformed into the <abbr> tag.


*[GSA]: Google Search Appliance

The functionality of the GSA is extremely limited when compared to Coveo.

This gets transformed into:


<p>The the functionality of the <abbr title="Google Search Appliance">GSA</abbr> is extremely limited when compared to Coveo.</p>

More Documentation

For additional examples please see Daring Fireball's and Markdown Extra's documentation. Please leave your thoughts in the comments. Thanks!

👋 Hey Sitecore Enthusiasts!

Sign up to our bi-weekly newsletter for a bite-sized curation of valuable insight from the Sitecore community.

What’s in it for you?

  • Stay up-to-date with the latest Sitecore news
  • New to Sitecore? Learn tips and tricks to help you navigate this powerful tool
  • Sitecore pro? Expand your skill set and discover troubleshooting tips
  • Browse open careers and opportunities
  • Get a chance to be featured in upcoming editions
  • Learn our secret handshake
  • And more!
Sitecore Snack a newsletter by Fishtank Consulting
 

Meet Dan Cruickshank

President | Sitecore MVP x 11

Dan is the founder of Fishtank. He's a multi-time Sitecore MVP and Coveo MVP award winner. Outside of technology, he is widely considered to be a top 3 father (routinely receiving "Father of the Year" accolades from his family) and past his prime on the basketball court.

Connect with Dan