Markdown is a way to write texts, mostly for the internet, that is easy to read and write in a text file and can easily be transformed into html. It can also be transformed into PDF or other document formats. But mostly for websites.
Often it is used in web forms as an alternative to the previously more popular BBCode format. Websites and blogs often allow comments and answers to be written in markdown format. Because implementing the frontend is easy. It can be a simple
textarea. In the backend, almost every environment, if it is node.js, php, ruby or any other kind of server, there are modules today, to easily transform markdown formatted text into HTML.
That is because the markdown format is very simple, and translates well into html elements. With some extensions, it can be adjusted for more use cases, such as describing tables, source code snippets, SVG images and more.
Some markdown syntax is universal to almost all markdown compilers.
To format a text into multiple paragraphs, you just hit two times enter into your text. That makes an empty line in your text file and in html it get translated into
Here is some text.
The output of this code will look like the following:
<p>Here is some text.</p>
Note: In the html output, I wrote the two paragraphs on two lines. Each compiler can decide to generate more pretty or more minified html. Some even have options to control the white spaces.
Markdown is often stored in
.md md files or is called
md. Headlines are marked with a leading hashtag on a new line. Headlines for sub paragraphs can be marked with multiple tags. Using css this is then often displayed a little smaller. If there is only one
# character, it will be translated into the highest order headline.
Did you note, this blog is also written using the markdown format. And the headlines will look like all the other headlines in this article.
Do add a link into your text, you enclose the text of the link into corner brackets
 followed by the URL to link to, in round brackets
(). It will look like this:
Some text with a [link]( ).
Some text with a <a href="http://tnickel.de/">link</a>.
And it looks like this:That is easy right?
Lists look good in the markdown file, as well as in the rendered output. Here is an example for ordered and unordered list, presented in markdown, html and rendered what the end user will see.
# list one
Tables in markdown almost look like the rendered version:
one | two
Do you notice that the first line becomes table headers? On my block they are shown a little bold.
To show an image, works similar to links. But it has a leading exclamation mark
![alternative texts]( )
Uuhhh, That was too fast. The alternative text is good for SEO, accessibility (a11y) and is shown in the browser when you hover over the picture with you your mouse.
Writing code just plain on your page, makes it very hard to read. at least code should be presented using a monospace font. Most markdown formatter even generate some styles for syntax highlighting and add line numbers.
Sometimes to highlight a single word I also use the backtick (
The first time that I wrote markdown, was for a project I published on github. Github presents
README.md files in a html rendered form, that also allow for nice syntax highlighting when presenting code.
The same readme file is also rendered on every projects page on NPM.
I also enjoy writing my blog using markdown. As it is very clean and I write in the same tool, that I also use for coding.