It's better when it's simple

User Tools

Site Tools


dirtylittlehelper Plugin

Compatible with DokuWiki

  • 2024-02-06 "Kaos" unknown
  • 2023-04-04 "Jack Jackrum" unknown
  • 2022-07-31 "Igor" unknown
  • 2020-07-29 "Hogfather" yes

plugin Enhances editor, can build a navi-tree, mermaid editor integration, design fine tuning and some other cool stuff

Last updated on
bureaucracy, struct

Tagged with editor


:!: Only admins can use all things this plugin provides (editor, topbar are for admins only!)

:!: This plugin is tested (and used) with the dokuwiki release 2020-07-29 “Hogfather” and the standard template.


:!: External requirements: This plugin requires the following additional components that must be installed separately:

  • struct (needed for autocomplete search in editor and topbar)
  • bureaucracy (needed for autocomplete search in editor and topbar)
  • svgembed (optional – dlh ships a nice button for the editor)

Install the plugin using the Plugin Manager and the download URL above, which points to latest version of the plugin. Refer to Plugins on how to install plugins manually.


@turnermm: overlay plugin - the base I began with
@samfisch: dokubook template - here I found the tree
@lisps: linksuggest plugin - yes, I copied it
@giterlizzi bootstrap3 template - there I found the inspiration for the admin menu
@jakob1111 flowcharts plugin - the base for mermaid integration
@mermaid-js mermaid-live-editor - the mermaid live editor

Why? / History

I wanted a better way for inserting wiki-internal-links in the editor. After some searching and probing I found the way that fits best for me: with “bureaucracy” and “struct” plugin you can build nice lookups for namespaces…

Then I took the “overlay” plugin and modified it for my needs. After a while I thought that it would be cool not to click on a button to have the search input and the insert button.

Some jQuery later: it works. After the editor ist opened the dlh-page is loaded in the overlay, then the elements are transferred in a new line under the toolbar in the editor. The overlay is not shown anymore - but it's still there.

Building and integrating flow-charts with mermaid: integrated. And dlh ships a mermaid live editor (the first chart in the wiki-editor is now transferred to the live editor; the rest: copy and paste).

And i needed / wanted a quick-admin-menu → added (inspired by bootstrap3 template)

And sometimes the wiki should be wider - especially when editing and with “advanced config” plugin - done …that means that after install of this plugin your wiki can look a bit different (thats life).

Then i thought it would be nice to have a tree on the left side like “dokubook” template → added syntax for the tree.

The tree on the left is not always needed - added syntax for “no sidebar”…

I like comments → syntax added

right now it works fine…

what can dlh do four you? (syntax and more)

main feature - page-search in the editor

you need:
let's go
  • install the both plugins
  • create a struct-scheme
  • create at least one field in this scheme
  • typ “page”
  • config “usetitles” > thats better
  • config “autocomplete” - “namespace” > put your namespace here
  • create the dokuwiki page that is configured “plugin»dirtylittlehelper»page”
=== DLH ===
action script dummy.php
struct_field "scheme_name.field_name_1" !
struct_field "scheme_name.field_name_2" !
  • open the editor and smile


in the config you can switch several buttons on and off.
a button for maximizing the editor (and auto maximize)
buttons for inserting code tags for several languages
buttons for mermaid (look a bit down)
buttons for svg-image (needs svgEmbed Plugin )
input and buttons for dlhID (look dlhID)

dlh tree


put it in your sidebar page and be happy
if there would be several trees → only the first one is displayed


no tree will be rendered


only this tree will be rendered (overrides <dlh.notree>) works only once


The sidebar will not be shown (css) - beware that the sidebar / tree will be generated.


there will be a button at the top left of the sidebar to toggle it with


you can hide the sidebar


graph LR

When you click the mermaid live editor you can follow the links to syntax etc.


<dlh.*> this one line comment will only be seen in the editor / pagesource </dlh.*>

comment will also only be seen in the editor / pagesource 


 <dlh.div.html[ id="" class="" style=""...]> Your html content </dlh.div.html>

will build a html div like <html><div>Your html content</div></html>

 < [ id="" class="" style=""...]> **Your** WIKI __content__ </>

will build a div around your wiki code like <html><div></html>**Your** WIKI __content__ <html></div></html>


<dlh.table.html[ id="" class="" style=""...]>
  <caption>your caption</caption>
    <th>tablehead a</th>
    <th>tablehead b</th>
    <td> cell with text </td>
    <td> amnother cell </td>

is for pure html and like <> you can build a table around wiki content

< [ id="" class="" style=""...]>
  <> **wiki caption content** </>
    <> table head __wiki__ syntax </>
    <> **another** table head __wiki__ syntax </>
    <> call a plugin or some other cool stuff </>
    <> **wiki syntax here** </>

the top bar

you can have an additional bar at the top of your wiki.
this is something very special I built for my needs… that's why it's a bit tricky…

the bar has several sections from left to right

  • HELPER-ICON - on mouseover the helper page is displayed
  • template list - configured via configuration
  • call button
  • struct autocomplete (like the dlh page in the editor BUT only one field)
  • pagesuggest inspired input for path to wiki id
  • call button
  • dlhID field
  • renew Button for dlhID

the both call buttons will open a new window with the id from the input left to the button.
A * in these inputs will be replaced with the dlhID that is in the most right input

the helper page

in the config you can define a helper page which will be displayed in the top bar width is 600px
here I have some useful infos and things i often need…

template list

in the config you can define a list of templates that shall be in the dropdown. Empty config = no dropdown

struct field

in the config define a pageid for a page that contains ONE autocomplete struct field

action script dummy.php
struct_field "wiki42.all_title" !


---- struct serial ----
schema: wiki42

will work

in the config you can define a wikiid and a label for a link that will be displayed in the menu

there will be two columns:

your link links to admin plugin pages
Extension Manager
Revert Manager
Template Style Settings
User Manager


The dlhID is a TwoDigitSixChars ID based on the time.
The first two digits stand for the year (20=2020, 21=2021 …)
The six letters are for the seconds since the year began.
This ID is shorter than only digits and i found that it is easier to use

21fwkntf is 2021-05-11 15:03:05

Design / css

dlh changes som css

/* no footer */
        #dokuwiki__footer {
                display: none;
/* buttons not so white */
                background-color:rgba(222, 222, 222, 0.3) !important;
                /* background-image: none !important; */
/* the page content is horizontal scrollabale */
        .page {
                overflow-x: auto !important;
/* docInfo brighter */
        .dokuwiki .docInfo{
                color: #AAAAAA;
/* preview gets a border etc */
                   border: 1px solid #777777 !important;
                   max-width: 900px;
                   resize: both;
                   overflow: auto;
/* top bar no margin-bottom */
        #dokuwiki__header .tools {
                margin-bottom: 0px !important;
/* autocomplete on top */
.ui-autocomplete{ z-index: 99999 !important; }
.textcomplete-dropdown{ z-index: 999999 !important; }
/* search info wider */
.dokuwiki div.ajax_qsearch{
  left: -21.5em;
  width: 20em;


This plugin is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. This plugin is generally made for MY personal needs.

This plugin is tested with the dokuwiki release 2020-07-29 “Hogfather” and the standard template.


  • for my english
  • for errors - if you find some
  • for everything I did the wrong way

ToDo/Wish List

  • dont be dirty on mobile devices
  • build config for design changes
  • clean up
plugin/dirtylittlehelper.txt · Last modified: 2022-01-28 10:19 by Aleksandr

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki