Write the best markdown you've ever created with these 5 snippets 🔥

Table of Contents

• Interactive Anchor
• Browser Compatibility
• Featured Image
• Native Accordion
• Centered Callout
• Free Icons

---

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>

---

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)

 

📝 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>

 

🧐 Example (This one works!)

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 |

---

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

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>

---

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>

 

Specifically in the case of DevTo, we use:

Copy code
{% details summary %} content {% enddetails %}
{% spoiler summary %} content {% endspoiler %}
{% collapsible summary %} content {% endcollapsible %}

---

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

 

📝 Source code

<div align="center">
  **Next Page &rarr; [Pseudo-classes](./2-pseudo-classes.md)**
</div>

---

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 → (→) and ← (←), and others more specific like ☭ (☭). 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

> ❝ Error is what is wrong  ❞
>     - _Charles Darwin_

 
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.

|   | -  
|   | -  
|   | -  
|   | -  

---

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