menu

Introduction to Markdown

Everything you need to know to start your journey with Markdown.

What is Markdown?

Markdown is a markup language used to format documents of all types, created by John Gruber and Aaron Swartz in 2004, today it is one of the most popular languages ​​among programmers.

According to Wikipedia:

photo Definition of Markdown from Wikipedia
NOTE: A markup language is composed of a specific set of tags or symbols used to correctly apply stylization to content, the most popular ones are undoubtedly HTML, XML, and Markdown.

The image below shows a file formatted with Markdown using the Sublime Text editor.

photo Example of Markdown formatting in Sublime Text

A Markdown file is typically composed of plain text, is easy to intuitively understand and doesn't have all that HTML markup polluting the essential content.

NOTE: MD is short for Markdown.

With Markdown you can smilingly add formatting to your documents conveniently using simple markup symbols.

It's critical to carefully note that Markdown formatting is different from the formatting used by WYSIWYG editors.

NOTE: WYSIWYG stands for "What You See Is What You Get". Basically, the formatting of the content happens in real time, that is, it's visible immediately. To learn more you can read this Wikipedia article.

For example, in Microsoft Word, which is a WYSIWYG editor, text formatting occurs when selecting a certain content and pressing a specific button, a key combination or clicking on some menu option.

photo Microsoft Word Window - WYSIWYG editor

In Markdown, formatting is applied using symbols such as the hash #, the asterisk * and the underscore _.

This symbology is used by the Markdown processor to know which words / phrases should be formatted when converting your file to HTML.

For example, **I want this text to be bold** and _this text is in italics_

Too confusing? Let's simplify it a little bit.

When you surround the content with two asterisks ** you emphasize it in bold, in the second example, we used the underscore _ character to apply italics to the text.

How to edit a Markdown file

A Markdown file is nothing more but text, so any simple text editor is enough for the task.

photo Editing Markdown document in Notepad.

However, it is interesting to take into account:

  • An editor that allows you to convert the Markdown document to another format.
  • An editor that can highlight Markdown syntax.
  • An editor that shows the conversion to HTML in real time.

The good news is that:

  • There are several Markdown applications for various operating systems, including, for Windows, for Linux, for Android and even, for iOS.
  • When it comes to the Web, things get even better, several sites offer free Markdown applications for you to edit your documents online, and many have a real-time converter, that is, as you type the application converts Markdown to HTML.
photo Side by side text editors: Notepad++, Sublime Text & Visual Studio Code.
NOTE: It is worth remembering that Markdown formatting is extremely simple, therefore, a document formatted with this language, is still readable.

Markdown vs WYSIWYG

If a WYSIWYG editor (which offers real-time formatting) is extremely convenient, why should I use Markdown?

photo Comparison between Markdown formatting and WYSIWYG formatting.

If using a WYSIWYG editor I can press a button and have the formatting I want, why am I going to type a document with Markdown markup?

Let's look at some reasons to use Markdown:

  • Markdown can be used to create almost any type of document, whether it's websites, books, presentations, e-mails, technical documentation and more.
  • Markdown's portability is exceptional. Because it is a plain text document, it can be edited in any text application. If we contrast with Microsoft Word, the .docx format is proprietary and needs a specific program to be opened, which is not the case with the .md file.
  • Freedom to choose which program to use when editing your documents, an .md file can be edited anywhere.
  • No matter what operating system you use, Windows, Mac or Android, Markdown is supported.
  • Have your document accessible even in the event of a catastrophe. Does your favorite text editor no longer work? Has support ended? Did the program become paid? No problem, just choose any other text editor and continue editing and accessing your document, which is extremely important for files such as technical documentation, books and TCCs.
  • The giant Markdown community has made it accessible on a variety of sites as a standard language for formatting posts. Github and Reddit are examples of great sites using Markdown.
  • A large number of people already use Markdown, so your formatted documents will be understood by more and more people.

Practicing

The best way to learn is practicing!

It is interesting to have a Markdown editor available while learning the language syntax.

The quickest way to start practicing Markdown is to use online editors. With web applications you don't need to download anything, just go to the website and start editing your .md file.

photo Online editors, StackEdit, Dillinger and Editor.md

StackEdit, Dillinger and Editor.md (Markeditor) are good options to start with.

NOTE: Open one of the online editors in another tab of your browser and take the opportunity to train the Markdown syntax in real time.

StackEdit

The StackEdit editor is one of the most complete applications. In addition to the editor, it also provides a real-time converter that renders HTML and shows the result in the right panel.

photo Markdown StackEdit editor web interface

You can see more information about the StackEdit editor in the tools section.

Dillinger

