1. markdown-it-toc-right
Adds syntax for an automatically generated table of contents to markdown-it markdown parser.
markdown-it-toc-right
Package: markdown-it-toc-right
Created by: zlluGitHub
Last modified: Sun, 08 May 2022 20:27:28 GMT
Version: 1.0.1
License: MIT
Downloads: 4
Repository: https://github.com/zlluGitHub/markdown-it-toc-right

Install

npm install markdown-it-toc-right
yarn add markdown-it-toc-right

markdown-it-toc-right

markdown-it plugin for adding a table of contents to markdown documents

Usage

Enable plugin

 let md = require('markdown-it')({
  html: true,
  linkify: true,
  typography: true
}).use(require('markdown-it-toc-right')); // <-- this use(package_name) is required

Example

 @[toc](Title)

Adding this tag with add anchors to each <h[n]> tag on your document, and will add a <ul> of hyperlinks pointing to these places on the page.

The end results looks like:

 <p>
     <h3>Title</h3>
     <ul>
	<li><a href="...">Heading 1</a></li>
	...
	... 
     </ul> 
</p>
...
...
<h1><a href="..."></a>Heading 1</h1>

Css

 .toc-box {
     position: absolute;
     top: 0px;
     right: 30px;
     width: 250px;
}

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin