Make your posts look great in Steemit and Busy

in utopian-io •  3 months ago

Thumbnail

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 (GitHub) and Busy (GitHub).

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.

# 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.

**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.

<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.

> 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.

- 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:

[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 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.

[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

Steem apps

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.

![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/.

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.

␣␣␣␣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.

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.

| 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.

NameCategoryPosition
espoemBlogCommunity Manager
oupsGraphicsModerator

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

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.

Text Align Examples

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

The second example will be aligned right.

The third example will be put in the center.

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.
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

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.

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


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.


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


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.

<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

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.

<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.

DescriptionMarkdownHTMLResult
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
Image![name](img-url)<img src="img-url" alt="name">name
Heading 1# Heading 1<h1>Heading 1</h1>

Heading 1

Heading 2## Heading 2<h2>Heading 2</h2>

Heading 2

Heading 3### Heading 3<h3>Heading 3</h3>

Heading 3

Heading 4#### Heading 4<h4>Heading 4</h4>

Heading 4

Heading 5##### Heading 5<h5>Heading 5</h5>
Heading 5
Heading 6###### Heading 6<h6>Heading 6</h6>
Heading 6
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>
Line of quote
Superscript<sup>Sup</sup>textSup
Subscript<sub>Sub</sub>textSub
Unordered list- first
- second
<ul><li>first</li><li>second</li></ul>
  • first
  • second
Ordered list1. first
2. second
<ol><li>first</li><li>second</li></ol>
  1. first
  2. second

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.

GitHub account

Thank you for reading.
@espoem

References

Images

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Using <div class=phishy>text</div> we can also write in red :)

For example:

text

# <div class=phishy>text</div>

It is also worth knowing about &nbsp; (non-breaking space).
It allows you to create any number of spaces or blank lines in the text :)

For example:

Great tutorial!          Resteemed!

# Great tutorial!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Resteemed!

·

Hi, thank you for this comment. Unluckily, that class is not supported in Busy. Having multiple spaces in the text is not a good practice in my opinion but it is nice to know about these.

·
·

&nbsp; allows you to separate the header from the text as in this example:


[Source]

And it is useful in many other unexpected situations :)

·
·
·

I am not sure which part you mean. It looks like you wanted to make more blank lines / bigger vertical space. I suppose using <br> is more suitable than inserting non-breakable space somewhere in the text.

·
·
·
·

agreed, br / works fine

·
You've made my day!

Thanks to @espoem and @santarius!

Question:

Can I edit font with markdown or html?

·
·

Hey, markdown does not support any real changes with the font or how the result will look like. It is used for easy content writing with simple syntax to denote the structure.

HTML on the other hand can support font changes like weigth or font family. You would most likely use CSS for this part. Still it could be changed for individual tags with inline styling but Steemit and Busy do not support that.

I tried to look for some guides on this topic and one solution is to use a "unicode text converter".

This is the only thing that seems to work or worked in the past. I did not try it, though.

·
·
·

I have tried it and yeah you are right! Really loved your helpful post. Btw I tried to make the texts red on Busy but didnt work.

Thanks for sharing those link tho. :) Have a nice day!

·
this is a test
·

Hey @santarius
Here's a tip for your valuable feedback! @Utopian-io loves and incentivises informative comments.

Contributing on Utopian
Learn how to contribute on our website.

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

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 >.

Fantastic. I needed to learn this.
And this too my newest sketch

Using 5x <div class="pull-right"></div> and put inside link to image, we can make custom thumbnail :) Works on steemit and busy.

·

Thanks sir

·
·

Np ;) but must start writing from the second line

Thank you for your contribution.

  • I really enjoyed your tutorial and it is very useful for all of us.

Looking forward to your upcoming tutorials.

Your contribution has been evaluated according to Utopian rules and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post,Click here


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

·

Hi, thank you for your time evaluating this post.

·
·

man that was intense...to all fairness people want a more friendly interface ;)

·
·
·

There are many editors you can use.

I believe you could find many other articles with list of Markdown editors. It may be even better for some to prepare the text somewhere else, copy it to the editor and do the final touches.

You can use almost any editor to write your posts but if you want to use the pull-left and pull-right classes, you will need to write them by hand (which is quite easy if you know where to put them) because they are specific to Steemit and Busy.

I personally like to see the original text with the markup with a previewer than to use any wysiwig editor.

Hey @espoem
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Contributing on Utopian
Learn how to contribute on our website or by watching this tutorial on Youtube.

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

