Markdown

Markdown is a simple and intuitive syntax to stylize your content.

Markdown was developed to make it easier to write content in web pages.

Using Markdown may feel complex in the beginning. But once you get used to it, it allows you to write with an amazing flow.

Introduction to Markdown

Markdown is simple. If you're old enough to remember what emails used to look like before email clients supported html formatted messages you'll feel right at home with Markdown.

For instance, if you want to highlight a word, just add asterisks (*) around the highlighted word. If you want bullet points, just start a line with a dash (-) or an asterisk (*) and that line will become a bullet list.

* First item
* Second item

Will turn into a real list like

  • First item
  • Second item

Technical Details

There are many slighly different implementations of the Markdown syntax. Innota is fully compliant with the CommonMark specification.

Block Level Elements

Here's list of the most important block level elements.

Paragraphs

Writing paragraphs couldn't be simpler. Just add an empty line.

Unordered Lists

Unordered lists with bullet points are easy to create. You can use either a dash (-) or an asterisk (*) to start an item in the list. For instance:

* Innota is fast,
* Innota is reliable,
* Innota is easy to use.

becomes a list like this:

  • Innota is fast,
  • Innota is reliable,
  • Innota is easy to use.

Ordered Lists

Creating an ordered lists with numbers is just as easy. Just start a line with a number and a dot. For instance

1. Sign Up
2. Log In
3. Write a blog post
4. Publish

turns into a numbered list like this:

  1. Sign Up
  2. Log In
  3. Write a blog post
  4. Publish

Actually, to make reordering easier, it doesn't matter which numbers you use in the list. You could write the same list like this:

1. Sign Up
1. Log In
1. Write a blog post
1. Publish

and the end result will be the same:

  1. Sign Up
  2. Log In
  3. Write a blog post
  4. Publish

It's up to you which format you want to use.

Block Quotes

If you like to cite other people, you'll be happy to know how easy it is to create block quotes in Markdown. Remember the old school emails we mentioned earlier and this will feel quite natural.

Here's how you create a block quote:

> Everything should be made as simple as possible but not simpler.
>
> Albert Einstein

This will turn into block of html:

Everything should be made as simple as possible but not simpler.

Albert Einstein

Code Blocks

Adding preformatted code blocks is easy in Markdown. Just start a line with four spaces like this

    <script>
    alert('Hello Innota!');
    </script>

That piece of text turns into a preformatted code block like this:

<script>
alert('Hello Innota!');
</script>

Inline Elements

Emphasis

If you want to emphasise a word, just add asterisks around it like *emphasise*. To add even more emphasis you can use double asterisks like **more emphasis**.

Instead of asterisks you can also use underscores (_) exactly the same way. _italics_ turns into italics and __bold__ turns into bold.

Linking

Here's how you can create links to other web pages. Link text is surrounded by brackets [] and put the URL in regular parentheses right after it.

Here's a link to [Innota documentation](http://www.innota.co/docs/).

This produces the following html

Here's a link to <a href="http://www.innota.co/docs/">Innota documentation</a>.

Fully rendered it looks like this:

Here's a link to Innota documentation.

Linking Inside Your Site

Creating links to other pages or posts inside your site is easy.

We recommend not to use absolute links. This brakes all your links if you decide to setup a custom domain or if you change your domain. Here's how you create links using the Markdown syntax described above

Here's a link to [Innota documentation](url:docs).

The url:docs as the URL will be replaced with the absolute url to a page or post with URL (or filename) docs. This way you you never have to rewrite your links if your domain changes.

You can use the same syntax to link to blog posts as well. For instance:

Read this blog post [about Innota performance](url:how-is-innota-so-fast-part-i).

This will turn into a link like this:

Read this blog post <a href="https://www.innota.co/2016/01/25/how-is-innota-so-fast-part-i/">about Innota</a>.

As you can see, the full url include the data 2016/01/25 as a part of the url but you don't have to use that when you're creating links.

If you need to create links using plain HTML, you can use url() function to create absolute links like this:

Read more about <a href="{{ url('docs/blogging') }}">blogging in Innota</a>.

This will be rendered as

Read more about <a href="https://www.innota.co/docs/blogging/">blogging in Innota</a>.

Updated at 2021/12/29