Would you like to learn 4 last Markdown codes that you can use on Steemit because this will give you all that you need to format your posts properly in no time?
In my first and second posts of this series of three, I showed you the 10 most important Markdown codes that you can use on Steemit: 5 Markdown Codes You Can Learn and Use Today and 5 More Markdown Codes to Learn Today!
You may also want to try the application I am using on my computer to write all my Steemit posts: Easily Create your Steemit Posts in This Markdown Editor!
4 Last Markdown Codes to Learn Today!
These are the 4 last Markdown codes that you need to know in addition of the 10 I have already shared with you in my previous posts.
Learn with me about tables, code blocks, clickable images with source link, resizing and centering images.
1) Tables
Making tables with Markdown code is easy when you follow the format shown below and use hyphens and pipes. The hyphens (- - -) are used to separate the headers from the following rows and the (|) to separate the columns.
Markdown code:
Header 1| Header 2
------------ | -------------
Row 1 Cell 1 | Row 1 Cell 2
Row 2 Cell 1 | Row 2 Cell 2
This is the result:
| Header 1 | Header 2 |
|---|---|
| Row 1 Cell 1 | Row 1 Cell 2 |
| Row 2 Cell 1 | Row 2 Cell 2 |
Let's make more columns and rows.
Markdown code:
Header 1| Header 2| Header 3| Header 4
------------ | ------------- | ------------- | -------------
Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 | Row 1 Cell 4
Row 2 Cell 1 | Row 2 Cell 2 | Row 2 Cell 3 | Row 2 Cell 4
Row 3 Cell 1 | Row 3 Cell 2 | Row 3 Cell 3 | Row 3 Cell 4
Row 4 Cell 1 | Row 4 Cell 2 | Row 4 Cell 3 | Row 4 Cell 4
This is the result:
| Header 1 | Header 2 | Header 3 | Header 4 |
|---|---|---|---|
| Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 | Row 1 Cell 4 |
| Row 2 Cell 1 | Row 2 Cell 2 | Row 2 Cell 3 | Row 2 Cell 4 |
| Row 3 Cell 1 | Row 3 Cell 2 | Row 3 Cell 3 | Row 3 Cell 4 |
| Row 4 Cell 1 | Row 4 Cell 2 | Row 4 Cell 3 | Row 4 Cell 4 |
2) Code blocks
If you want to display code in a "code block" like I have been doing to show you the Markdown code, then use the triple back ticks ``` around the code.
Markdown code:
```
Type your **code** here
```
This is the result:
Type your **code** here
3) Clickable Images with Source Link
I showed you the Markdown code for clickable images in my previous post and in this section we are just going to add a link for the source of the image.
Markdown code:
[](link-url)
[Source](link-source-url)
Modify the elements above using an alternate text, the URL of the image you have uploaded in Steemit (or another site), and the URL of the page you want to link to. Then replace "link-source-url" by the source URL.
[](https://steemit.com/life/@gmichelbkk/my-two-juice-recipes-of-the-day)
[Source](https://steemit.com/steemit/@gmichelbkk/5-markdown-codes-you-can-learn-and-use-today)
This is the result, the image is clickable and the source link is just after it:
4) Resizing and Centering Images
This will be useful if you want to resize your Steemit images and make them smaller without having to use any application, and then center them.
Markdown code:
Modify the elements above using an alternate text, the URL of the image you have uploaded in Steemit, and replace [width]x[height] by the size of the image you want.
)
This is the result, aligned at the left by Steemit:
If you want it clickable with the source link, then use the following.
Markdown code:
[](link-url)
[Source](link-source-url)
Replace the different elements by their values as we did before.
[](https://steemit.com/life/@gmichelbkk/my-two-juice-recipes-of-the-day))
[Source](https://steemit.com/steemit/@gmichelbkk/5-markdown-codes-you-can-learn-and-use-today)
This is the result, aligned at the left by Steemit:
If you want to center the clickable image with the source link, then just add the code <center> at the begining and </center> at the end. You can do the same if you want to only center text.
Markdown code:
<center>[](link-url)
[Source](link-source-url)</center>
Replace the different elements by their values as we did before.
<center>[
This is the result with the image and link aligned in the center:
Source
Aligning the image at the right and also pushing images at the left and right around text is much more HTML coding within the Markdown code and I don't see the point.
If there are more styling you want to do, then I would advise to use HTML for the whole post instead.
Would you upvote this post and follow me for more because this will encourage me to write more posts about coding like this one?
Would you please help @jerrybanfield become a top 20 witness because you can help funding projects to build Steem as explained here? Vote for jerrybanfield as a witness or set jerrybanfield as a proxy to handle all witness votes at https://steemit.com/~witnesses. Read the 5 reasons why I'm voting for Jerry Banfield as a witness and how to vote in my post.
Michel Gerard