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)
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
NFL | MLB |
---|---|
Eagles | Phillies |
Cowboys | Rangers |
etc | etc |
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.
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:
Conclusion
Hopefully that is enough to get you started! If you have any questions, feel free to comment them here!
I didn't know you made it into the Beginner's Guide with this!
Are you going to update the post to reflect the editor changes that are forthcoming?
I definitely may, but a lot of it will be the same in regards to Markdown and HTML. The difference is that the new editor will make markdown not necessary to format (though markdown will still be faster).
Interesting! I`m glad I run to this post. Very helpful.
Gracias, muy buena información para sacarle provecho.
Thanks, as a new user this is very essential information. For the purpose of the test I say Thank you in bold :)
testing
Bold
Very useful guide.
Thank you.
Thank you very much for the information and for the tips that you have shared. Greetings.
Very useful post!
Thank You dear you did such a great work. i totally understands it only by reading it once
Hi. Have you tested the photo with text codes yet?
Very helpful..
Just what i needed.
Thanks
This was quit insightful, more tutorials like this is needed.