The format of blogs has always created a gap between writers and developers. In light of those emerging conflicts, we are excited to announce an easy way to combine the layouting needs of the writer as well as the technical requirements for developers. Have a look into the world of Markdown.

Markdown was certainly not created with the average content creator in mind. As a simplified version of markup languages like HTML, John Gruber created Markdown language in 2004 probably with fellow-bloggers in mind. His goal was to enable people to “to write using an easy-to-read, easy-to-write plain text format, and optionally convert it to structurally valid XHTM (or HTML)”.

Arturo Herrero 2 summarises the key features of markdown as follows:
+ Easy to use: The syntax is very simple and you can achieve it fast.
+ Fast: It takes you less time to craft HTML tags when using markdown.
+ Clean: The translation of Markdown into HTML is errorless.
+ Flexible: You can use it when you write for the web, for emails, or when you create presentations.
+ Portable: You can use any text editor in any operating system to edit Markdown.
+ Made for writers: Writers can focus on writing.

So what’s in it for the content creator or – even going one step further – the content strategist? Don’t they just jot down ideas and copy in word or email and hand it over to the web guys to publish it online? And if they have to engage with a CMS (Content Management System) themselves, don’t they get a WYSIWYG (what you see is what you get) interface? While both may be the case, let’s take a look behind the (web) scenes.

All Text is Formatted – But Does it Look as Intended?

Formatting in Word has its drawbacks. Many times, people do not define a headline for example, they just use a bigger font and maybe make the text bold. They call it a headline but it is none. It just looks like one at first sight. Turning such passages into useful HTML will be troublesome. This also goes for WYSIWYG interfaces. They cannot read your mind – or your Word document. Copy and paste some Word snippet into a WYSIWYG field and then take a look at the HTML code behind it. Brace yourself, it’s going to be ugly! With Markdown this does not happen. It’s easily turned into nice and clean HTML code.

Make Sure You Really Get What You See

As simple as Markdown is, it is also unambiguous. You clearly define a headline, a link, a quote etc. without using different font sizes and formats. No wonder it is recommended even if you don’t write for the web:

It’s amazingly useful just as a writing language. Even if you don’t have to convert to HTML at all, it’s still an appealing way to format plain text without having to deal with Microsoft Word or another goofy rich-text editor. (Jon Mitchell)

The beauty of it lies in its simplicity and its speed. As soon as you have learned the basics, you will be able to format your copy with just a few keyboard strikes. Afterwards you can easily turn your document into different formats like HTML, PDF or EPUB.

Three ways to use Markdown

Markdown could be used for different purposes. We want to introduce you three everyday possibilities to make your writing easier.
+ Documentation: Everyone who works in software development knows the difficulty of working on the same project and ensure a running communication with other developers. If one developer is adding comments to his code, another one should be able to easily read and understand it. Using a Word document would exaggerated for this maner. As developers are known to love their text plain but still with simple structure, markdown is an optimal way to ensure a clear documentation.
+ To-Do-List: Using a personal task manager like Things makes it easier to manage your to-does. If you want to make further remarks to your task, you can add additional notes. With increasing information density, a structure will be helpful. Again, we recommend using markdown to structure your notes in an easy way.
+ Blogs: Markdown was invented to convert plain text into HTML without having programming skills. It allows writers to focus on the content and not spending time thinking about the layout of the text. Using simple markdown formats as you can find below, makes it possible to convert it afterwards into HTML. Therefore, markdown is an advantage for the writer as well as for the developer who can easily proceed with the structure of the text.

The Easy Way to Learn and Use Markdown

Admittedly Markdown may look intimidating at first sight. Use this Cheat Sheet to get off the ground quickly. Of course, you can just start typing on Notepad or other text editors. Markdown writers such as Typora or iA Writer (Mac only) are recommended though. Typora will turn your Markdown into a formatted copy as you go, making it easier for you to imagine the result when transforming the Markdown into other formats. iA Writer structures your copy nicely. There are also online solutions available like Dillinger.

