Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

rehype-heading-anchor

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rehype-heading-anchor - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

dist/index.d.ts

2

package.json
{
"name": "rehype-heading-anchor",
"version": "0.0.1",
"version": "0.1.0",
"description": "rehype plugin to add anchor tags to headings",

@@ -5,0 +5,0 @@ "main": "dist/index.js",

@@ -13,6 +13,7 @@ # rehype-heading-anchor

This plugin will wrap headings (h1, h2, h3, ... , h6) with anchor tags. For basic use, specifying the plugin should just work.
```js
import { rehype } from 'rehype';
import rehypeHeadingAnchor from '../src/index.js';
import rehypeSlug from 'rehype-slug';
import rehypeHeadingAnchor from 'rehype-heading-anchor';

@@ -30,5 +31,37 @@ const result = await rehype()

```html
<a href="#hello-world" class="heading-anchor"><h1 id="hello-world">Hello World!</h1></a>
<a href="#hello-world"><h1 id="hello-world">Hello World!</h1></a>
```
Note that only headings with ids will be processed. Using the plugin along with plugins such as [rehype-slug](https://github.com/rehypejs/rehype-slug) is recommended to auto generate ids.
Note that only headings with ids will be processed. Apply plugins such as [rehype-slug](https://github.com/rehypejs/rehype-slug) before this plugin to auto generate ids.
## API
```
unified().use(rehypeHeadingAnchor[, options])
```
`options.className` pass an array of string to add class names to the generated anchor tag
```js
import { rehype } from 'rehype';
import rehypeHeadingAnchor from 'rehype-heading-anchor';
const result = await rehype()
.data('settings', { fragment: true })
.use(rehypeHeadingAnchor, { className: ['custom-class'] })
.process('<h1 id="hello-world">Hello World!</h1>');
console.log(result);
```
Running the example above will yield
```html
<a href="#hello-world">
<h1 id="hello-world" className="custom-class">Hello World!</h1>
</a>
```
## License
MIT © Kazushi Konosu
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc