Public Service post for Newbies, coding for Markdown Style

in #instruction2 years ago

image.png
When I first came to the blockchain in 2017, I was a complete ignoramus when it came to making my posts

  1. more pleasing to look at, and
  2. more readable

I was helped a great deal by an early friend, @scrooger who had himself created some instructional posts with things that could be copy/pasted in, which I did for a long time, but then I learned to do these things for myself, and created documents for the longer code strings, and my favorite .gifs
I have also learned how to post these codes so that they don't OPERATE.

For example

<center>For example</center>
In these instances, you can see the command for Centering. If I type that without the "Back Quote" symbol at the beginning and the end
The Back Quote ` is on the top left of a QWERTY keyboard, same key as the TILDE ~ symbol, just below the ESC key.
Now to some commands for anyone who is new or just is unfamiliar with these options.
Disclaimer; many of these things are built in to the 'modern' front ends like Peakd and ecency.

for Centering type <center> at the beginning of what you want centered (text or image, doesn't matter) then type </center> at the end.
Note, in several of these, you'll see that there is an opening and closing command that are the same, but for the backslash / which cancels the opening command.
For Subscript/smaller text, type <sup> at the beginning, and </sup> at the end of what you want small
For BOLD type two asterisks before and after **bold**
For Italic, there are two methods One uses One asterisk *One asterisk* the other uses the Underscore same result _same result_
COMBINING BOLD AND ITALIC Three asterisks ***three asterisks*** (that is easiest) or two asterisks and the underscore _**two asterisks**_
You can use the HASHTAG to get really large bold text,

One hashtag (followed by a space) # One hashtag is the largest

The more hash tags makes it progressively smaller

hash tags ## hash tags

makes it ### makes it

progressively #### progressively

smaller ##### smaller

Notice the space between the # and the text. It doesn't work without that, otherwise it become a #hashtag

Now we move on to some more complex code strings.
For instance.
Say you want to make a post in two languages, with the text appearing side-by-side
Two Columns
<div class=pull-left>WRITE ALL YOUR TEST HERE FOR THE LEFT COLUMN.</div><div class=pull-right>WRITE ALL YOUR TEST HERE FOR THE RIGHT COLUMN.</div>
This one gets tricky. You put your text in between the> where it says "write your test here" and there are some spacing issues that I just had to learn by trial and error.
Two Columns

Say you want to make a post in two languages
with the text appearing side-by-side


image.png

I have found that you MUST insert some border once you are done with the two columns, or else what you type continues into the second column

Here is a command that is even more problematic.
Say you want some text AND AN IMAGE to be on the right side.
And SOME text and an image on the LEFT SIDE
Align left
<div class="pull-left"><img src="http://imgur.com/eHI22wC" /></div>
You insert your image in between the > on one end and the > on the other
Align left

and you start typing your text after the end of the code command.

Spacing is again, tricky
For me it was a matter of trial and error, and remains so because I rarely use this function.


image.png

Same thing for
Align Right
<div class="pull-right"><img src="http://imgur.com/eHI22wC" /></div>

Here, my text appears to the left of the image. It will automatically text wrap. If you want to start a new paragraph, you must hit enter a couple of times

Just to break

The line


image.png

I realize your head may be spinning right about now


<center>https://thumbs.gfycat.com/DismalThatCowrie-size_restricted.gif</center>
I keep a document saves with my favorite .gifs,

image.png
↑↑This is a screen shot of the top of the first page of 16 pages of .gifs I have saved↑↑

but if you search for one, find one you like for a specific purpose, Right Click on it, chose Copy Image ADDRESS if you copy image, it will be just a static image.
I also have several versions of POST FOOTERS saved on the document.
For Peakd:
<center>https://imgur.com/ZRPkuoN.jpg https://i.imgur.com/Cs07kWZ.gif https://images.hive.blog/DQmWU21rRhqQLoqKKKFq5zbQgWqooAQnkirZbP2eTMrpEWT/image.png https://files.peakd.com/file/peakd-hive/derangedvisions/Uf5lD91A-HiveGlitch.gif ![cyktlq.png](https://img.esteem.app/cyktlq.png) https://steemitimages.com/DQmYHe3LVwpEFCGnv2azPfFfzu3UVrVD2hMRMvnF63GkzBG/royalfinest.gif</center>
And I have a slightly different one for ecency, but these are up to you, make them personal.
One last thing, how to insert a link Type the opening bracket [ then something to identify the link, it may be the word source, or the name of a person, then type the closing bracket ] followed by opening parenthesis ( the URL for your link and the closing parenthesis)
Top image [source](https://pixabay.com/photos/boy-thinking-pensive-thoughtful-2074662/)

This is enough for today

"Some help for Newbies and Markdown Coding"

by
Jerry E Smith
©12/03/2021
Top image source





cyktlq.png

Sort:  

Good morning my friend.
I have given little effort in trying to learn the markdown style, but with some of the examples you showed here I think I will be giving it a try.
I'd like to get down the writing to the left and right of a picture, how to increase the size of the words and how to make the writing much smaller.
Centering text and pictures is also something I would like to learn.
Wonderful informative post, lets see how I do.

I wish you great success my friend, and if I can help with anything, please let me know
Say Hi to that pretty wife of yours. I also hope you are healing well

I had seen you use the <sup> before and had wondered how you did it. That made me try to use <sub> and I guess you see it works too!

Now I can correctly write something like this: 1 gal H2O = 231 in3.

Woohoo! Ya cain't stop me now!

You got any more goodies? I've just been following the examples from github.

I saw this comment last night as I went to bed, and upvoted it. I'm up now on Saturday morning.

There is this website which allows you to create bold, italic, upside down, super and sub script text.
https://yaytext.com/tiny-text/
I use it for some things, mostly the upside down text, as an oddity.

Glad my post will be useful for you Brother Copeland

This was very educational

do html tags work too? although hashtags and asterisks are easier to use I see.

(This comment was done using h1 and b, cause that’s what I’m used to. And < p > for breaks even though I’ve been told not to haha.)

Back in the day, I used the <p> for page breaks and paragraphs too
I also have some codes for spaces; Sometimes these front ends put two words close together and nothing you can do will enter a space, but
&nbsp; will enter one character space

Lol. Back in the day.

Well, I have a rather long, serial post I saved from Steemit days, I saved the coding part, in a doc,
When I went to repost it there were all manner of codes that I no longer use, so...

I have always tried to center a text but never knew how to and this was just an eye opening. Thanks a bunch for sharing.

"One is happy to have been of service" 🤖

(quote from bicentennial man one of the greatest movies ever imo)

🥰☺️


The rewards earned on this comment will go directly to the person sharing the post on Twitter as long as they are registered with @poshtoken. Sign up at https://hiveposh.com.