GithubHelp home page GithubHelp logo

sveltinio / remark-headings Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 235 KB

Extracts the headings tree from your markdown and add it to the frontmatter.

License: MIT License

TypeScript 83.37% JavaScript 16.63%
mdast mdsvex remark-plugin table-of-content-extraction table-of-contents

remark-headings's Introduction

remark-headings

  sveltinio/remark-headings NPM version badge   license

Extracts the headings tree from your markdown and add it to the frontmatter.

Installation

npm install @sveltinio/remark-headings

Usage

remark

import { remark } from 'remark';
import { reporter } from 'vfile-reporter';
import headings from '@sveltinio/remark-headings';

const mdContent = `
# Welcome Post

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

## Intro

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

## Roadmap

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

### Short-Term

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

### Long-Term

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
`;

remark()
	.use(headings)
	.process(mdContent)
	.then((file) => {
		console.log(JSON.stringify(file.data.fm.headings, null, 3));
		console.error(reporter(file));
	});

Output

// file.data.fm.headings
[
   {
      "id": "welcome-post",
      "depth": 1,
      "value": "Welcome Post",
      "children": [
         {
            "id": "intro",
            "depth": 2,
            "value": "Intro"
         },
         {
            "id": "roadmap",
            "depth": 2,
            "value": "Roadmap",
            "children": [
               {
                  "id": "short-term",
                  "depth": 3,
                  "value": "Short-Term"
               },
               {
                  "id": "long-term",
                  "depth": 3,
                  "value": "Long-Term"
               }
            ]
         }
      ]
   }
]

mdsvex

// mdsvex.config.js
import headings from "@sveltinio/remark-headings";

export default {
  // ... rest of your config
  remarkPlugins: [headings],
};

License

Free and open-source software under the MIT License

remark-headings's People

Contributors

indaco avatar lubiah avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.