Markdown Vs Markup | Useful for Hive Blog Formatting

in Hive PH5 years ago (edited)

Disclaimer: I'm not that Proficient in HTML or markup and markdown styles. I'll just share the tags or symbols that I'm using and those that I have experienced. I know that most of you here are good on it. I'm just doing this to help newbies like me. I also have chosen tags/symbols that are easy to use.
"Read now, thank me later!"

First let's be familiarized with what is Markdown and Markup?

Markdown

is a lightweight markup language with plain-text-formatting syntax, created in 2004 by John Gruber with Aaron Swartz. Markdown is often used to format readme files, for writing messages in online discussion forums, and to create rich text using a plain text editor.
Markdown

Markup

Markup language, a standardized set of notations used to annotate a plain-text document's content to give information regarding the structure of the text or instructions for how it is to be displayed.
Markup
Some markup languages, such as the widely used HTML, have pre-defined presentation semantics—meaning that their specification prescribes some aspects of how to present the structured data on particular media. HTML, like DocBook, Open eBook, JATS and countless others, is a specific application of the markup meta-languages SGML and XML. That is, SGML and XML enable users to specify particular schemas, which determine just what elements, attributes, and other features are permitted, and where.

HTML

stands for Hypertext Markup Language and forms the basic blocks of coding in the world wide web.

