Internal anchors

Kirby 2 Solved ✅
1

Hello,

i have converted a Wordpress Blog to kirby and there are some articles with internal anchors (a TOC over the article).

How can i set internal anchors with markdown?
I have tried some hints from stackoverflow but nothing works.

I can put plain HTML into the text but… with markdown? how?

<a href="#one"></a>
....
<a name="one"></a>

thx in advance,
Svent

2

if markdown fails creating a custom kirby tag to print custom html code should do the trick.

3

With Markdown extra enabled, you could add IDs to headers, if you only need headers as your ankers. You could then use kirbytext links to link to them.

Maybe the getkirby.com way of adding TOCs is also interesting in this context. Might not work for you if you need manual ankers, but wanted to point this out for completeness’ sake.

1 Like
4 
c::set('markdown.extra', true);

in your config.php. docs

5

from https://getkirby.com/docs/cheatsheet/kirbytags/link :

Link to an anchor

(link: #some-section text: Link to some section on the same page)

But how do i set the #some-section anchor without HTML?

6

As I suggested above, you can enable Markdown Extra, then you could add a header with an ID like this:

## Some header I want in my TOC {#some-section}

This only works with headers, fenced code blocks, links and images.

2 Likes
7

create a new site/tags/anchor.php file and add this content.

<?php

kirbytext::$tags['anchor'] = array(
  'html' => function($tag) {
    //return '<a name="' . $tag->attr('anchor') . '"></a>'; // deprecated html5
    return '<a id="' . $tag->attr('anchor') . '"></a>';
  }
);

now you can use it like this…

(anchor: example)

which will cause kirbytext to generate html code

<a id="example"></a>

edit: replaced name with id like @anon77445132 suggested below.

1 Like
8

ok… own ktag. thank you!

9

works! thanks both of you!

10

Please note that the name attribute

<a name="xyz"></a>

is deprecated in HTML5. We can use ID="xyz" instead.

In German language you can look at http://wiki.selfhtml.org/wiki/HTML/Regeln/Seiteninterne_Verweise#Sprungmarken_mit_dem_name-Attribut for details.

11

You can use but you do not have to use an “a” tag for the ID. So the code can be shorter, if you use another tag for the ID.

Of course, the ID must be implemented within the other tag…