Have you met Markdown? Basics

Posted by Adam Aciek Paszkiewicz on wto 13 września 2022 Updated on wto 20 września 2022 Translations: pl

Have you met Markdown and why should you know it?

Markdown Basics

Have you ever watched sitcom "How I met your mother?". If so, you probably remeber Barney's game called "Have you met Ted?" and today we will play it but instead of metting Ted we will learn Markdown, specificly its basics.

Let's start with what markdown is.

Markdown is a markup language designed to format text with a regular editor. The authors are John Gruber and Aaron Swartz, who created it in 2004.
Source: Wikipedia

Speaking colloquially, it is an invention that allows you to create a text in a clear form in a very simple way, Moreover, each user is able to master it without the need to know secret knowledge or other Harry Potter spells. It can be used in many editors, so whether you use Vim or VS Code looks the same, additionally it is cross-platform, i.e. are you a fan of penguin or windows it does not matter.

You've probably seen the MD extension many times - for example, when you enter Github, but have you ever wondered what exactly this thing is? I will try to explain it in the most accessible form - of course with examples to help you understand the idea and syntax.

Here is an example of Markdown.


# Header 1
## Header 2
1. Item 1
    - subitem
    - another subitem
2. Item 2
    * something different
    * and another different thing

---
[Link to google](https://www.google.pl)
---

Simple isn't it? And that's what captivated me about it. Writing documentation or notes is great using it, and it converts well into different formats - although it's mostly HTML.

Well, since we've already seen a sample of what Markdown gives us, let's move on to the details and how to write the markdown source, i.e. what we can put in the content. The examples that you will see will additionally show the visualization that we would have after converting to HTML, just in case.

  • Headers - we create them using #, and the number hashes used determines the size of the header

    # H1
    ## H2
    ### H3
    

    In HTML form, it will look like this:

    H1

    H2

    H3

  • Paragraph and line break - to create a paragraph, insert a blank line by text line, to create a line break, put two spaces at the end of the line:

    This is first paragraph
    
    This is second paragraph
    
    This is first line  
    This is second line
    

    HTML form:

    This is first paragraph

    This is second paragraph

    This is first line
    This is second line

  • Text control - bold, italic lub monospace

    **bold**
    _italic_
    `monospace`
    
  • Lists - starting with numbers, dashes, asterisks or pluses

    1. First point
        1. First subpoint
        2. Second subpoint
    2. Second point
        * asterisk
    3. Third point
        - dash
        + plus
    

    And after convert to HTML it looks like this:

    1. First point
    2. Second point
      • asterisk
    3. Third point
      • dash
      • plus
  • Links - there is no need to explain what it is

    [This is link to google.com](https://www.google.com)
    [This is link to aboutall.pl](https://aboutall.pl)
    

    And after convert to HTML it looks like this:

    This is link to google.com
    This is link to aboutall.pl

  • Blockquotes - we can create them with >

    > "So long, and thanks for all the fish"  
    > Douglas Adams - Hitchhiker's Guide to the Galaxy
    

    And the same in the visualized in HTML:

    "So long, and thanks for all the fish"
    Douglas Adams - Hitchhiker's Guide to the Galaxy

  • Code - There are several examples of including source code in the content of a discount. You can put an entire block of code on the form with 4 spaces or one tab (in case the code is to be displayed on the list, we have to double it). There are also several other ways. Below is an example of how to use a discount code listing with HTML as an example.

    ```html
    <html>
    <head>
    This is text <p>
    This is some other text
    </head>
    </html>
    ```
    

    This way, we can also show you how to use the command, for example:

    Type `ls` to list.
    
  • Images - of course, the image is less or rather not visible in the text, but when we do the conversion for example, for HTML we will see an effect aka we will see an image. An example of the syntax for adding an image is shown below.

    ![Tux image](images/markdown/tux.png)
    

    HTML result:

    Tux image

Okay, that's it for the basics. In the next part I will add what else we are able to show in markdown that is extended syntax and I assure you that the whole thing will be - as Barney says - " Legen - wait for it - dary " 😉

tags: markdown