Dev.to tricks I wish I knew before
Tags: beginners, tutorial, learning, ui
Published: 2023-10-28 11:18:38

This is a must share! (Thanks to @michaeltharrington for teaching me!) Let's make dev.to more beautiful with these tricks.

{% embed https://dev.to/opensourcee/creating-engaging-buttons-for-your-devto-posts-4fn1 %}

---

### 1. How to add a table of content to your post?

To add a table of content like this:

#### Table of contents
1. [How to add a table of content to your post?](#chapter-1)
2. [How to add a CTA to your post or comment?](#chapter-2)
3. [How to add some expandable content?](#chapter-3)
4. [How to embed a GitHub repository?](#chapter-4)
5. [How to share a link to another post?](#chapter-5)
6. [What else can you do?](#chapter-6)

Do it like this:

```
#### Table of contents
1. [How to add a table of content to your post?](#chapter-1)
2. [How to add a CTA to your post or comment?](#chapter-2)
3. [How to add some expandable content?](#chapter-3)
4. [How to embed a GitHub repository?](#chapter-4)
5. [How to share a link to another post?](#chapter-5)
6. [What else can you do?](#chapter-6)

```

And then:

```
### 1. How to add a table of content to your post? <a name="chapter-1"></a>
// etc.
```

---

### 2. How to add a CTA to your post or comment? <a name="chapter-2"></a>


![Do it!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lj43vzfq7l0m6r1yee0b.png)

To add a CTA like this:

{% cta https://github.com/webcrumbs-community/webcrumbs %} Hey! Go now to our GitHub repository and give it a star! {% endcta %}

Do it like this:

```
{% cta https://github.com/webcrumbs-community/webcrumbs %} Hey! Go now to our GitHub repository and give it a star! {% endcta %}
```

---

### 3. How to add some expandable content? <a name="chapter-3"></a>


![Expand](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9pu1ke4d41cbk6tmj143.png)

To add a expandable content like this:

{% collapsible **What is WebCrumbs?** %} 

WebCrumbs is an admin panel for React websites that let you add plugins that extend the features of your website with only one-click, saving you time and effort you would have with implementing integrations or building things from scratch. 

It's like collaborating not only within your company but with developers all over the world.

Oh, and it's open source and free. Check our [GitHub repository](https://github.com/webcrumbs-community/webcrumbs) and give us a star to support our work!

{% endcollapsible %}

Do it like this:

```
{% collapsible **What is WebCrumbs?** %} 

WebCrumbs is an admin panel for React websites that let you add plugins that extend the features of your website with only one-click, saving you time and effort you would have with implementing integrations or building things from scratch. 

It's like collaborating not only within your company but with developers all over the world.

Oh, and it's open source and free. Check our [GitHub repository](https://github.com/webcrumbs-community/webcrumbs) and give us a star to support our work!

{% endcollapsible %}
```

---

### 4. How to embed a GitHub repository? <a name="chapter-4"></a>

To embed a GitHub repository like this:
{% embed https://github.com/webcrumbs-community/webcrumbs %}

Do it like this:
```
{% embed https://github.com/webcrumbs-community/webcrumbs %}
```

---

### 5. How to share a link to another post? <a name="chapter-5"></a>

To share a link to another post like this:
{% embed https://dev.to/opensourcee/wordpress-for-react-82f %}

Do it like this:
```
{% embed https://dev.to/opensourcee/wordpress-for-react-82f %}
```
---

### 6. What else can I do? <a name="chapter-6"></a>

![Right??](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ghkezvxmbfwyfrgz9x2t.png)

[Here](https://dev.to/p/editor_guide)'s a full list of what you can do!

**Do you know other tricks?**

### Did you like it?

{% cta https://github.com/webcrumbs-community/webcrumbs %} Help us out! Check our GitHub repo and give it a star! {% endcta %}