Most of us are familiar with Markdown styling. Because we have that here in Create a post Markdown Styling Guide. I'm not sure if most of us are using that area. But I do!
Markdown and Markup seems opposite but they aren't. Because they complement each other.
HTML or Markup's main feature is the tags that are incased in a Less than and Greater than signs or angle brackets "< >".
However Markdown uses simple characters like underscore sign (_), asterisk (*) and hash or pound sign (#). I'm just introduced to markup recently that's why I'm not using it that often. I'm into using more on markdowns in most of my blogs. I have seen this into one of the blogs that Markdown and Markup really complement because after the user has formatted his or her content using markdown, the browser will convert those codes into a valid markup.

When I have started here in Hive I always bother @monkeypattycake. I keep on asking for the markdown styling and I'm not aware that some are markups. She also provide links for me to read. And because I'm just using a mobile phone some of those markdown and markup are not working on my end. But I have discovered something for me to make use of those. I just need to copy and paste the ones that are on my past stories which I have created using our company units. (it's not permitted but I tried and because of that I'm audited by our IT's and that's subject to disciplinary action. That's why I'm just using my phone and never tried it again.) Copying and paste the ones that I have on my previous post and I also edit the address itself and/or the word on it into another one that's needed on my recent post.

Let's start familiarizing the symbols.

Markdown symbols consist of signs. For example, for

Header

I'm using hash or pound sign. # for Header1, ## for Header2, ### for Header3, #### for Header4, ##### for Header5 and ###### for Header6.

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

I'm also using an asterisk. * For italic *, ** for bold ** and *** for italic bold ***.

for italic
for bold
for italic bold

We can also use underscore _. For italic, bold and italic bold.
1underscore
2underscores
3underscores

Please do check this link for HTML Entities
I'm using greater than symbol > and another greater than symbol plus a dash or a hyphen > - to create a quote.

"I'm using those tags to emphasize quotes by other people or"

  • by myself

Links

I'm using [ square brackets for the name of the link ](and parentheses for address of the page) to make it look formal.
For example, square brackets for the name of the link

Columns

I'm using 3 or more of this sign |
(please do comment below if you know the name of this sign |, thanks)
You can also use as many as you like, if necessary.
| column 1 | column 2 |

| - | - |

| note 1 | note 2 |

column 1column 2
note 1note 2

(just remove the extra rows of space for you to get the finished product.)

Lists

I'm just using numbers 123... and hyphen - for lists.
For example,
Things to do after reading this blog:

  1. Upvote this post
  2. Resteem the post
  3. Comment on the post

Things to do after reading this blog:

  • Upvote this post
  • Resteem the post
  • Comment on the post

Things to do after reading this blog:

  1. Upvote this post
  • Resteem the post
  • Comment on the post

Photo or Image positioning

To position your image to the Right side just use this:
< div class"pull-right" >
images.hive.blog
< /div >

To position your image to the Left side just use this:
< div class"pull-left" >
images.hive.blog
< /div >

If you want to form them this way just position them like this:

< div class"pull-left" >
images.hive.blog
< /div >

< div class"pull-right" >
images.hive.blog
< /div >

If you want to form them this way just position them like this:

< div class"pull-left" >
images.hive.blog
< /div >

< div class"pull-right" >
images.hive.blog
< /div >

< div class"pull-left" >
images.hive.blog
< /div >

< div class"pull-right" >
images.hive.blog
< /div >

(Remember to remove the space)

In addition for markup symbol or HTML it consists of an opening tag < XXX > and a closing tag < /XXX >.
For example, to mark a series of words in the center, place the tag < center > before them and < /center > after them.

I just provided a space for those markup be visible because if I'll do the exact way of writing it it'll not be visible. If you'll use it. Make sure that it doesn't have space. Just like this.
-----§§§§§§§§§§§§§§§§§§§§§§§§§§-----
Thanks to @cryp2me and @xydtrips for inspiring me to make my own blog about Markdown and Markup styling.
-----§§§§§§§§§§§§§§§§§§§§§§§§§§-----

I have shared with you some of the things that helped me in writing my Blogs. Just like me, I know you're also asking about Markup and Markdown. I hope this can help you.

Thanks for reading.

-----§§§§§§§§§§§§§§§§§§§§§§§§§§§-----

PhotoGrid_1591855627594.jpg

YouTube

Facebook

Sort:  

Thank you for this, Mommy Sheh! It's very helpful for someone like me na newbie!

You're one of the reason why I have created this. Noong time na you're asking about center alignment ng text sa post. Ayun! Naisip ko na hindi lang pala ako ang nahirapan sa una. At may mga tanong. Doon ko nakita yung urgency ng pag share nito. To help others. 💖
#mommybelike

You can also share this to others by resteeming the post. Thanks. 💖

All very useful stuff to learn and use in posts on Hive.

Reminder: This week we are hosting the ASEAN Hive Music Video Review Challenge 🎙️ 50 Hive In Prizes.

Curated and reblogged by @ASEAN.Hive on behalf of the ASEAN Hive Community.
⋆ ᴀ ʜɪᴠᴇ ᴄᴏᴍᴍᴜɴɪᴛʏ ғᴏʀ sᴏᴜᴛʜᴇᴀsᴛ ᴀsɪᴀɴ ᴄᴏɴᴛᴇɴᴛ
⋆ ғᴏᴏᴅ, ᴛʀᴀᴠᴇʟ, ᴘʜᴏᴛᴏɢʀᴀᴘʜʏ, ᴘᴏʟɪᴛɪᴄs, ᴀʀᴛ, ᴍᴏᴠɪᴇ ʀᴇᴠɪᴇᴡs & ᴍᴏʀᴇ
⋆ sᴜʙsᴄʀɪʙᴇ ᴛᴏ ᴀsᴇᴀɴ ʜɪᴠᴇ ᴄᴏᴍᴍᴜɴɪᴛʏ ʜᴇʀᴇ
⋆ ғᴏʟʟᴏᴡ ᴏᴜʀ ᴀsᴇᴀɴ ʜɪᴠᴇ ᴄᴏᴍᴍᴜɴɪᴛʏ ᴠᴏᴛɪɴɢ ᴛʀᴀɪʟ

Thanks. 💖

Hope this one can help. 👊👊👊

It's at least a year since the last reply, so it's possible you may have found the answer to the question about the name for the "|" symbol.

If not, it's known by 2 names:

  • vertical bar
  • pipe

I've seen both names for "|" in many places, so whichever one you use is OK.