I've done a lot of 'research' on figuring out how to use markdown here at Steem. However, there are a few things that most of the tutorials gloss over or don't cover at all. This post is meant to be a deep-dive of all the lesser known features of markdown/html (mostly just div pull left/right).

_{https://steemit.com/tutorial/@carrieallen/ultimate-markdown-tutorial} This was the best tutorial on markdown I could find. It's also at the top of the list when you search 'markdown' so many of you have probably already seen it.

_{https://steemit.com/steemit/@jonrhythmic/formatting-your-steemit-posts-using-html-markup-text-formatting-guide} This is a good secondary guide.

_{https://steemit.com/emojis/@blueorgy/steemit-emojis-master-list} Emoji master list.

First thing's first. It's difficult to show people how to use markdown because if you type out the code the words disappear and turn into... you guessed it: markdown. If you want to show someone code on Steem you need to put a tab in front of the words. This creates a text box.

Unfortunately, if you push 'tab' while using the Steemit/Busy frontend, it doesn't tab, it just goes to the next window inside the web page. To do it manually just add four spaces. You can also copy/paste tabs into your blog, you just can't add them directly. Example:

I looked far and wide to figure out how to create that text box with actual code instead of using the 4 spaces shortcut. I never figured it out. I'm guessing it's just a simple html command that I don't know about. Might even just be a simple HTML "input" Tag with special options. If you know the answer please post it below. I'll eventually edit this post when I find it.

In any case these are the four tags I'll be showcasing. You can use the div pull tags to pull pictures and/or text to one side. This function will automatically resize pictures for you so the width only takes up half the screen.

This text is written after the /div tag. Text automatically fills the empty space. You don't have to encase it in a pull-left function after using pull-right. Adding a line break stops the auto-fill.

To create the line break just push --- at least three times on a new line.

---

The really annoying thing about Steemit is that the preview it shows you is not how it actually ends up looking after you post it. I've spent a lot of time on posts getting them to look exactly how I wanted them to, and then I go to post and everything is messed up. When you post, the text width gets a little scrunched, so text that was perfectly filling empty div space will now slightly overflow. Example:

You can see that I barely had 5 lines in the preview, but I bet when I post this I will have 5 full lines or maybe even a sixth line. This misrepresentation makes pull-right a little better than pull-left because overflow on a pull-right (with text on the left side) doesn't look nearly as stupid as a pull-left picture.

Overflow Overflow Overflow Overflow wwww Overflow Overflow Overflow Overflow wwww

Overflow Overflow Overflow Overflow wwww Overflow Overflow Overflow Overflow wwww

It can be fun to pull two pictures left and right and have them sandwich the text in between. You very rarely see anyone doing this and it's a good way to make the look and feel of your posts different from everyone else. Here's my attempt at going all out:

Welcome to spooky vision!!! Here we see I took a single picture of a Halloween border, broke it up into 4 pieces (top, left, right, bot) and then tried to mush them all together with my text in the middle. It's somewhat of a fail, but it's also somewhat kinda cool because you don't really see stuff like this on Steem.

Also, I always view stuff in dark/night mode. I'm not sure how many other people do this, but you should be aware that not everyone is seeing your page the way you do. After turning off night-mode it's easy to see that borders with a lot of white actually look a lot better when you view them "normally" because the white blends in with the rest of the page.

In addition, be careful of transparency. A transparent background will let the native background bleed through. This is something most wouldn't think about because the majority of the time you'll just see white in both instances. For someone like me who uses night-mode this is another matter entirely.

One of the most annoying things about using the div pull functions is that you have to delete the auto-labeling text every time you use it. Here's an example of not deleting the text:

Normally I'll simply highlight the ![spooky bot.jpg] part and hit the delete key twice (not backspace). The first delete gets rid of the ![spooky bot.jpg] and the next one burns the hanging ( on the next line. Then you have to get rid of the last ) at the very end.

This text was pull in neither direction. It simply fills the left side automatically because there is a bunch of dead space here.

code tag

Thankfully the other tags are much less complicated than pulling.
Ironically, the code tag does not escape code.
It's basically just a highlighter.

It's basically just a highlighter.

Here's an example of it not escaping code:


Here's an example of it not escaping code:


sub tag

The sub tag turns the text inside into a subscript. It basically just reduces the font. This is nice for links or boring text that you want your readers to know has a lower priority. You could use it for quotes and references as people normally do.

The sub tag is useful! _--@edicted

You can also nest the sub tag multiple times to make the text even smaller.

The sub tag is useful! _--@edicted

The sub tag is useful! _--@edicted

> The sub tag is useful! _--@edicted

Clipboard Manager

Apparently Windows 10 doesn't have a clipboard manager, which is weird. I copy/paste a lot of code like this over and over again to format my posts, so I downloaded a custom clipboard manager called 1Clipboard. The one thing that's annoying about it is that I can't sort the order of my favorites list, but that inconvenience hasn't been enough to have me look for a new program.

Using 1Clipboard, I push "Control Alt v" to open it, "t" to open my favorites, and then a number to select with favorite I want to paste:

You can tell I added the 'sub' tag three days ago and I wanted to keep the order of the first three intact. I accomplished this by re-favoriting the first three in reverse order to make sure 'center' is number one, left is 2, and right is 3.

Atom

I use a text editor called Atom for programming; it's a really popular one. Every programming text editor I've used allows you to highlight text and hit the tab key. If you try to do this on a word processor, the text is foolishly deleted and replaced with a single tab instead of tabbing all the lines that were highlighted. This feature allows one to paste code like this without having to add 4 spaces to every line manually.

this is code i wrote in atom and then highlighted all lines and pushed the tab key then i pushed shift-tab to untab all the text back to its original position after copying it

Conclusion

I hope you learned something from this auxiliary tutorial. It took me quite a while to figure all this 'basic' stuff out. With any luck, this knowledge will save a few people some time.

_{Example of me trying to use div: https://steemit.com/pow/@edicted/explain-it-like-i-m-five-reloaded-the-tale-of-l-scrolls}

Return from Auxiliary Markdown Guide to edicted's Web3 Blog