FTG: freeCodeCamp TOC Generator

1. Write your headings in Markdown above get live results!
2. Copy your TOC's HTML by clicking the copy button near it.
3. In your freeCodeCamp blog editor, at your desired position embed a HTML card by clicking the "+" button.
4. Paste the copied text into that HTML card. Click outside to get an approximate preview. Note that this text has a HTML comment above that includes the original markdown. It is there to help you recreate the TOC without hassle in case you want to edit some parts.
5. In a similar way copy paste the headings to recreate them on freeCodeCamp blog editor at your positions you want.

1. In freeCodeCamp blog editor, open the HTML card of the Table of contents and copy the markdown text there at the very top inside an HTML comment.
2. Paste that into the textarea in FTG. The TOC and headings will be recreated from that markdown.
3. Now edit the markdown to update the TOC and headings.
4. Click the copy button near the Table of contents to copy the updated HTML along with the updated markdown placed at the top in an HTML comment to make further editing easier.
5. Go to freeCodeCamp blog editor and replace the HTML content of Table of contents with the copied text.
6. Now Go back to FTG and copy paste only the headings that you updated in a simliar way.

As of July 2022, there is no automatic way to do these things in freeCodeCamp blog editor. So I've made this to help freeCodeCamp authors automate some boring stuff.

Note: For styling it uses inline styles because attaching external stylesheets/scripts is not approved by the style guide.