https://github.com/ghostdevv/remark-slug-anchor
Package to work with remark-slug to generate clickable anchor icons
https://github.com/ghostdevv/remark-slug-anchor
hacktoberfest
Last synced: 2 months ago
JSON representation
Package to work with remark-slug to generate clickable anchor icons
- Host: GitHub
- URL: https://github.com/ghostdevv/remark-slug-anchor
- Owner: ghostdevv
- License: other
- Created: 2021-08-28T02:05:59.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-06-17T03:37:22.000Z (over 1 year ago)
- Last Synced: 2025-08-09T14:59:55.607Z (7 months ago)
- Topics: hacktoberfest
- Language: TypeScript
- Homepage:
- Size: 117 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/funding.yml
- License: LICENSE
Awesome Lists containing this project
README
# Remark Slug Anchor
Automatically append anchor tags to your header elements.
Your code:
```md
# Hello World
```
Your page:
## Install
This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c):
Node 12+ is needed to use it and it must be `import`ed instead of `require`d.
```bash
npm install remark-slug-anchor remark-slug
```
You can now use this along with `remark-slug` (must use), you can find an example [here](https://www.npmjs.com/package/remark-slug) of how to use `remark-slug` - include this package in the same way
You also need to import that css file, if you are using a preprocessor/bundler you can import from the package `remark-slug-anchor/dist/anchor.css`, if not use the cdn:
```html
```
# Options / Styling
We had to switch from embedding a svg to inline and due to that limitation styling isn't really possible on the svg itself
To pass in options do this:
```js
import remarkSlugAnchor from 'remark-slug-anchor';
import remarkSlug from 'remark-slug';
const plugins = [
remarkSlug,
[remarkSlugAnchor, { /* options */ }]
]
```
Options:
- `color`:
You can set the color of the anchor (if using built in anchor) with this option
> NOTE: You must use an absolute colour, you are unable to use something like `var(--color)`, anything like rgb, rgba, hex, built ins, etc are supported
- `icon`:
You can pass in your own **svg** icon, with this option
> Must be a string as it's encoded to be used as an anchor