loading...

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

muhimen123 profile image Muhimen Updated on ・4 min read

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


Alt Text

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.


Fig.1 - Line chart for reactions


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

Posted on Jun 6 by:

muhimen123 profile

Muhimen

@muhimen123

Nothing more than a programmer nothing less than a programmer. Loves to solve Rubik's cubes in spare time.

Discussion

markdown guide
 

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 😋

 

This is gonna be really helpful, thank u!

 

You are most welcome 😁