4th Street Bar Hive-Bar

Hive-Bar Powered by Hive beta-fdb5b5b

Community post

Hive Pope Guide to Markdown Code: Fancy Formatting

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.

![Hive Pope Flag v3 sm.png](https://images.hive.blog/DQmRPx5VYq68Wnj4UFNTeqkhG7BPioZxVyMwBGkYcLVMATB/Hive%20Pope%20Flag%20v3%20sm.png)

Centering

If you want to center an image or text in a post,

use the proper opening and closing tags.
 <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

![signpost](https://pixabay.com/get/5fe7d64a4351b10ff3d89960c62d3f761c36dce65a56_640.png) [Image credit](https://pixabay.com/illustrations/directory-wood-shield-signposts-973993/)

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:

https://images.hive.blog/0x0/https://files.peakd.com/file/peakd-hive/jacobtothe/rnRexgKt-Hive20Divider20Bar20Text.png
***

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?

  1. Steal underpants
  2. ???
  3. 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.

https://images.hive.blog/0x0/https://files.peakd.com/file/peakd-hive/jacobtothe/rnRexgKt-Hive20Divider20Bar20Text.png
***

As always, comments and criticism are welcome. Don't be afraid to experiment with new ideas and creative post layouts!

22 upvotes $0.84

Replies (21)

Review before signing

Posting as . Signing with . Keychain permission: Posting. Hive Keychain will ask you to approve this action next. 


  

    Technical details
    

      Operation fingerprint: