Today I want to try some newly learned Markdown techniques, and I'm quite excited about it. To give you a bit of background, it all started a few days ago when @justinparke shared some banners he'd created, and I asked him about how to turn them into a clickable link. His reply was instantly helpful, and what's more, it made me realize that the piece of code I needed for this trick was simpler and more intuitive than I thought... in fact, ridiculously so.
So then I had to mention how impressed I was with his two daughters' blog @kidsisters and it occured to me that I would love to learn some of those cool tricks they employ. He seemed to like the idea too, and it didn't take very long before his daughter Srey-Yuu posted a very well detailed instruction manual on using Markdown. So now, as the good student I would like to be, I want to try using those techniques... and hopefully push my limits a bit further out.
Putting Things in the Center
Once again, I'm pleasantly surprised at how self explanatory this is: Apparently, all you need to do is add the word center in these brackets <> before whatever you want to center, and following it once again with a slash / before the word center. Apparently the slash indicates to switch off the function. As it turns out, you can center the title, an image, or an entire paragraph, like I am doing here.
Hehehe, I had to look for an older picture, with fewer pixels, that didn't fill out the entire screen anyway. That's right, with these smaller pics it's essential that they are nicely centered. So I'm quite happy!
Titles and Text Sizes
Admittedly, this trick is an older one, which I had been using myself. However, instead of using the h1 through h6 (again in the same <> brackets with the slash / to indicate to stop using it) I've simply used the # signs before the title.
What I'm curious about
now
is if I canchange
thesize
of the words right in the middle of a paragraph.It looks like I can't! Using this technique seems to be made specifically for headers, just like the # signs. Oh well. The other thing I'm noticing right now: Everything is still being centered, even though I've included the command right after I wrote I'm quite happy. Okay, now I'm noticing, how this paragraph is NOT being centered any more, even though I didn't indicate it before this paragraph. Something is not right... Oh well, let me just draw a line here and move on to something else.
Drawing a Dividing Line
Can you see this faint little line I just drew? You can't? It's there, believe me, but I have to agree with Srey-Yuu that this line is not nearly as impressive as a cool divider image, such as this one:
Putting Pictures and Text Side by Side
Italics and Bold Lettering
Well, this may be the only Markdown techniques I have been using so far. And that's because they are so straight forward: an asterisk * before and after a piece of text puts it into italics and doing the same with two ** makes it bold. Nothing new here, except for now I'm thinking: There MUST be a way to use bold print and italics in combination with pulling pictures left or right. I wonder what it is.
Writing Two Columns Side by Side
| And this is the other function I was super excited to learn how to do: A table, or as I like to see it, two columns you can use for writing bi-lingual texts, for example. Let me try it right away in German! | Und das ist die andere Funktion, über die ich mich total gefreut hab sie zu erlernen: Eine Tabelle, oder wie ich sie lieber sehe, zwei Kolumnen, die man zum Beispiel für zweisprachige Texte verwenden kann. Lass sie mich gleich mal auf Deutsch ausprobieren! |
Okay, so far so good. And since German takes more space anyway (due to its lengthy words), it seems like its column is automatically wider, so that the two columns have the same length. Quite neat.
Now I'm just wondering: can I still use bold and italics in this table function? Let me try with some random words. It works!!! Okay, now I'm excited!
Clickable Links
Once again, this is something I had been using for a while: Using two sets of brackets, first these ones [] then these ones () with nothing in between. Inside the first ones you put the text or picture you want to make clickable, and inside the second ones you put the destination url. That's it! I used to make links for texts all the time, but it was @justinparke who showed me that you can use the same thing for images.
So since I want to publish this post in the Build-It Community, let me use the corresponding banner, made by @justinparke , which I saved in .png format. Here it is:
Final Analysis
Let me just recap what I've learned so far:
- Centering texts and pics (Though I'm still not sure why I couldn't turn it off where I wanted to.)
- Changing text size for headings (Not something I will really use; the two # signs work perfectly fine for me.)
- Making dividing lines (Again, nice but I doubt I'll make much use of it. I'd rather get a set of cool looking divider images.)
- Pulling pictures to the right or left wrapped around by text (now this is a very awesome feature. I just wish the bold / italics worked there too.)
- Making tables of two columns side by side (Again a very neat technique. I'm sure I'll make good use of this one!)
- Making clickable links for texts and images (Something I've known, just expanded upon it. Very nice.)
Next Horizon
Okay, before posting this, here is the next thing I would like to learn. I've seen Srey-Yuu use it in her instruction post, so I know she knows about it, but it was not part of the material covered: changing the size of a picture. It would be great if I could make thumbnails, or let's say a reduced size image, like the smaller pics in her "Using everything we learned" part. Specifically in my street-art posts, I would like to show people a collection of small images of previous murals I've covered, so by clicking on them they can go directly to the post featuring that mural.
A Huge Thank You!!!
As you can see, I am not done with learning (like anyone ever is), but already I am really happy to have asked for this course. I hope you have enjoyed teaching it as much as I have learning from it. So my great THANKS is going out to Srey-Yuu from @kidsisters , for taking it upon yourself to share your knowledge on Markdown with me, and also to @justinparke for supporting and encouraging our learning.
Very nice - especially the columns & fitting text around images (although readabiiity sometimes suffers). PeakD has most of these fearures as standard clickable icons. And the fun text dividers? Go check out the @stockimages community run by @minismallholding.
Life long learning? LOVE IT. 💖↗️🌷
Posted using Dapplr
I have been meaning to properly explore the stock images community for far too long. !ENGAGE 25
ENGAGEtokens.Very good. I would like to know how to justify the text in Peakd, is it possible to do it?
Here's an example @cryptoxicate. Just put your text in between those two blocks of code. I've shown you the same text not justified for comparison. !ENGAGE 10
<div class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac ultricies elit. Curabitur pellentesque ullamcorper libero, ut tristique quam laoreet vel. Integer faucibus pulvinar nibh, sed vulputate libero placerat id. </div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac ultricies elit. Curabitur pellentesque ullamcorper libero, ut tristique quam laoreet vel. Integer faucibus pulvinar nibh, sed vulputate libero placerat id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac ultricies elit. Curabitur pellentesque ullamcorper libero, ut tristique quam laoreet vel. Integer faucibus pulvinar nibh, sed vulputate libero placerat id. Mauris bibendum mauris risus. In gravida, lorem ac pretium luctus, tellus massa rutrum nisl, vel ultricies purus felis in lacus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac ultricies elit. Curabitur pellentesque ullamcorper libero, ut tristique quam laoreet vel. Integer faucibus pulvinar nibh, sed vulputate libero placerat id. Mauris bibendum mauris risus. In gravida, lorem ac pretium luctus, tellus massa rutrum nisl, vel ultricies purus felis in lacus.
Excellent, thank you very much for teaching me @justinparke, from now on I will apply it in my posts. I did it in this comment to practice
ENGAGEtokens.Appreciate it, brother!
Congratulations @stortebeker! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s) :
Your next target is to reach 4500 replies.
You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word
STOPCheck out the last post from @hivebuzz:
Love this post, I enjoy how we are witnessing your growth as you write the blog article. I may need to brush up on my markdown skills myself!
Well, the truth is, my growth you are seeing took place in the few hours between reading the @kidsisters post and writing mine. And yes: I certainly should have done this a long time ago. But then again, in that case I wouldn't have had Srey-Yuu to teach me. So it's all good.
!wine
Congratulations, @justinparke You Successfully Shared 0.300 WINE With @stortebeker.
You Earned 0.300 WINE As Curation Reward.
You Utilized 3/3 Successful Calls.
Total Purchase : 21738.785 WINE & Last Price : 0.290 HIVE
HURRY UP & GET YOUR SPOT IN WINE INITIAL TOKEN OFFERING -ITO-
WINE Current Market Price : 0.295 HIVE
!wine
Congratulations, @justinparke You Successfully Shared 0.100 WINE With @stortebeker.
You Earned 0.100 WINE As Curation Reward.
You Utilized 1/3 Successful Calls.
Total Purchase : 21738.785 WINE & Last Price : 0.290 HIVE
HURRY UP & GET YOUR SPOT IN WINE INITIAL TOKEN OFFERING -ITO-
WINE Current Market Price : 0.295 HIVE
This post really pushed Srey-Yuu's limits, but it was good for her because had to learn a new code to be able to make her markdown visible.
Concerning your question about thumbnail size and making it so that you could link them to corresponding posts, etc. So, one easy way to change image size is literally change it, and I mean using a program to trim or scale them down to your desired pixel dimensions before importing them. Using smaller images is also make your post load faster for people in developing countries with slow internet too.
Anyhow, especially if your goal is to use these thumbnails as links to posts, there's no need to upload a full-size image. I'll show you a simple way this could be achieved.
<center>[](https://www.peopleofwalmart.com/)[](https://www.sadanduseless.com/cats-wearing-tights-funny/)[](https://oracleofbacon.org/)</center>Images are 320x214px, but you can see the image size wasn't responsive and pushed one underneath, not ideal. A table can fix this and force images to resize to fit the desired space.
I hope this helps you a bit.
Oh, I see. You're using the table, where each image is centered in each table space, which reduces the image to the size of the space. So if I put four pics instead of three side by side, they would be even smaller. Once again, a very elegant solution for something so simple. Thank you!
!BEER
View or trade
BEER.Hey @justinparke, here is a little bit of
BEERfrom @stortebeker for you. Enjoy it!Learn how to earn FREE BEER each day by staking your
BEER.You are a very good student and your styles are beautiful. I think you know more then me now. Sorry I forgot to tell you that you can't change size in a paragraph. You are a very amazing explain. I'm not really good with explain. Oh, you can use this code to make the code not invisible:
```Codes Here```I still make some mistakes too. For the first time I am upset because I can't remember all the codes I learned. My dad have to fix a lot of my codes. My mom also makes a lot of mistake. My mom wrote centre instead of center. Well, some times I need some help too with my code.
Hehehe, I'm sure you know, good teachers make good students! :-)
Also, I don't try to remember all the codes. Instead, I've saved them in a piece of text file, from where I can copy-paste them into my blog. Of course, eventually I'm sure I'll remember them. The easiest ones like headings, centering, or bold I don't need to look up, still I have them saved just in case.
Oh nice! Thanks for this code to make the code invisible! Just what I needed for writing this post.
And as far as mistakes go, not all of them are real mistakes. For example, both centre and center are correct, the first one is British English spelling, the second one American English. You know, just like theatre or colour.