Markdown’s Formatting Syntax – Basics 8,9

Paragraphs

For paragraphs no intendation with spaces or tabs is necessary. Paragraphs consist of one or more consecutive lines that are separated by one or more blank lines. In HTML paragraphs are indicated by <p> </p>.

Headers

Setext-style Headers

When you “underline” the header text with equal signs (=), you create <h1> </h1> and by using hyphens (-) <h2> </h2>.

Header 1
=======
Header 2
--------

Atx-style Header

The number of hash marks (1-6) that you put at the beginning of the line defines the level of the respective header (<h1> </h1> to <h6> </h6>).

# Header 1
## Header 2

Emphasis

You can use asterisks (*) and underscores (_) for spans of emphasis. Use double asterisks (**) and double underscores (__) for spans of strong emphasis. The respresentation in HTML is <em> </em>.

*emphasis* or _emphasis_
**strong emphasis** or __strong emphasis__

Lists

Unordered Lists

For unordered lists displayed with bullet points, you can choose one of three options for the list marker.
It does not matter if you use asterisks (*), pluses (+) or hyphens (-), the output in HTML will always be the same.

HTML Output
<ul>
    <li>List item 1.</li>
    <li>List item 2.</li>
    <li>List item 3.</li>
</ul>
Mardown Input
* List item 1
* List item 2
* List item 3
or
+ List item 1
+ List item 2
+ List item 3
or
- List item 1
- List item 2
- List item 3

Ordered Lists

Use regular numbers followed by a period as list markers to create an ordered (numbered) list.

HTML Output
<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>
Markdown Input
1. List item 1
2. List item 2
3. List item 3

Lists with Multi-Paragraph List Items

&lt;p&gt;tags for list item text are created in HTML, when you put blank lines between the items. Indent the paragraphs by 4 spaces or 1 tab to create multi-paragraph list items.

HTML Output
<ul>
    <li>List item 1.Multiple paragraphs.</li>
    <li>List item 2.</li>
</ul>
Markdown Input
+ List item 1.
Multiple paragraphs.
+ List item 2.

Links

You can create inline-style or a reference-style links by delimiting the text you want to turn into a link with square brackets.

Inline-style Links

Use parentheses directly after the link text to turn it into an inline-style link.

HTML Output

This is an <a href="http://example.com/">
example link</a>.

Markdown Input
This is an [example link](http://example.com/).

Reference-style Links

You can also define the name of a link elsewhere in the document and then refer to this name in the text.

HTML Output

This is a guide on <a href="http://en.wikipedia.org/wiki/Markdown">Markdown</a>.

Markdown Input
This is a guide on Markdown [Markdown][1].
[1]: http://en.wikipedia.org/wiki/Markdown "Markdown"

 

If you want to add title attributes to your links, follow the instructions provided on Daring Fireball.

Images

For images, you can also choose between inline- and reference-style. However, the HTML output is always the same. Titles are optional.

HTML Output
<img title="Title" src="/path/to/img.jpg" alt="alt text" />
Inline-style Markdown Input
![alt text](/path/to/img.jpg "Title")

Reference-style Markdown Input
![alt text][id]
[id]: /path/to/img.jpg "Title"

Code

When you wrap text in backtick quotes in regular paragraphs, you can create code spans. It makes it easy to write about code samples because otherwise ampersands (\&) and angle brackets (\< and \>) are translated into HTML . For inline code, backticks () are used to fence the code. It is recommended that blocks of code are wrapped by lines with three backticks (```) because only such code blocks support syntax highlightning.
<pre><code>Inline
code` is wrapped by backticks.

 

 

/adam-p/markdown-here/wiki/Markdown-Cheatsheet#blockquotes
<!–stackedit_data:
eyJoaXN0b3J5IjpbLTIwMTM1OTU4MDRdfQ==
–>

Related Posts