Loading proofofbrain-blog...

Make Those Posts Classy

Image by tammcd at Pixabay


Introduction

Bear in mind that some editors will accept some HTML tags, but some of them are definitely difficult and HTML and Markdown cannot be used together. I have put both down here, and it will be up to the individual author as to which is acceptable in which editor they are using lol.
I hate finicky editors like that: hahahahaha!

There are markdown editors such as notable.app and evernote.com, as a couple of examples of downloadable editors; and then there are evernote.com and hackmd.io as a couple of online editors. These are all excellent editors, and surely they are like everything else: this one is good for this, and that one is good for that. Each has it's own pros and cons.

It should also be noted that there is no color in the standard editors for Hive, perhaps down the road somewhere that may possibly be implemented, but for now it's not available. I am not sure if it caused security issues, or else some other kind of issue.

A Few Useful Tags

<u></u> = UNDERLINE with HTML underline
<strike></strike> = strikethrough
<hx> = header
<br> = break (space)
<br /> = line break
<div></div> = division
<div class="text-justify"></div> = evens up the right edge
<div class="pull-left"></div> = pulls all the text or image to the left side
<div class="pull-right"></div> = pulls all text or image to the right

Text Size and Style

HTML tags

Heading text-size: 1

<h1> Heading text-size: 1 </h1>

Heading text-size: 2

<h2> Heading text-size: 2 </h2>

Heading text-size: 3

<<h3> Heading text-size: 3 </h3>

Heading text-size: 4

<h4> Heading text-size: 4 </h4>

Heading text-size: 5

<h5> Heading text-size: 5 </h5>

Heading text-size: 6

<h6> Heading text-size: 6 </h6>

text-style: bold

<h5><b> text-style: bold </b></h5>

text-style: Italic or Emphasis

<h5><i> text-style "italic" or "emphasis" </i></h5>

text-style: both "Bold" and "Italic"

<h5><strong><em> Project Notebook </em></strong><h5>


Lists

    Ordered list
  1. First item of importance
  2. Second order of importance
  3. Third order of importance

<ol> Ordered list
<li> First item of importance </li>
<li> Second order of importance </li>
<li> Third order of importance </li>
</ol>


    Unordered List (order is not important, it's just a list.)
  • Second
  • First
  • Third

<ul> Unordered List
<li> Second </li>
<li> First </li>
<li> Third </li>
</ul>


Images

Use of an "<a></a>" tag -

Source

Image to be entered and centered, and click on "source" or the photo and it will take you to the source of the image.
This is the way that you could code this, you would ultimately want it short and sweet:
Source = <a href="https://pixabay.com/vectors/bee-art-busy-bee-hive-honey-162038/"><img src="https://files.peakd.com/file/peakd-hive/jamerussell/23wgHKbKZxwAAJGdb7JddRNBjnbwj4NCR2v9gTirSMCH1fnSLHuR9JvZsCoLF8mqSr5AH.png"> </a></center>
This simply entails 2 separate tags, one is the <a> tag, and the second is the <img src>, or image source then the end </a> tag

Form:
<center><a href="URL"><img src="IMAGE"> Source </a></center>



Markdown


image.png

Image by Pexels at Pixabay , colored by @ thekittygirl

Text Size and Style

~~ ~~ = strikethrough (double-tilde, one at beginning, one at the end of the word)

header text-size: 1

# header text-size: 1

header text-size: 2

## header text-size: 2

header text-size: 3

### header text-size: 3

header text-size: 4

#### header text-size: 4

header text-size: 5

##### header text-size: 5

header text-size: 6

###### header text-size: 6

text-style: italic

*text-style: italic*

text-style: bold

**text-style: bold**

text-style: italic & bold

***text-style: italic & bold***

Lists

Lists are the exact same as HTML, they work really well in combination with Markdown.


teddy-bear-g8c7fbde6b_640.png

Image by Kay Wille

Image Form:


![image.png](https://files.peakd.com/file/peakd-hive/jamerussell/23wgF8xcudrtGyoRz3zVGh7998AEhRJKuXrFnUGevyVvmqQtmbBZZWKtPBk758mzmRNfv.png)

However, I would still be using an HTML "a" tag to credit the source:
<center><a href="https://pixabay.com/vectors/teddy-bear-bear-knuffig-cuddly-478559/"> Kay Wille </a></center>


Conclusion

So to wrap this up, these posts are best when you find the right combination of HTML and Markdown, but as stated in the introduction, not all editors take too kindly to be mixed with much HTML. So it takes a little bit of practice and experimentation to find what works best for you.

One other thing worth mentioning is some of this, especially with the images, is device specific, as some of these techniques do not seem to work well on mobile, and some do. Not sure how that works as I do not use mobile. Perhaps I will confer with a friend who does know how to post on mobile, and work up another reference post. We will see in the near future.


Gif created by @liberty-minded and modified by @jimramones

awesome gif created by @zord189



Personal invitation to The Terminal Discord server

Come on by, kick off your shoes and stay a while!



Ladies of Hive Supporter;
personal invitation to the Ladies Discord server:






jr - 10/14/2021

H2
H3
H4
3 columns
2 columns
1 column
45 Comments