While reading this markdown cheatsheet, one thing got my attention. And it was,
You can also use raw HTML in your Markdown, and it'll mostly work pretty well.
But there is a catch. It will work mostly pretty well.That means not all tags are supported. So, I went out on an expedition to find out which of the HTML tags I can use in this editor. Here is a result.
Abbreviation
I can write HTML.
Just hover over the text HTML above ☝(the emoji is misplaced 😅) and see what happens.
Here is how to do it:
I can write <abbr title="Hyper text markup language">HTML</abbr>.
Highlight text
I am pretty much sure that you have noticed that the second HTML text in the above is highlighted. A simple trick is to use <mark> tags.
The text you want to <mark>Highlight</mark>
Center Text
Have you noticed that all the section headers are positioned in the center instead of in the right left of the screen?
Even, the whole pragraph itself is in the center!
To achieve this effect, you can use the <center> tags. Point to be noted: center tags are no longer supported in HTML5. Don't use this in real code.
<center>Center this code</center>
Keyboard shortcuts
This one is my favorite! Here is an example:
Press Ctrl + C to copy text (Windows).
Press Cmd + C to copy text (Mac).
To do this, you just simply embed the keys with <kbd>
Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).
Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac).
Table
Showing table is a bit common in Dev. But I still decided to add this one.
| Firstname | Lastname | Age |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
Here is the code
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
By the way, this code was copied from W3schools.
Show text correction
So, let's say you have make made a mistake and want show both the correct text and the wrong text.
Just use the <del> tag. You can use markdown(~~) also.
Controll text size
With the help of <h1>...<h6> tags, you can make your text bigger. But what will you do if you want to make your text small? Simple, you use <small> tag.
This is a small text.
This one is even smaller
Can it become more small?
Yes
Here is the code for it:
<small>This is a small text.</small>
<small><small>This one is even smaller</small></small>
<small><small><small>Can it become more small?</small></small></small>
<small><small><small><small>Yes</small></small></small></small>
Subscript, superscript
You can both subscript a text or superscript a text using the following tags, <sub> <sup>.
Just like this.
You can both <sub>subscript</sub> a text or <sup>superscript</sup> a text
Underline text
As straight forward as it sounds.
As <u>straight forward</u> as it sounds.
Captions for images
In most of the blog posts(from other platforms) I see the authors mention the source of the image to avoid any kind of copyright issue. But such initiative in Dev is rare(or I haven't seen them a lot).
If you wished to add a caption like this but didn't know how, here is the code.
<figure>
<img src="graph.jpg">
<figcaption>Fig.1 - graph.</figcaption>
</figure>
If the the given image URL is valid, it should generate a similar output like this.
I hope this will help you spice up your next post a bit more. Because someone said,
Varity is the spice of life
Now, you many of you are wondering It would be great if I can use raw CSS also?
Let me know in the comment section if you know any more interesting hacks that I can apply. Until then
happy coding
Top comments (5)
Using class attribute works, but it's captive to stylesheets pre loaded at site.
I was thinking to dig deeper into Dev's source code to find some more hacks 😋
Very useful, I needed to add captions to some images specially for accessibility purposes, thanks!
This is gonna be really helpful, thank u!
You are most welcome 😁