DEV Community

Cover image for Write the best markdown you've ever created with these 5 snippets πŸ”₯
Camilo Micheletto
Camilo Micheletto

Posted on • Updated on

Write the best markdown you've ever created with these 5 snippets πŸ”₯

Table of Contents


Interactive Anchor πŸ”—

Some HTML elements are supported in Markdown, and one of them is the anchor <a>. In addition to linking to content on other pages, it's also possible to reference sections within the same page. When we create headings in Markdown, they automatically create anchors, but the advantage of using a anchor tag is that clicking on the icon allows you to place the fragment in the URL directly by the heading.

Β 

🧐 Example

:active πŸ”—

Β 

πŸ“ Source code
## :active <a id="active" href="#active">&#128279;</a>
Enter fullscreen mode Exit fullscreen mode


Browser Compatibility Table πŸ”—

I borrowed this component from the web.dev CSS course, and it's a great way to display browser compatibility in your documentation. Unfortunately, DevTo doesn't recognize this syntax, but GitHub and VSCode do!

Β 

🧐 Example (Doesn't work here on DevTo)

Browser Compatibility Table

Β 

πŸ“ Source code
<span>
  Compatibilidade com navegadores
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/au2ph8juz4l6gu8m6v99.png" width="18" height="18" alt="chrome" /> 1
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oc95bmrx1ic1yv2ufxnp.png" width="18" height="18" alt="edge" /> 12
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnv0yb558uyvttyxnsz7.png" width="18" height="18" alt="firefox"/> 1
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ae4m3sedx2hcpf5nkr0a.png" width="18" height="18" alt="safari"/> 1
</span>
Enter fullscreen mode Exit fullscreen mode

Β 

🧐 Example (This one works!)

chrome edge firefox safari
1 12 3 1

Β 

πŸ“ Source code
| <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/au2ph8juz4l6gu8m6v99.png" width="18" height="18" alt="chrome" /> | <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oc95bmrx1ic1yv2ufxnp.png" width="18" height="18" alt="edge" /> | <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnv0yb558uyvttyxnsz7.png" width="18" height="18" alt="firefox"/> | <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ae4m3sedx2hcpf5nkr0a.png" width="18" height="18" alt="safari"/> |
| --- | --- | --- | --- |
| 1 | 12 | 3 | 1 |
Enter fullscreen mode Exit fullscreen mode


Featured Image πŸ”— πŸ”—

Using the <figure> and <figcaption> elements yields a result quite similar to images in Medium posts. The <figcaption> describes the image, and using the <img> tag itself allows us to change the height and width properties, providing greater control over the artistic direction of the markdown.

Β 

🧐 Example

Cartoon icon of a person

C# e CΓ³digo, from Twitter

Β 

πŸ“ Source code
<figure> 
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmtdzk3zfsdvafrdc7wn.png" alt="Cartoon icon of a person" />

  <figcaption>C# e CΓ³digo, from Twitter</figcaption>
</figure>
Enter fullscreen mode Exit fullscreen mode


Native Accordion πŸ”—

Perfect for when you want to hide long sections like trivia, source code, etc.

Β 

🧐 Example

πŸ“ Spoiler?

What u looking at?

Β 

πŸ“ Source code
<details>
  <summary>Spoiler?</summary>

  > What u looking at? 

</details>
Enter fullscreen mode Exit fullscreen mode

Β 

Specifically in the case of DevTo, we use:

Copy code
{% details summary %} content {% enddetails %}
{% spoiler summary %} content {% endspoiler %}
{% collapsible summary %} content {% endcollapsible %}
Enter fullscreen mode Exit fullscreen mode


Centered Callout πŸ”—

Unfortunately, DevTo is allergic to <div>, but it works like a charm on GitHub and most Markdown readers. Perfect for that section that needs attention or directs to someplace.

Β 

🧐 Example

Centered phrase with a link indicating the next page

Β 

πŸ“ Source code
<div align="center">
  **Next Page &rarr; [Pseudo-classes](./2-pseudo-classes.md)**
</div>
Enter fullscreen mode Exit fullscreen mode


Free Icons πŸ”—

There's a enormous list of HTML code icons (I've used 2 in this article alone), just copy and paste!

We have the most basic ones like arrows β†’ (&rarr;) and ← (&larr;), and others more specific like ☭ (&#9773;). Since emojis take up more vertical space, causing a line break βœ‹, these icons are a good solution when you just need to add a touch to your documentation.

Β 

🧐 Example

❝ Error is what is wrong ❞
    - Charles Darwin

Β 

πŸ“ Source code
> &#10077; Error is what is wrong  &#10078;
> &emsp; &emsp; - _Charles Darwin_
Enter fullscreen mode Exit fullscreen mode

Β 
You can also use special spacing characters to create custom spaces, almost like Tailwind for Markdown. In the element below, the pipe | signals the beginning and end of the spacing.

|   | - &thinsp;
| Β  | - &nbsp;
|   | - &ensp;
|   | - &emsp;


So, did you learn something new? Anything you didn't know? Share your Markdown hacks with the community in the comments!

Top comments (0)