Dillinger has a very simple interface, but it offers several options for editing your Markdown document. In addition to real-time conversion you can also export the file to HTML and PDF formats

photo Markdown editor - Dillinger web interface

For more information on Dillinger click here.

Editor.md (Markeditor)

Editor.md is an open source tool, has an MD to HTML converter in real time and buttons that allow you to create a Markdown element with just one click.

photo Markdown editor - Editor.md web interface

Now what?

After gaining more experience, you can download an application for your operating system and start editing documents offline.

In the tools section you will find an extensive list of applications with instructions on how to use them, in addition, of course, information on compatibility with Markdown elements.

Well, now that you have an editor available to practice Markdown let's understand how the conversion, from one format to another, works.

How to Convert a Markdown File

Let's understand the procedure used by Markdown applications to convert your .md file to another format, usually HTML or PDF.

photo How to Convert a Markdown File

The simplicity of Markdown

How do you identify a Markdown file? By the extension, correct? Usually .md or .markdown.

photo Markdown file extensions

A Markdown file is plain text, has no formatting, is neither an encrypted file nor a compiled file.

NOTE: This simplicity allows programs to analyze your text content and look for symbols that identify Markdown elements.

Several Markdown applications, in addition to the editor, also have an integrated converter. The converter is responsible for translating the Markdown syntax into another format.

photo Files generated from formatted Markdown

How the conversion works

The Markdown converter uses a Parser to scan the file content searching for tags compatible with Markdown. Found any? Cool, now, it checks for a match, that is, a similar markup in the output format, for example, an HTML tag.

Below you can see an example, side by side, comparing the Markdown formatting syntax with the HTML tag.

photo Comparison table between Markdown & HTML syntax.

Note that the HTML format is one of the most used when it comes to converting Markdown. Your file converted to HTML can be viewed in any web browser such as Google Chrome, Mozilla Firefox and Microsoft Edge.

The image below shows how the conversion process takes place, the simplified version, at least.

photo Simple diagram of how Markdown is converted to HTML.
NOTE: It is important to note that, in a more robust application, the components can be separated, even, they can be independent of each other. The editor, the converter, the parser, etc. The image above is just a simple representation of how the process occurs.

Let's summarize the conversion in four steps.

  • First we have to create a Markdown file, for that, we add the extension .md or .markdown when saving the document. For editing, any text editor will do the job.
  • Then, we load the file into some Markdown application.
  • The time has come to convert to another format, in our case, HTML. In this step, an application dedicated to Markdown is essential.
  • View the conversion result. If it's HTML, just load the file in a web browser.

Some points should be highlighted.

  • This procedure may vary a lot depending on where you're editing the Markdown file.
  • When we talk about simple editing, that is, using any generic editor, these steps are more evident.
  • In the case of online editors such as Dillinger, StackEdit and Editor.md, there is a merging of steps 2,3 and 4 directly into the graphical interface of these applications.

Using Markdown

Ok, Markdown is simple, easy to learn and compatible with "everything", but, exactly what types of documents can I create with this markup language?

Right away, we can say that the web content creation is the most popular way of using Markdown. Not only in generating HTML pages, but also when creation and editing posts of all types, from simple comments on forums to writing important technical documentation.

photo Reddit posting using Markdown

You can also format task lists, email messages, shopping lists and much more.

Below you can see some examples of documents that can be created using Markdown.

Websites

John Gruber and Aaron Swartz developed Markdown thinking about the Internet, so creating content for the web has become one of the biggest attractions of the language.

Many applications, compatible with Markdown, convert your content automatically to HTML.

photo Automatic conversion from Markdown to HTML using an online editor

You can create complete websites using Markdown formatted files. If that's what you wanna do, tools like Jekyll and MkDocs can meet your needs.

Jekyll and MkDocs are tools that generate static websites from Markdown documents. Know that, when creating websites, it's important to have a basic knowledge of HTML, CSS and even versioning files using Git.

GitHub Pages provides free hosting for your static website.

If you need something more robust like a content manager, the famous CMS, take a look at Ghost.

Ghost is a free and open source platform for bloggers. The tool also has a built-in Markdown editor.

Do you use WordPress? Sites hosted on WordPress.com already have Markdown support, even so, you can use the Jetpack plugin for sites that are on other hosting servers.

Formatting text

Markdown's simplicity dispenses all the flashy options of a WYSIWYG editor, such as Microsoft Word, yet it still offers enough formatting for you to edit your documents.

Bold, italics, and strikethrough are supported by the language, in addition, of course, to lists, titles, block quotes and more.

photo Formatting in bold, italics and strikethrough in Markdown