A tip that did not make it to the post. You can write in Latex in Busy.

[+]E = mc^2[+]

[+]E = mc^2[+]

Note: It seems that it does not work in the comments but you can use it in the editor. The formulas will be replaced with an image of the formula.

image.png

·

Any alternative for this?

$$ P_{in} = I_{in} \times V_{in} $$
- $I_{in}$ = electric current of the input in ampere (A)
- $V_{in}$ = voltage of the input in volt (V)

In VSCode it will be rendered as

Peek 2018-05-20 09-53.gif

·
·

You could write it like this:

<center>[+]P_{in} = I_{in} \times V_{in}[+]</center>
- [+]I_{in}[+] = electric current of the input in ampere (A)
- [+]V_{in}[+] = voltage of the input in volt (V)

image.png

Note: If you see this comment in Busy, you will most likely not see the [+] symbols but code for images. Yeah, Busy replaced that.

I
love
Espoem!

Great tutorial. Upvoted & resteemed!

Great Tutorial

 <h1> Thank You</h1>

Great post. Thanks for all It will take time to learn all but very helpful. I add it to my favourite section and will use it when I creating a new post.

i have found some good formating lessons,

Sangat indah
Visit my blog

All of this was pretty much already explained in other posts but since they disappear along the way of the feed it's nice to have ALL in the same tutorial again :) Good job! Wish I could bookmark that.

·

You are right. There have been other posts talking about the same. There are minor changes in parsing and rendering the content in Steemit and Busy with time but the principles remain the same.

If you use Busy, they have this bookmark feature. Or you can take a look at http://www.steemshare.com/

·
·

Yeah, Busy has a few things the main website does not have :) I don't know why the bookmarking can't be accessible here as well. Anyway...

Very awesome! Great work espoem :)

this was helpful, thanks so much @espoem

Resizing images has been bugging me forever and I didn't know there was a solution, thanks for this!

https://steemitimages.com/{maxWidth}x{maxHeight}/

·

It is similar to local resizing but steemitimages does it for you without any need to spend the time in other editors. They will send you the resized image.

·
·

Wanted to drop you a note. I just updated my semi-weekly log to use that and it's been super helpful. I also made good use of the explanation on the blank space between divs and images to fix a bug that cropped up occasionally.

·
·
·

This makes me really happy that the post was useful to you. I usually encounter one or two issues every time while writing a post so I started checking the content in both previewers (Steemit and Busy) to see the result, which also resulted in reporting the issues.

this is amazing helpful post..thanx for it..

Another tip:

Do you know Stackedit Markdown editor? Now they have a Chrome extension that lets you use Stackedit on other sites as well.

Works in Busy and Steemit. You need to first input the urls of the sites in the list but then the whole editor is enabled and you can use the editor and do not need to write most of the command by hand.

very good information for me, I have read it and tried to follow it, but my weakness is I can not do it if just read the instructions only. but someone has to guide me to do it. I hope anyone can help me more ..

Really clean tutorial @espoem! Resteeming this one, a lot of poeple I chat to and introduce Markdown too are a bit daunted, I'll probably refer them to this :)

Complete tutorial. 👍👍👍

Thank you! This post will help me.

Today I learned how to resize images on steemit. Thanks so much. That was bothering me.

This is really helpful tips in making your blogs presentable. What I like about busy is that some of these are already provided for you.

I also use <div class"pull-left > insert image < /div> to align left, change left to right to align right images.

·

It is true that Busy has a toolbar in the editor for some of the basic formatting commands and the editor supports shortcuts too. However, not everything is in the toolbar so, for example, the alignment must be done manually.

·
·

Yes but it makes steeming easier at least because of those tools already available rather than manually doing it.

hello @espoem. goodjob. this is a very useful tutorial. I resteemed. thanks for sharing.

Very nice tutorial :D

Hi @espoem, I wonder is there a way to reduce font size without using sequence of <sup><sup>... or <sub><sub>...?

·

Hey, unfortunately, I was not able to find the answer for this question. According to https://www.steem.center/index.php and other posts that are linked inside, nobody could discover the magic sequence that would allow us in more flexible edits with html.

I suppose that sequence of superscripts and subscripts is the best thing we have if we want to get smaller fon size.

Very helpfull! I am new...So this is amazing for me. Thank you.

You got a 3.07% upvote from @postpromoter courtesy of @espoem!

Want to promote your posts too? Check out the Steem Bot Tracker website for more info. If you would like to support the development of @postpromoter and the bot tracker please vote for @yabapmatt for witness!