Spice up you next Dev.to post with these cool editor hacks!
Tags: html, webdev
Published: 2020-06-06 12:15:53

While reading [this](https://github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet) 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 <strong>mostly</strong> 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. 

<h2><center>Abbreviation</center></h2>
***
I can write <abbr title="Hyper text markup language">HTML</abbr>.

Just hover over the text <mark>HTML</mark> above ☝(the emoji is misplaced 😅) and see what happens.

Here is how to do it:
```html
I can write <abbr title="Hyper text markup language">HTML</abbr>.
```

<h2><center>Highlight text</center></h2>
***
I am <mark>pretty much sure</mark> that you have noticed that the second <u>HTML</u> text in the above is highlighted. A simple trick is to use `<mark>` tags.
```html
The text you want to <mark>Highlight</mark>
```

<h2><center>Center Text</center><h2>
***
<center><p>Have you noticed that all the section headers are positioned in the center instead of in the ~~right~~ left of the screen?</p></center>

<center><p>Even, the whole pragraph itself is in the center!</p></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.

```html
<center>Center this code</center>
```

<center><h2>Keyboard shortcuts</h2></center>
***
This one is my favorite! Here is an example: 
Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).
Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac).

To do this, you just simply embed the keys with `<kbd>`
```html
Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).
Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac).
```

<center><h2>Table</h2></center>
***
Showing table is a bit common in Dev. But I still decided to add this one. 
<table>
  <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>

Here is the code
```html
<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 <sup>W3schools</sup>.

<center><h2>Show text correction</h2></center>
***
So, let's say you have <del>make</del> <ins>made</ins> a mistake and want show both the correct text and the wrong text. 

Just use the `<del>` tag. You can use markdown(~~) also.


<center><h2>Controll text size</h2></center>
***
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.
<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>

Here is the code for it:
```html
<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>
```

<center><h2>Subscript, superscript</h2></center>
***
You can both <sub>subscript</sub> a text or <sup>superscript</sup> a text using the following tags, `<sub>` `<sup>`.

Just like this.

```html
You can both <sub>subscript</sub> a text or <sup>superscript</sup> a text
```

<center><h2>Underline text</h2></center>
***
As <u>straight forward</u> as it sounds.
```html
As <u>straight forward</u> as it sounds.
```

<center><h2>Captions for images</h2></center>
***
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xpxota82bcyznkjyfv3t.JPG)

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.
```html
<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.
<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/jlu3a32atjafws4u7qbn.png">
  <figcaption>Fig.1 - Line chart for reactions</figcaption>
</figure>
***

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 <mark>It would be great if I can use raw CSS also</mark>?

Let me know in the comment section if you know any more interesting hacks that I can apply. Until then
*happy coding*