DEV Community

Cover image for New Project: Markdown TOC Generator ๐Ÿ“‘
Rajesh Epili
Rajesh Epili

Posted on

New Project: Markdown TOC Generator ๐Ÿ“‘

Check out the project on GitHub to get started!

Hey everyone ๐Ÿ‘‹

Imagine you're working on a long Markdown document and need a table of contents to keep track of all the headings. Or you're writing a blog post and want an easy way to generate the TOC in Markdown. Iโ€™ve run into these problems too, which is why I created this Markdown TOC Generator.

What Does It Do?

This tool automatically generates a Table of Contents (TOC) for your Markdown files based on the headers. You can customize the TOC's title, numbering style, and formatโ€”whether HTML or Markdown. Plus, you can even add a "Back to Top" link to make navigation easier, especially in long documents.

Key Features:

  • Customizable TOC: Adjust the title, numbering style, and more.
  • Automatic Header Detection: The TOC is built from your documentโ€™s headers (#, ##, etc.).
  • Multiple Numbering Styles: Choose from numeric, roman, or alphabetical numbering (HTML format).
  • HTML & Markdown Outputs: You can output the TOC in either HTML or Markdown format.
  • Back-to-Top Link: Option to add a "Back to Top" link for easy navigation.

How to Use It:

Installation:

To get started, install the package via npm:

npm install @rrtechpro/markdown-toc-generator
Enter fullscreen mode Exit fullscreen mode

Example: Generating an HTML TOC

import { generateTOC } from '@rrtechpro/markdown-toc-generator';

const markdownContent = `
# Introduction
## Getting Started
### Requirements
## Installation
# Usage
`;

const options = {
  format: 'html',
  tocTitle: { level: 2, title: 'Table of Contents' },
  addBackToTop: true,
  tocFooter: 'Generated by My Tool',
  anchorPrefix: 'docs/'
};

console.log(generateTOC(markdownContent, options));
Enter fullscreen mode Exit fullscreen mode

Example: Generating a Markdown TOC

const options = {
  format: 'markdown',
  tocTitle: { level: 2, title: 'Table of Contents' },
  addBackToTop: true,
  tocFooter: 'Generated by My Tool',
  anchorPrefix: 'docs/'
};

console.log(generateTOC(markdownContent, options));
Enter fullscreen mode Exit fullscreen mode

Why Use It?

  • Efficiency: Automatically create and maintain your TOC as your document grows.
  • Customization: Tweak the title, numbering, and format to fit your needs.
  • Simple: Generate a clean, professional TOC in just a few lines of code.

The project is still in its early stages, but Iโ€™m excited to keep working on it. Any contributions, or even just starring and sharing it, would motivate me to continue improving it!


Check out the project on GitHub to get started. Feel free to contribute, report issues, or provide feedback!

Happy documenting! ๐ŸŽ‰

Top comments (4)

Collapse
 
bicibg profile image
Bugra Ergin

Hey nice work. That's look nice, clean and simple. I don't often write markdowns but I'm sure a lot of people would appreciate it. Let me know if you would be interested in a collaboration to turn this into an API on apixies.io.

Collapse
 
rajeshepili profile image
Rajesh Epili • Edited

Hey Burga!
The idea sounds great!
Let's contact and discuss more.

Collapse
 
nevodavid profile image
Nevo David

pretty cool, i always mess up bigger docs without a toc - you reckon keeping tools simple is more important than adding every feature?

Collapse
 
rajeshepili profile image
Rajesh Epili

Thanks for the feedback!
Yes, I believe keeping it simple is more important than adding every feature at the beginning. When starting out, not every feature is necessaryโ€”just the core functionality.
Hope this answers your question! :)