remark-slug-anchor
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    Remark Slug Anchor

    Automatically append anchor tags to your header elements.


    Your code:

    # Hello World

    Your page:


    Install

    This package is ESM only: Node 12+ is needed to use it and it must be imported instead of required.

    npm install remark-slug-anchor remark-slug

    You can now use this along with remark-slug (must use), you can find an example here 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:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remark-slug-anchor@0/dist/anchor.css" />

    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:

    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

    Install

    npm i remark-slug-anchor

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    5.69 kB

    Total Files

    6

    Last publish

    Collaborators

    • ghostsos