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

in steem •  5 years ago  (edited)

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!










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:  

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?

  ·  4 years ago (edited)

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.

Aprobado

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

ThankYou
SoMuch
For SharingThis
With us!:)

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.

This was really helpful. Thank you so much for making this.

作为新加入的一员,这是我要看的第一篇重要的帖子

This is a good page for testing new UIs.

We thank you. It is very well explained.

Thanks very much for this post.it will help me improve the page layout of my content.

Really interested thanks

thank you for sharing!

Thank you for this nice guide! Very useful for increasing the quality of posts!

It was a great starting lesson
This is because......

  • 1)It has taught few tools to begin with
  • 2)It has given an opprtunity to explore for explorer
  • 3)It was nicely exemplified.
    The succes of the poster is that I was able to write this comment with without any past prior experience of writing in markup language.
    Thanks for keeping this a learnable place

Thanks for your adive.realy this is very usefull

좋은 정보 감사합니다. 궁금한 점이였는데, 모두 해소가 되었네요^^

This is helpful guide. Thank you for sharing.

So, we cannot use steemit like WordPress editor. But I like the new formattings.

Thanks for sharing this. This is valuable especially those who are new to the platform. When I started guides like this was hard to come by.

Awesome guide! I will definitely put these advanced tricks to good use in future posts

Thanks! Substantial publication! It will come in handy for me!

So helpful

Thank you so much, that was very useful.

Excelente contenido y muy util, en especial para quienes estamos iniciando. Gracias

Thank you for your guidance !
Profile_banner_Patreon_.JPG

@cmp2020 Thanks for this is very helpful

Excellent article and much appreciated. I will be using this in my next post to see how it works. Thanks.

Nice one, glad i came across this post. helped a lot.

Hi dear...
I hope you are enjoying good health..
Actualy i am new to steemit....Please update me about how can i join club on steemit???

nice

谢谢,很有帮助!

Thanks for this enlightenment it is of great advantage and it has settled my doubt.

How to align a text to Center of the Page?

I am a beginner this helps me alot

Great information,
Thank you

Thank you for your guide. It is useful for a newcomer.

Thanks for such useful information.

Hola amigo @cmp2020, muy directo su publicación y muy bien explicado. Excelente🤗✌️

Informative

Tks!

非常有用,谢谢

excelente vecino ¡Bendiciones!