exmarkdown-heading-anchor

exmarkdown-heading-anchor

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

Demo

Install

npm i exmarkdown-heading-anchor

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

# Heading1

## Heading2

### Heading3

↓

<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>

Example

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

  // ...
</script>

<Markdown
  md={/*...*/}
  plugins={[
    // ...
    headingAnchor({
      // Configuration (optional)
      /**
       * 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')[]
    })
  ]}
/>

[!IMPORTANT]

Currently Limitations

The attribute is added when the component is mounted, so the HTML rendered server-side does not have an id attribute.