Spice up you next Dev.to post with these cool editor hacks!

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>

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).

Showing table is a bit common in Dev. But I still decided to add this one.

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.

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.

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>

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

As straight forward as it sounds.

As <u>straight forward</u> as it sounds.

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