DEV Community

Cover image for Dev.to tricks I wish I knew before
OpenSource for Webcrumbs

Posted on • Updated on

Dev.to tricks I wish I knew before

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


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?
  2. How to add a CTA to your post or comment?
  3. How to add some expandable content?
  4. How to embed a GitHub repository?
  5. How to share a link to another post?
  6. What else can you do?

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)

Enter fullscreen mode Exit fullscreen mode

And then:

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

2. How to add a CTA to your post or comment?

Do it!

To add a CTA like this:

Hey! Go now to our GitHub repository and give it a star!

Do it like this:

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

3. How to add some expandable content?

Expand

To add a expandable content like this:

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 and give us a star to support our work!

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 %}
Enter fullscreen mode Exit fullscreen mode

4. How to embed a GitHub repository?

To embed a GitHub repository like this:

GitHub logo webcrumbs-community / webcrumbs

Build, re(use) and share your own JavaScript plugins that effortlessly match your website's style. 🌟 Star to support our work!

We're super excited to announce that we're working on a major overhaul of the repository.
Right now, we're not accepting contributions, but this will change soon! 👀
Star the repository and sign up at webcrumbs.org to be the first to know when we launch



Webcrumbs Logo

Build, (re)use and share your own JavaScript plugins

Sign our newsletter      Join our Discord

Webcrumbs Screen




Vision

WebCrumbs aspires to be an industry-standard solution for modern web development, creating the first open ecosystem of plugins for the JavaScript community and related frameworks (like React, Nextjs, Vue, Svelte, and others). Whether you're a developer or not, you'll find it easy to create, manage, and extend your own websites with our intuitive admin panel and a rich ecosystem of plugins developed by the community.

Diagram



Your Support Matters

If you love what WebCrumbs is doing, consider starring us on GitHub. Your support is key to refining our product and growing our community. Star WebCrumbs on GitHub.

Star our repository


Help Us Grow

  • Star the repository: If you haven't yet (yes, you!), give us a…

Do it like this:

{% embed https://github.com/webcrumbs-community/webcrumbs %}
Enter fullscreen mode Exit fullscreen mode

5. How to share a link to another post?

To share a link to another post like this:

Do it like this:

{% embed https://dev.to/opensourcee/wordpress-for-react-82f %}
Enter fullscreen mode Exit fullscreen mode

6. What else can I do?

Right??

Here's a full list of what you can do!

Do you know other tricks?

Did you like it?

Help us out! Check our GitHub repo and give it a star!

Top comments (4)

Collapse
 
michaeltharrington profile image
Michael Tharrington

Woot woot! This rocks. 🙌

So many good helpful Markdown tricks and little features of the DEV editor in here. Thanks so much for sharing this resource!! 😀

Collapse
 
opensourcee profile image
OpenSource

Thanks for sharing first! 😊

Collapse
 
opensourcee profile image
OpenSource

Thanks for reading!! ❤️

Collapse
 
sharsha315 profile image
Harsha S

Cool tricks!!!