Formatting a post on Hive can seem difficult, but if you're ready to move beyond basic text tricks, you're probably eager to take your layout to the next step!
Today's topic is about rearranging the way text and images appear in your post. If there are enough comments, there may be a followup post to cover reader questions or embarrassing oversights on my part here.
Centering
If you want to center an image or text in a post,
<center>use the proper opening and closing tags.</center>
The images in this post are also centered using this code. This principle of opening and closing commands applies to most bracketed Markdown and HTML coding. The command is entered in brackets, the intended text or image link is entered, and the command is closed with a slash inside the bracket before the command.
Pull Left & Right
Maybe instead of centering an image, you want it to one side of the page with text wrapping around it. Maybe you want two columns of text side-by-side, such as parallel posts in different languages. Just adding an image places it in line with the text, and it doesn't work well.
Here's the solution!
<div class=pull-left> & <div class=pull-right>
It's a bit more complicated, though. The only reliable way I have found to make this work is using a blank line before and after this command, then the content to be pulled to the left or right, another blank line, the closing command
</div>
and another blank line after that before continuing with a new div class command for another column of text, or the main body of text I intend to accompany the image.
If an image is larger than half the screen, the image will be displayed at a reduced size so it only fills half the reading pane. If the image is smaller, any text added without its own div class command will fill the remainder of the space.
Section Break
This command creates a horizontal line in your post and creates a section break between whatever is above and below it. It's also very simple. Just type three asterisks in their own line!
***
You can dress it up with a section break, and image, and another section break, or some centered text, or anything else that might fit your style. For example:
This command goes hand-in-hand with the div class command above at times. For example, if you format your post so there are images on one side, and accompanying text captions on the other, they are unlikely to come out evenly. However, if you add these section breaks before and after each pair of columns, each set will match up whether the viewer is reading on a computer or mobile device.
Display Code
I can't actually show the command for the way I have been showing other commands so far. Ironic? Maybe.
Just type at least four spaces in a new line before typing the code you want to display. Whatever you type after the spaces will be displayed in a different typeface and a gray box that can be scrolled in the case of long command strings.
Here is some text after typing several spaces. If you are on hive.blog, this line will probably extend off-screen. On peakd.com, it shows as a block of text. Thanks for scrolling along if you are using the former.
Quotations
Do you want to quote someone, and have it look like a separate section from the rest of the text? Sure, you could use section breaks, italic text asterisks, and so on, but there is an easier way. You might say it's...
Elementary my dear Watson.
Sherlock Holmes never said that in any of Sir Arthur Conan Doyle's stories, but I'll use it for my example anyway.
> Elementary my dear Watson.
Numbered and Bulleted Lists
If you start typing a numbered list, Markdown recognizes it and formats it automatically. It even fixes your numbering mistakes, at least according to my view. Do you see entries 1-3, or are each labeled with a 1 as I typed it?
- Steal underpants
- ???
- PROFIT!
For bulleted lists, type a hyphen and a space before each entry, as seen in this hypothetical recipe ingredients list
- one can tomato sauce
- 1/2 tbsp. oregano
- 1 tbsp. thyme
- 4 oz.sliced mushrooms
- 1c uncooked noodles
What Next?
Don't be afraid to experiment by layering these elements together. These basic tools cover almost everything you probably need when properly combined. If this still isn't enough, check out the Markdown Styling Guide and experiment to see what works using the post creators at hive.blog or peakd.com! The preview panes at either site let you verify in real time whether the code you tried worked.
If you see some clever formatting in a HIVE post, you can take a peek behind the scenes, see how it was done, and replicate it yourself! Just edit the address in your browser by replacing the "hive.blog" or "peakd.com" part of a post address with "hiveblocks.com." Presto! You can see all the markdown code in its raw form. Try it out by looking at the first post and this post.
As always, comments and criticism are welcome. Don't be afraid to experiment with new ideas and creative post layouts!
This is great.
Thanks! When you commented, I was in the middle of adding some items I forgot to include earlier, so hopefully it is now even better!
Hello can you edit image size? Something like width width=50% would be incredibly awesome :)
Let's find out! I quick search suggests that some (but not most) Markdown implementations allow image size code. It doesn't look like the preview pane here supports the suggested code input. I advise contacting the HIVE Discord channel and inquiring further there.
Congratulations @hivepope! You received a personal badge!
Welcome Comrade!
Thank you for joining our fellow revolutionaries to promote decentralization and censorship-free speech.
Hive is your new home and you bravely chose to definitely turn your back on Steem.
Invite your friends to join our fight by sharing this post.
¡Viva la revolucion!
You can view your badges on your board and compare to others on the Ranking
Do not miss the last post from @hivebuzz:
Vote for us as a witness to get one more badge and upvotes from us with more power!
I’ve always used underscores for the break.
I think the asterisk commands all also respond to underscores, now that you mention it.
italics
bold
Yup.
That was very interesting information, and looks useful, although it's a lot for me to take in at once. I better bookmark this post.
Now that you know these options exist, you'll probably find ways to use them more often than you think.