Another advantage of formatting documents using Markdown is the possibility of converting them to, basically, any other text file format.

Below is a list of applications for creating / editing Markdown documents:

Notes

Markdown is the perfect language for note taking.

Below is a list of Markdown-compatible note taking apps.

  • Notable: It stands out for its compatibility with several platforms.
  • Bear: we entered Apple territory, Bear is compatible with Mac and iOS, does not use Markdown by default, but you can activate it. Bear is very similar to Evernote.
  • Simplenote: it's free, it's simple and it stores notes. Available on all platforms.
  • Boostnote: more focused on programmers and it's an open source app.

And Evernote? OneNote? Anyone...?

When it comes to note taking apps, Evernote and OneNote are, by far, the most popular ones. Unfortunately the two programs, by default, do not support Markdown.

If Evernote is your thing, you can still use Markdown Here or Marxico.

NOTE: Markdown Here is an extension for your browser that allows you to create emails using Markdown syntax. You can use it on the Evernote website.

Books

What do you mean writing books using Markdown?

That's right, services like Leanpub use Markdown files as a base to generate books, the Markdown file can be converted to EPUB, MOBI and PDF.

Don't like e-books?

You can upload your generated electronic book file to other services such as Kindle Direct Publishing and produce physical copies.

Slide presentations

Yeah, you read that right, you can create slide presentations using Markdown.

Remark, Cleaver and Landslide are tools that generate slide presentations directly in your browser, all using .md files as a base.

You'd rather use apps? In macOS, you can use Marked or Deckset. On Windows, we can convert Markdown to slides using Pandoc.

It may seem like a incredible waste of precious time to generate presentations utilizing Markdown, however, with a little practice you'll naturally find it's more straightforward and more rapid than handling tools such as PowerPoint or Keynote.

E-mails

Most e-mail providers typically include a modern WYSIWYG editor integrated with the standard interface, but let's face it, many fall short, on the one hand there's a lot of complexity, on the other hand, formatting options are lacking.

photo Gmail email creation interface

Now what?

Markdown Here to save the day. An extension compatible with your modern browser that generously allows you to properly write your personalized emails using Markdown formatting.

Is it free?

Absolutely, Markdown Here is free and open source as well. The tool converts Markdown to HTML instantly right inside the email text box.

Technical docs

Markdown and technical documentation go hand in hand. Countless companies reliably use .md files to efficiently store their official documentation.

GitHub migrated its docs to Markdown with the proper support of the excellent Jekyll tool. In worthy addition, one of the most famous files in the civilized world, GitHub's README is typically composed of, guess what? Markdown.

photo GitHub Documentation
NOTE: GitHub typically uses a slight variant of the Markdown syntax popularly called GitHub-flavored Markdown or GFM for short.

To efficiently generate technical documentation, the valuable tools listed below can undoubtedly aid you:

  • Jekyll: generates documentation from Markdown files, it's the choice of GitHub Pages.
  • MkDocs: simple, fast and, easy to use. The fundamental basis for the documentation is Markdown. The app handles YAML formatted files for configuration.
  • Docusaurus: static website generator, one of the best tools for creating docs. Docusaurus was developed by Facebook, supports versioning, document search and even translations.
  • Read The Docs: generates documentation sites based on Markdown files.
  • VuePress: judging by the name, you understand that it has some relationship with Vue. VuePress is a static site generator used to write technical documentation.

Markdown flavors

Imagine all the different dialects that exist in one language, slang, pronouncements, accents. Even for native speakers, sometimes it's difficult to understand some things.

photo Variações da sintaxe do Markdown

Well, as with languages, Markdown implementations in different applications can also vary quite a bit, even if the difference is subtle, it still can cause confusion.

Markdown variations are called Flavors, for example, GitHub uses a slightly more robust version of Markdown called GitHub-flavored Markdown.

Some applications use only the basic syntax, others use a combination of the basic syntax and the extended syntax, and finally, there are those that, sporadically, implement elements of both.

So, what to do?

The best way to understand an application is to read its documentation. You can also use the good old "trial and error" strategy. Also, take a look at the tools section where we list which Markdown elements are compatible with each application.

At the end of the day, the best option is to use a program that offers the greatest possible compatibility, such as the online editors, Dillinger and StackEdit.

Some examples of Markdown flavors are, GFM (GitHub Flavored Markdown); MultiMarkdown; Markdown Extra and Kramdown.

Conclusion

In this informative article, you properly learned the basics of Markdown, what you can traditionally produce with it, and its various applications.

The subsequent step is to learn the language basic syntax or, if you feel confident, visit the tools section and carefully pick a specific Markdown app to start editing right away.