index.txt

---
title: Anchor
description: Generates anchor target on heading elements automatically.
icon: >-
  M12 2A3 3 0 0 0 9 5A3 3 0 0 0 11 7.83V9H8V11H11V19.92C10.26 19.79 9.5 19.58 8.79 19.27C8.05 18.95 7.4 18.56 6.82
  18.09C6.24 17.62 5.78 17.11 5.44 16.55L7 15L3 12V15C3 15.97 3.27 16.88 3.82 17.72C4.37 18.56 5.09 19.31 6 19.95C6.87
  20.59 7.84 21.09 8.88 21.45C9.93 21.81 10.97 22 12 22C13.03 22 14.07 21.8 15.12 21.44C16.16 21.08 17.13 20.58 18
  19.95C18.92 19.31 19.63 18.57 20.18 17.72C20.73 16.88 21 15.97 21 15V12L17 15L18.56 16.55C18.22 17.11 17.76 17.62
  17.18 18.09C16.6 18.56 15.95 18.95 15.21 19.27C14.5 19.58 13.74 19.79 13 19.92V11H16V9H13V7.82A3 3 0 0 0 15 5A3 3 0 0
  0 12 2M12 4A1 1 0 0 1 13 5A1 1 0 0 1 12 6A1 1 0 0 1 11 5A1 1 0 0 1 12 4Z
color: '#3c7271'
author: Taufik Nurrohman
type: Markdown
version: 2.0.0
...

This extension automatically generates anchor targets on headings. If you are already using the
[Table of Contents](https://github.com/mecha-cms/x.t-o-c) extension, you may not really need this extension as it does
the same thing with some additional features.

### Usage

You have complete control to specify your own heading ID using Markdown Extra syntax or plain HTML markup. This
extension will not overwrite the specific ID you specify in the heading elements:

~~~ .md
### Heading Level 3 {#asdf}
~~~

~~~ .html
<h3 id="asdf">Heading Level 3</h3>
~~~

~~~ .html
<p aria-level="3" role="heading">Heading Level 3</p>
~~~

To prevent automatic anchor insertion, add a `role` attribute with a value other than `heading` to the desired heading
elements:

~~~ .md
### (Not) Heading Level 3 {role='text'}
~~~

~~~ .html
<h3 role="text">(Not) Heading Level 3</h3>
~~~

### Symbol

The default anchor symbol is a [section sign](https://en.wikipedia.org/wiki/Section_sign) character. You can use your
own anchor symbol by setting the value of the CSS variable `--anchor` (yes, the anchor text is actually just a CSS
pseudo-element):

~~~ .css
:root {
  --anchor: '\2693';
}
~~~