Introducing: ‘Kirby P(arsedown)E(xtra)P(lugin)’

Hey there,
when I was looking for a way to add classes to <code> elements generated by kirbytext(), I stumbled upon Taufik Nurrohman’s great ParsedownExtra (which is included by default) extension ParsedownExtraPlugin.


It easily adds some noteworthy features (see here for the complete list of possible options) - here goes:

Getting started

Use one of the following methods to install & use kirby-pep:

Git submodule

If you know your way around Git, you can download this plugin as a submodule:

git submodule add site/plugins/kirby-pep

Clone or download

  1. Clone or download this repository.
  2. Unzip / Move the folder to site/plugins.

Activate the plugin

Activate the plugin with the following line in your config.php:

c::set('plugin.kirby-pep', true);

In order to enable features of ParsedownExtraPlugin, read on about configuring it. If you want to activate kirby-pep only on specific domains, read about multi-environment setups.


Change kirby-pep options to suit your needs:

Option Type Default Description
plugin.kirby-pep.code_class String language-%s Defines the classes used by <code> elements (%s outputs the language specified at the beginning of your code block).
plugin.kirby-pep.code_block_attr_on_parent Boolean false Moves (inner) <code> element attributes on (outer) <pre> element.

Currently only these two options are available. In the future, more options will be supported - feel free to open a PR! Apart from that, let me know what you think, every kind of feedback is appreciated.

Gosh, I just love the Kirby community.

1 Like

Releasing v0.2.0-beta

As of this version, all available PEP features are added and should work out-of-the-box.

Here’s the official list of options & defaults (and some examples):

  • Element prefix (HTML / XHTML)
    • 'element_suffix' => '>' // HTML5
  • Predefined abbreviations
    • 'abbreviations' => []
  • Predefined links
    • 'links' => null
  • Custom attributes for (external) links / images
    • 'links_attr' => []
    • 'links_external_attr' => ['rel' => 'nofollow', 'target' => '_blank']
    • 'images_attr' => null
    • 'images_external_attr' => null
  • Custom code class / (block) text
    • 'code_class' => 'language-%s'
    • 'code_text' => null
    • 'code_block_text' => null
  • Putting <code> attributes on <pre> element
    • 'code_block_attr_on_parent' => false
  • Custom table (alignment) class
    • 'table_class' => null
    • 'table_align_class' => null
  • Custom footnote class
    • 'footnote_class' => 'footnotes'
  • Custom footnote link id / class / text
    • 'footnote_link_id' => 'fnref:%s'
    • 'footnote_link_class' => 'footnote-ref'
    • 'footnote_link_text' => '[%s]'
  • Custom footnote back link id / class / text
    • 'footnote_back_link_id' => 'fnref:%s-%s'
    • 'footnote_back_link_class' => 'footnote-backref'
    • 'footnote_back_link_text' => '↩'

If you’d like to change them, just prefix each option with plugin.kirby-pep. and you’re ready.