A Beginner's Guide to Formatting on the Steem Blockchain (in Markdown/HTML)

Hello everyone! Someone in my life recently became interested in posting here on Steem, so I figured I would post a guide to formatting to help her (as well as other new users) learn how to make their articles a little bit more appealing.

For a comprehensive list, view the Markdown Guide.

Basic Markdown

First I will discuss the basics. You can use symbols around text which you wish to modify. So,

For Italics, you use 1 asterisk (*) in front of the desired italic section, and 1 asterisk (*) at the end. You can also use 1 underlines (_) in the place of an asterisk.

*Italicized Statement*
_Italicized Statement_

Italicized Statement

For bold, you use 2 asterisks (**) in front of the desired italic section, and 2 asterisks at the end. Again, you can also use 2 underlines ( __) in the place of the asterisks.

**Bold Statement**
__Bold Statement__

Bold Statement

To put a line through the text, surround it with two Tildas (~~)

~~Striked Statement~~
Striked Statement

For Headers

You use up to 6 "#s" with 1"#" being the largest header, and 6 "#s" being the smallest.
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6


For a bullet list, use an asterisk (*) or a dash (-) followed by a space in front of each item.

* 1
* 2
* 3
- 4
- 5
- 6

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

For a block quote, use a > at the beginning of the line. It is always safest to use block quotes when quoting to avoid confusion (especially in voting bots) in regards to plagiarism.

More advanced concepts.

For a hyperlink, encase the desired clickable text in brackets and immediately follow the brackets with parenthesis encasing the link.

[sample](https://www.steemit.com/@cmp2020)

sample

Also, if you put an @ sign before a username, it will automatically add a hyperlink to that user's blog. For instance, check out @remlaps or @remlaps-lite

To make a table, use the following format (example from the markdown guide provided on Steemit):

First Header | Second Header
------------ | -------------
Content from cell 1 | Content from cell 2
Content in the first column | Content in the second column
etc | etc

A sample would be

NFLMLB
EaglesPhillies
CowboysRangers
etcetc

In order to add an image, use the Steemit upload feature, or copy the image in manually. You will get a link:
Remember that copyright does apply. Even on this platform. Do not use pictures that you do not have permission to use. For public domain images, I would recommend Pixabay.com. Here is a sample image from Pixabay.

image.png

Formatting Text to Wrap around an Image:

In order to make the text wrap around the image, use the following html code:

 <div class=pull-right> Image link Any text you want under the picture </div>
 <div class=pull-left> Image link Any text you want under the picture </div>
 <center> Image link Anything you want to center </center>

The image link has to be a viable link. If you right click the original image, and click copy, and then paste in the editor, it will create a viable link for the image. Otherwise, if you upload the image from your computer, the editor should give you a viable link too. If you wish to change the size of the image, postimages.org is a good place to upload the image, change its size, and get a viable link (that will work).

The text that will wrap the image goes under the div statement.

Here is an example of each position:

Any text you want under the picture

SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT.

Any text you want under the picture

SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT.

Any text you want under the picture

SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT. SAMPLE TEXT UNDER STATEMENT.

Justify Text

In order to Justify Text, use the following div statement.
<div class=text-justify>Any text you want to justify </div>

For instance:

SAMPLE TEXT. SAMPLE TEXT. SAMPLE TEXT. SAMPLE TEXT. SAMPLE TEXT. SAMPLE TEXT. SAMPLE TEXT. SAMPLE TEXT. SAMPLE TEXT. SAMPLE TEXT. SAMPLE TEXT. SAMPLE TEXT. SAMPLE TEXT. SAMPLE TEXT. SAMPLE TEXT. SAMPLE TEXT. SAMPLE TEXT. SAMPLE TEXT. SAMPLE TEXT. SAMPLE TEXT. SAMPLE TEXT. SAMPLE TEXT. SAMPLE TEXT.

Conclusion

Hopefully that is enough to get you started! If you have any questions, feel free to comment them here!










H2
H3
H4
3 columns
2 columns
1 column
52 Comments