exmarkdown-heading-anchor

exmarkdown-heading-anchor

⚓️ A svelte-exmarkdown plugin that places anchors in heading tags

Demo

This is plugin of svelte-exmarkdown.
By using this plugin, convert Markdown as follows

Markdown

# Heading1

## Heading2

### Heading3

↓

HTML

<h1 id="Heading1">Heading1</h1>
<h2 id="Heading2">Heading2</h2>
<h3 id="Heading3">Heading3</h2>

This supports navigation by anchor links.

<a href="/path/to/page#Heading3">To Heading3</a>

Installation

npm i exmarkdown-heading-anchor

Example

<script>
  import { headingAnchor } from 'exmarkdown-heading-anchor'
  import { Markdown } from 'svelte-exmarkdown'
</script>

<Markdown
  plugins={[
    // ...
    headingAnchor({
      /**
       * Character to prepend to ID to avoid collision
       * @default ''
       */
      prefix?: string,

      /**
       * Tag to add ID attribute
       * @default ['h1', 'h2', 'h3']
       */
      include?: ('h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6')[],

      /**
      * Specify a string to be added as an anchor link after the heading.
      * If not specified, no anchor link will be added.
      * @example 🔗
      * @default undefined
      */
      anchor?: string
    })
  ]}
/>

Full Plugin Options

License

MIT