Pelican: Add HTML anchors to article titles

Created on 22 May 2014  路  6Comments  路  Source: getpelican/pelican

When writing blog posts, I often use titles inside the content (in Markdown, lines starting by one or more #).

It's result in HTML tags. Is would be nice if this tags could have id anchors so we could link to a special position in the article.

Example

Markdown source article

I love Pelican

# What is Pelican

A [pelican](http://en.wikipedia.org/wiki/Pelican) is a bird and also a blog engine.

# Why is it so cool ?

It is written in Python, reads Markdown and produces Html.

Actual HTML

<p>I love Pelican</p>
<h1>What is Pelican</h1>
<p>A <a href="http://en.wikipedia.org/wiki/Pelican">pelican</a> is a bird and also a blog engine.</p>
<h1>Why is it so cool ?</h1>
<p>It is written in Python, reads Markdown and produces Html.</p>

Better HTML

<p>I love Pelican</p>
<h1 id="whatispelican">What is Pelican ?</h1>
<p>A <a href="http://en.wikipedia.org/wiki/Pelican">pelican</a> is a bird and also a blog engine.</p>
<h1 id="whyisitsocool">Why is it so cool ?</h1>
<p>It is written in Python, reads Markdown and produces Html.</p>

Most helpful comment

Most of what is discussed above is outdated now. For anyone stumbling upon this in (near) future, use toc extension instead. Putting the following lines in the conf file did the trick for me:

MARKDOWN = {
    'extension_configs': {
        'markdown.extensions.codehilite': {'css_class': 'highlight'},
        'markdown.extensions.extra': {},
        'markdown.extensions.meta': {},
        'markdown.extensions.toc': {},
    },
    'output_format': 'html5',
}

All 6 comments

Hi quack1,

if you want id in headers, use http://pythonhosted.org/Markdown/extensions/header_id.html
you need to install the extension and enable them via MD_EXTENSIONS http://pelican.readthedocs.org/en/latest/settings.html

Oh, didn't find that.
Thank you for your quick answer ! :)

If someone needs more information about how to configure that, I wrote a little article : english & french version

Most of what is discussed above is outdated now. For anyone stumbling upon this in (near) future, use toc extension instead. Putting the following lines in the conf file did the trick for me:

MARKDOWN = {
    'extension_configs': {
        'markdown.extensions.codehilite': {'css_class': 'highlight'},
        'markdown.extensions.extra': {},
        'markdown.extensions.meta': {},
        'markdown.extensions.toc': {},
    },
    'output_format': 'html5',
}

@johncf Do I need to download the TOC extension? Or it just is part of the Pelican codebase?

@TimothyBramlett just try what's above. It works because python-markdown has these extensions in its codebase.

However, I've noticed a different issue of note, in that settings for these extensions aren't be honored. See #2350.

UPDATE: I fixed my other issue; it was just me. See the issue for the specifics if you like.

Was this page helpful?
0 / 5 - 0 ratings