<div class="text-justify">

![Thumbnail](https://gateway.ipfs.io/ipfs/QmfQPcWbmJmszBBgULRVapL5s9aHZrVWipNVxuzaPdKuWw)

This tutorial contains basic commands and tags from Markdown and HTML that will help you create great posts which will not only have interesting content, but also a consistent structure and text flow.

Unfortunately not all Markdown and HTML features are available on Steemit and Busy, so in this tutorial we will only focus on features that *are* usable on [Steemit](https://steemit.com/) ([GitHub](https://github.com/steemit/condenser)) and [Busy](https://busy.org) ([GitHub](https://github.com/busyorg/busy)).

#### What Will I Learn?

- Markdown and HTML supported features
- structuring text with Markdown
- formatting text
- inserting elements into the text

#### Requirements and Difficulty

This tutorial has no actual requirements. Everything that is written in this tutorial can be tested in Steemit or Busy editors. It is suitable for beginners and for intermediate users, because I believe that anyone can find something useful in this tutorial.

## Headings

There is no wonder that we can discover amazing writers and content creators. Their texts are full of insight and deep thoughts. All these thoughts should be structured into coherent sections, which will help the author and the reader to get most out of the post.

There are 6 levels of sections (headings) to structure the text. Markdown uses the symbol of hashtag `#` to denote the level of the heading.

```md
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
```

Note that you have to leave a blank space between the hashtag and the title of the section.

## Formatting Within A Paragraph

We know how to make sections for the text. Let's now look at how you can emphasize parts of the text.

The most common edits are making the text **bold** or emphasized with *italics*. You can also use both of them at the **_same time_**. If you realize that you want to remove some part, you do not need to actually remove it but you can indicate the removal with a strike-through line. ~~Just like this sentence here.~~

```md
**bold**
*italics*
**_bold italics_**
~~strikethrough~~
```

If for some reason you need to write the text as superscript or subscript, Markdown will fail you. You will not be able to use it for this purpose. However, you can use the usual HTML tags just for the same thing.

```html
<sup>Superscript text</sup>
<sub>Subscript text</sub>
```

We should not forget about citing and quotes. We use the symbol of right angle `>` at the beginning of each line we want to have in the quote, including blank lines if we do not desire to have a diving space between the parts. Quotes can be nested, you simply repeat `>`.

> This is the first line of a quote.
>> This is the second line but the first line of a nested quote.
>
> Last part after leaving a blank line.

```md
> This is the first line of a quote.
>> This is the second line but the first line of a nested quote.
>
> Last part after leaving a blank line.
```

## Lists

Do you have a list of items you want to share but writing it all in one paragraph would make it hard to read? Markdown supports ordered and unordered lists.

```md
- the first item of the unordered list
- the second item of the unordered list
    1. the first item of the nested ordered list
        - the first item of the nested unordered list
        - the second item of the nested unordered list
    2. second item of the nested ordered list
- the third item of the unordered list
```

- the first item of the unordered list
- the second item of the unordered list
    1. the first item of the nested ordered list
        - the first item of the nested unordered list
        - the second item of the nested unordered list
    2. the second item of the nested ordered list
- the third item of the unordered list

You can use `-`, `+` or `*` to start an item in an unordered list. In my opinion, hyphens are the easiest to use. For the ordered list, you are not obligated to number the items sequentially. You could put number 1 for every item and it would still work. I suggest you keep the sequential numbering so that you can easily see where each item is.

## Links

What would be a text that contains exact numbers, statistics, facts or simply the source of your inspiration for your article without links to other sources? It is good if you can include the resources you used while writing your post. It will not only increase the credibility of your work, but it will also help make the sources more readily available to the readers.

The simple way to write a link is as follows:

```md
[name](url)
```

The use of links is straightforward. You want to link to another site, you write your text and wrap the selected words into brackets. You can see more examples on [GitHub](https://guides.github.com/features/mastering-markdown/) help page.

That is not all of the ways to write the links. We just used links by definition, but you can also make links by reference. There are 2 basic ways to do that.

Links by reference are suitable in the case that you want to have the links organized within the text or if you use a link multiple times but you want to have it defined only at one place.

```md
[name][reference]
[name][]
// the reference can be put anywhere after the call
[reference]: url
[name]: url
```

You can see how the links by reference are created. Instead of using parentheses after the name of the link, you use brackets with the reference. Then you define the reference somewhere after the definition.

The second way of writing links by reference requires empty brackets. The reference name is then taken from the name.

## Images

<div class="pull-right">

![Steem apps](https://steemitimages.com/250x250/https://gateway.ipfs.io/ipfs/QmWQvo9o9dc3WFYLK2PaBui3Phupu2cY1EYtRjPCR2hR1t)
</div>

Images have always been an important part of blog posts and they are important in the Utopian posts as well. Sometimes it is much easier to present the information visually with an image or a video instead of writing tens or hundreds of words. If the image has more than the presentational role and it carries actual information, take a moment and write few words to describe the image. Some may prefer to read the text and some prefer seeing visual content. Combining both gives you the best result.

If you are willing to put an image manually, you should know how to do it. The nice syntax is almost the same as for links, with one small difference. You put the exclamation mark at the beginning.

```md
![name](img-url)
```

You can work with the image URL the same way as with regular links. You can use the reference kind of syntax if you wish so and that will work. Uploading and putting images into a post is not always convenient. Luckily, both Steemit and Busy have implemented several ways of uploading an image.

1. You can drag and drop the image into the editor.
2. You can copy and paste the image into the editor.
3. There is a dedicated button for the image upload at both of the editors.

The image will be uploaded to the file hosting servers and it will return the image URL wrapped in the Markdown syntax. It will be inserted on the place where your cursor was in the editor.

### Image resizing

It often happens that we want to have the images in particular sizes without the need of local resizing. Sadly, Markdown does not support width and height attributes to set the dimensions of the image and Steemit with Busy does not allow using these attributes in the `<img>` tag. Those attributes have no effect, respectively.

How can you overcome this limitation? It is quite simple with Steemitimages. It is enough to prepend the URL of the image with `https://steemitimages.com/{maxWidth}x{maxHeight}/` and you will get the resized imaged. If you wish to use steemitimages but you want to keep the original size, use `https://steemitimages.com/0x0/`.

<table>
    <thead>
    </thead>
    <tbody>
        <tr>
            <td><img src="https://steemitimages.com/300x300/https://gateway.ipfs.io/ipfs/QmWQvo9o9dc3WFYLK2PaBui3Phupu2cY1EYtRjPCR2hR1t" alt=""></td>
            <td><img src="https://steemitimages.com/200x200/https://gateway.ipfs.io/ipfs/QmWQvo9o9dc3WFYLK2PaBui3Phupu2cY1EYtRjPCR2hR1t" alt=""></td>
            <td><img src="https://steemitimages.com/100x100/https://gateway.ipfs.io/ipfs/QmWQvo9o9dc3WFYLK2PaBui3Phupu2cY1EYtRjPCR2hR1t" alt=""></td>
        </tr>
    </tbody>
</table>

## Code

This section is dedicated specifically to programmers and everyone who needs to include code in their post. We distinguish 2 basic kinds of code sections in the text; inline code and code block.

The first one is pretty straightforward. It is used for few words you want to highlight within a sentence. The only thing you need is to wrap a word in between 2 backticks (back apostrophes) \`\` like \`inline code\` and you will get `inline code`. Inline code — which is equivalent to `<code></code>` tag in HTML — should not be used for whole paragraphs or codes across more lines.

For that purpose, we have the code blocks. The original syntax considered code blocks by indenting the lines with 4 spaces. Writing more than 4 spaces will allow code nesting.

```md
␣␣␣␣First line of the code block
␣␣␣␣Second line
␣␣␣␣␣␣Third, more indented line
```

The symbol of visible blank space `␣` was used to show the spaces in each line.

    The first line of the code block
    The second line
      Third, more indented line

In my opinion, this kind of code block is not convenient since it takes more time to properly indent the code unless you have an editor that can easily indent it for you. Sadly, the tab keyboard does not work in the browser editor to indent the content.

There is another way of writing a code block, which comes from the GitHub flavour and is supported in Steemit and Busy. It is similar to inline code syntax. You will need 6 backticks instead of 2; 3 for opening the block and 3 for closing the block. This way of writing also allows supporting the syntax highlighting because you can specify the language the code is written in.

```python
def get_repository(post):
    """Returns the first repository found in the given post."""
    url = "github.com/"
    try:
        for link in post.json_metadata["links"]:
            if url in link:
                return link
    except KeyError:
        pass
    return ""
```

We can take a look at this function written by @amosbastian, which is used for fetching the GitHub project repository from submitted posts. You can see below how it is written in Markdown. Markdown code blocks are the same as code and/or text written in `<pre><code></code></pre>` which ensures that the content is taken as code and everything inside those tags are kept as is. For example repeated whitespace characters are kept and not reduced to one.

    ```python
    def get_repository(post):
        """Returns the first repository found in the given post."""
        url = "github.com/"
        try:
            for link in post.json_metadata["links"]:
                if url in link:
                    return link
        except KeyError:
            pass
        return ""
    ```

## Tables

Tables are a crucial structure when we want to present information in an organized way. Tables are often used in HTML and have easy-to-remember tags. Nevertheless, let's talk about how we can create a table in Markdown.

```md
| Name   | Category | Position          |
| :----: | -------: | :---------------- |
| espoem | Blog     | Community Manager |
| oups   | Graphics | Moderator         |
```

Markdown can distinguish table head and table rows just like HTML. There are also Markdown flavours that let you align the cells.

| Name   | Category | Position          |
| :----: | -------: | :---------------- |
| espoem | Blog     | Community Manager |
| oups   | Graphics | Moderator         |

The tables are easy to make. It may not look easy as first, because you often repeat the divider symbol `|` and have to know how many columns you actually have, but if you do not want to write too much, you could do the same just with the following

```md
Name | Category | Position
:-: | -: | :-
espoem | Blog | Community Manager
oups | Graphics | Moderator
```

So, what did we actually write? Every proper table should have a head to describe the data in the column. The head is defined in the first row of the table followed by the second row with the hyphen dividers. These two lines make the table head.

Each row is written on a new line and every two cells are divided by the pipe symbol `|`. You can see that the leftmost and the rightmost symbols can be omitted and that markdown can handle arbitrary whitespace character between the cell data and the divider. It also does not matter how many hyphens you have in the head dividing row, as long as you keep at least one.

You could see that I used special characters `:` in the second row. You probably know it from the GitHub Markdown flavour and it is used to align the text in the column. We can usually align the text as follows: center `:-:`, align left `:-`, and align right `-:`. Unfortunately, we can't use all of them in Steemit or Busy. The left alignment is the default one so there is no need to specify it. You can align the text to right, but you will not be able to center the text with this syntax.

## Text alignment

We have seen how to edit the text that flows from top to bottom and from left to right. We will now learn putting elements on different sides of the lines.

First, we will take a look at simple text alignment within a paragraph / division and then we will cover how to align whole paragraphs / sections.

These tips are only for HTML tags. You will not be able to get the same result when using Markdown.

We have a few options to align the text. By default, the text is aligned to left, but we can also align it right, center it or make it justified, so the text will occupy the whole line if possible.

</div>

### Text Align Examples

The first example will be aligned left. In this case, we change nothing and write the text (content) normally.

<div class="text-right">
The second example will be aligned right.
</div>

<center>The third example will be put in the center.</center>

<div class="text-justify">
The fourth and last example will be justified. To show this effect, we will need enough words to fill the whole line so that it easily reaches the following line.
</div>

```md
First example will be aligned to left. In this case, we change nothing and write the text (content) normally.
<div class="text-right">
The second example will be aligned to right.
</div>
<center>Third example will be put in the center.</center>
<div class="text-justify">
The fourth and the last example will be justified. To show the effect, we will need enough words to fill the whole line so that we easily reach the following line.
</div>
```

When you put text or images in the `<center>` tag, do not break the line as you may face additional vertical white space that you really did not want.

### Two columns

<div class="text-justify">

It is time to align whole sections and paragraphs. What I mean is that Steemit and Busy support classes that allow you to put content into 2 columns side by side, or to put an element on either side of the line while the rest of the content will flow around it.

<div class="pull-left">
<img src="https://steemitimages.com/300x300/https://gateway.ipfs.io/ipfs/QmWQvo9o9dc3WFYLK2PaBui3Phupu2cY1EYtRjPCR2hR1t" alt="">
</div>

The image is pulled to the left side, therefore all other content will flow around it if there is enough space for it.

<hr>

<div class="pull-right">
<img src="https://steemitimages.com/300x300/https://gateway.ipfs.io/ipfs/QmWQvo9o9dc3WFYLK2PaBui3Phupu2cY1EYtRjPCR2hR1t" alt="">
</div>

We can do the same for the right side. The only difference is using a slightly different name of the class in the `<div>` tag.

<hr>

We can also put the content explicitly into two columns that will reside next to each other.

<div class="pull-left">

![](https://gateway.ipfs.io/ipfs/QmWQvo9o9dc3WFYLK2PaBui3Phupu2cY1EYtRjPCR2hR1t)
</div>
<div class="pull-right">

![](https://gateway.ipfs.io/ipfs/QmUDV2G66C2NrURBqJWHG784SzXdojqQKqLwLuZDGfxmdR)
</div>

<hr>

You can see that I used horizontal lines to break the flow after the divs. If I did not do that, the following content would try to fit the space right after that.

In this case, only the images were put into the divs with the classes but you can put other kinds of content in there as well.

```md
<div class="pull-left">
// this line must be blank
![](https://gateway.ipfs.io/ipfs/QmWQvo9o9dc3WFYLK2PaBui3Phupu2cY1EYtRjPCR2hR1t)
</div>
<div class="pull-right">
// this line must be blank
![](https://gateway.ipfs.io/ipfs/QmUDV2G66C2NrURBqJWHG784SzXdojqQKqLwLuZDGfxmdR)
</div>
```

Take a good look at the blank lines between the div opening tag and the image. If we did not leave the blank line there, the Markdown would not be properly processed and we might face a problem that the image is not displayed.

Note: There were added comments in the code blocks so that it is displayed correctly in Busy. There seems to be an issue in displaying code blocks that contain blank lines.

However, Steemit and Busy can display images even if the links are not inside the parentheses as we showed here in the tutorial, which means you can see the text around the image.

![Image flaw with div](https://gateway.ipfs.io/ipfs/QmQyLryJwPkodwAETG23uvT2J8i7FSeMTutrV7BwfY3c85)

So you have two options when choosing how to display the images correctly without the Markdown text. You can either leave a blank line after the opening div tag, or you can insert images with HTML `<img>` tag.

```md
<div class="pull-left">
<img src="https://gateway.ipfs.io/ipfs/QmUDV2G66C2NrURBqJWHG784SzXdojqQKqLwLuZDGfxmdR" alt="">
</div>
<div class="pull-right">
<img src="https://gateway.ipfs.io/ipfs/QmUDV2G66C2NrURBqJWHG784SzXdojqQKqLwLuZDGfxmdR" alt="">
</div>
```

## Summary

This whole post was about tips and tricks on utilizing Markdown for writing appealing posts. One can be a great author with amazing thoughts and ideas, but he or she should not forget about the appearance of the post.

You can see the table with summarized commands to format the text below. Hopefully, this post taught you something new, or served as a reminder to not forget the appearance and structure of your posts.

| Description    | Markdown                   | HTML                                     | Result                                                                                                       |
| -------------- | -------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| Italics        | `*italics*` or `_italics_` | `<em>italics</em>`                       | *italics*                                                                                                    |
| Bold           | `**bold**` or `__bold__`   | `<strong>bold</strong>`                  | **bold**                                                                                                     |
| Strikethrough  | `~~strike~~`               | `<s>strike</s>` or `<del>strike</del>`   | ~~strike~~                                                                                                     |
| Link           | `[name](url)`              | `<a href="url">name</a>`                 | [Utopian](https://join.utopian.io)                                                                           |
| Image          | `![name](img-url)`         | `<img src="img-url" alt="name">`         | ![name](https://steemitimages.com/50x50/https://ipfs.io/ipfs/QmfUuKxDbt7SujktQMjPmr1SvzaHrf1Ms1HttkcznNpH7N) |
| Heading 1      | `# Heading 1`              | `<h1>Heading 1</h1>`                     | <h1>Heading 1</h1>                                                                                           |
| Heading 2      | `## Heading 2`             | `<h2>Heading 2</h2>`                     | <h2>Heading 2</h2>                                                                                           |
| Heading 3      | `### Heading 3`            | `<h3>Heading 3</h3>`                     | <h3>Heading 3</h3>                                                                                           |
| Heading 4      | `#### Heading 4`           | `<h4>Heading 4</h4>`                     | <h4>Heading 4</h4>                                                                                           |
| Heading 5      | `##### Heading 5`          | `<h5>Heading 5</h5>`                     | <h5>Heading 5</h5>                                                                                           |
| Heading 6      | `###### Heading 6`         | `<h6>Heading 6</h6>`                     | <h6>Heading 6</h6>                                                                                           |
| Inline code    | \`inline code\`            | `<code>inline code</code>`               | `inline code`                                                                                                |
| Code block     | \`\`\`code block\`\`\`     | `<pre><code>code block</code></pre>`     | ```code block```                                                                                             |
| Quote          | `>Line of quote`           | `<blockquote>Quote line</blockquote>`    | <blockquote>Line of quote</blockquote>                                                                       |
| Superscript    | —                         | `<sup>Sup</sup>`                         | text<sup>Sup</sup>                                                                                           |
| Subscript      | —                         | `<sub>Sub</sub>`                         | text<sub>Sub</sub>                                                                                           |
| Unordered list | `- first`<br>`- second`    | `<ul><li>first</li><li>second</li></ul>` | <ul><li>first</li><li>second</li></ul>                                                                       |
| Ordered list   | `1. first`<br>`2. second`  | `<ol><li>first</li><li>second</li></ol>` | <ol><li>first</li><li>second</li></ol>                                                                       |

If you have any quetions regarding the content of this tutorial, feel free to write a comment below. Either I will know the answer right away or will help you find the answer.

<div class="pull-right">

[![GitHub account](https://steemitimages.com/20x20/https://gateway.ipfs.io/ipfs/QmRjLKjN8YiHbwEZP5p7w9xvkGErXkmEAZWe497ESLwUsS)](https://github.com/espoem)
</div>

Thank you for reading.<br>@espoem

### References

- [Markdown syntax][markdown]
- [Markdown GitHub flavour][markdown-github]
- [Mastering Markdown][master-md]
- [Markdown Tutorial + Steemit Blogging Tips][sndbox-md]

#### Images

- Images were created by @andrejcibik

</div>

[markdown]: https://daringfireball.net/projects/markdown/syntax
[markdown-github]: https://github.github.com/gfm/
[master-md]: https://guides.github.com/features/mastering-markdown/
[sndbox-md]: https://steemit.com/tutorial/@sndbox/markdown-tutorial-steemit-blogging-tips