It's better when it's simple

User Tools

Site Tools


Note Plugin

Compatible with DokuWiki

  • 2016-06-26 "Elenor Of Tsort" unknown
  • 2015-08-10 "Detritus" yes
  • 2014-09-29 "Hrun" yes
  • 2014-05-05 "Ponder Stibbons" yes

plugin This plugin allows you to create nice “notes” like this in your DokuWiki pages

Last updated on
Conflicts with

Similar to bootswrapper, box, wrap

Tagged with boxes, icons, toolbar


When you have it installed, use this :

This is my note ! Remember it!!

<note important>
Warning ! You're about to lose your mind ;-)

<note tip>
The clues are in the images.

<note warning>
Beware of the cat when you open the door !!

You can use the note keywords important, warning and tip. Or some French synonyms: importante(important), bloquante, critique (warning), tuyau, idée (tip), classique (classic). It is quite easy to add new types of notes if you know a bit of PHP and CSS.


Plugin won't work inside numbered list

It also doesn't appear to work within a folded section using the “Folded” plugin.

Correction: The syntax is as follows:

=== Note ===
++++Note dans un Folded|
<note critique>
Ça fonctionne seulement avec le //div// pas le //span//.

Download / Installation

General instructions

  1. Download the latest version or the original version (Mirror: The tar.gz package of the original release can be found at
  2. Installing the plugin
    • You can either extract the archive into the lib/plugins directory and update the timestamp on the extracted files. (probably because of ssme Dokuwiki caching feature)
    • load the admin page and go to Manage Plugins and enter the URL for the plugin under Download and install a new plugin.


  • It is also reported to work with plug-in manager (thanks to Kenneth Udut, DGM2).
    • However, in Ricewind I can't use plugin manager again.
  • The plugin is self contained and should work “out of the box” (without any CSS alteration, thanks to Eric Hameleers).
  • If after using the <note> </note> tag, it doesn't work: Open note/syntax.php and change lines 113 and 121. (fixed in 2008-02-17 version)
  • With the 'usable' template there is excessive spacing above the note, I was able to remedy this problem by commenting out 'clear: both;' in 'style.css'. Your mileage may vary.
  • With the 'DokuCMS' template and with the 'clear: both;' in 'style.css', notes are “pushed down” by the TOC box instead of overlapping with it [frank]


2009-06-15: New (temporary) maintainer ! I've contacted Olivier, and he has real-life occupations which do not leave him time to maintain the plugin. I've agreed to maintain it in the meantime, but I don't use it a lot, so I'd be happy to have help. I've added a link to the last original version of the plugin, and a link to my improved version. The improvements are:

  • Fix in the ODT renderer (I'm the original maintainer of this code)
  • Add toolbar buttons for the notes.

Please feel free to send me mails if you find bugs, as I'm not going to be monitoring this page. Patches and contributions are most welcome. — Aurélien Bompard 2009/06/15 18:30

2008-02-17: Thanks to Aurélien Bompard, this plugin supports ODT export now. Your notes will be beautifully included in the exported ODT document.

2006-03-29: Thanks to Eric Hameleers and Christopher Smith (2006-03-24) for their great work (now merged into the plugin). Changelog :

  • allow note nesting,
  • fix the trimmed space problem,
  • fix the issue with protected modes (e.g. <code> & <file>) not being allowed within notes,
  • plug the security vulnerability which could allow malicious HTML or JavaScript to infiltrate your wiki,
  • make note types case independent (e.g. important, IMPORTANT & Important will all given an “important” note),
  • and better :
    • code efficiency,
    • code reading,
    • conformance to DokuWiki's changes in plugin classes.


Many thanks to the DokuWiki developers!!! I really enjoy using and hacking this wiki, since 2005-07. I love DokuWiki! :) Thanks to Stephane Chamberland and Carl-Christian Salvesen for their respective Side Notes and Graphviz plugins, i used them as great inspiration. Thanks to (in any order) :

For their interest in this plugin, their remarks, suggestions or patches.

Feel free to mail me if you encounter problems or need help. And don't hesitate to do it, as I don't browse the present page everyday…


I deleted all users comments because they addressed old issues that are not present anymore in the last version of the plugin. You can still see them if you browse the «Old revisions» of this page.

I did it AGAIN

XHTL-Compilant and small Modified Version

Thomas Süß 2009-10-08

Hi, I installed the patch from Nicolas and made minor changes. Warning - this is not an official version.
More information and Download at:, please test and feedback to me.

XHTML Compliant

Nicolas GERARD 2009-04-08 23:31

I changed this lines to be able to have an XHTML compliant document.

function getPType(){ return 'block'; }
$renderer->doc .= '<div class="'.$data.'" >';
$renderer->doc .= "\n</div>";
  • Ptype normal to block
  • Suppression of the <p></p> elements in the render instructions.

ODT plugin

The ODT plugin lets you specify a styles template file with this syntax:


However, when this syntax is used in conjunction with the Note plugin, note formatting (colored background, border, spacing) is lost. I even looked into the ODT XML files and it appears the proper formatting code is being included (style:name=“pluginnote” style:family=“table” etc.), but the formatting is apparently ignored. Does anybody know what is going on? -jmiller, 2008-10-27

Got a temporary workaround. First create a dummy wiki page with all four types of notes on it. Export to ODT. Now insert the string DOKUWIKI-ODT-INSERT on its own line at the top of the file (make sure it has the “Default” paragraph and character styles!). If you want, add a page break after it, but you have to preserve the dummy notes–don't delete them. Adjust other styles to your needs. Now upload and use this file as your export template. You will have to delete the extra page after you export each time, which is the only downside. Still, it will help until someone finds a better fix. (UPDATE: try putting the dummy notes in a hidden section in the template file to avoid having to delete them from every export.) -jmiller, 2008-10-28

renders as plain text in 2008-05-05 -Fletch Oct 30, 2008


I don't think you should have a single entry pattern <note.*?>. I used two entry patterns as when specifying a note style, the style should be preceded by a space. So the two potential patterns are mutually exclusive - and since DokuWiki parser doesn't allow or in patterns, two patterns are required.

  • <note>
  • <note\s+\S*\s*> (I simplified \S* to [a-zA-Z0-9]* for a reduced character set and to avoid potential complications if the > is placed on a subsequent line.

Your single pattern will match <notes>, <notepaper>, <notethiscouldbeanything>, which I would think is not desirable.

Christopher Smith 2006-03-30 02:10

I agree with this hint, but if would not match <note> because of the leading \s+ (whitespace needed). The whole term should be placed as optional (e.g. surrounded by (…)? )

Oliver Geisen 2006-04-06 13:54

rendering in browsers


Are you aware of any problems displaying the notes using Internet Explorer 6.0? I have a problem where the presentation of the boxes is poor compared to Firefox (which works perfectly on the same page). The problems are:

  1. Boxes are not rounded
  2. The icon (warning, important and note) are not allowing the background colour through (so I end up with a noticeable colour variation over the box.

Do you know if this is a local implementation issue or something unique to IE?

Mark Butterworth 2006-05-30 11:30

1. Can't help with that.

2. Use transparent GIFs instead of the transparent PNGs, as IE has a buggy implementation for displaying the later.
Put them in 'lib/plugins/note/images' and edit 'lib/plugins/note/style.css' (change the 'background-image:' directives)
to replace PNGs with your GIFs. Make sure that the GIFs have the same permissions as the PNGs.

thanos 2006-05-30 14:05

MikeStammer 2006-06-28 13:08
- Make sure you have 'Allow embedded HTML' turned on in your config or this will not work right!

Matthias Pitzl 2006-08-30 09:07
- It's clear why the boxes are rounded only in browsers using the Gecko rendering engine: there's some proprietary CSS-Code used for the rounded edge effect. Opera also just shows a rectangle box.

alex 2006-12-16
- This is a real shame because rounded corners also don't show up in Safari.

To get rounded corners in Safari, add this line: -webkit-border-radius: 20px; after the line -moz-border-radius: 20px; in the plugin's style.css file. I've heard -opera-border-radius will do the same trick for Opera but haven't tested it. IE (even 8) does not support rounded corners unless you use a hack involving images or 1px boxes. When CSS 3 becomes a standard (oh the joy of that day!), border-radius should work for all browsers.

- jmiller, 2008-10-28

I have managed to get rounded corners in IE7 without to much hacking using DD_roundies. Just download the .js file and add the following to main.php:
<!--[if IE]>
	<script type="text/javascript" src="DD_roundies_0.0.2a.js"></script>
	<script type="text/javascript">
		window.onload = function() {
			DD_roundies.addRule('.noteclassic, .notetip, .notewarning, .noteimportant', '20px');

clean up the cache

I needed to clean up the cache with cacherevisionseraser to get the plugin working. — Konrad Bauckmeier 2006-07-06 15:38

I had the same problem. Perhaps this hint should be included to the install-instructions. Thanks a lot for the plugin.

Same here - clean the cache and it all starts working. Great plugin, by the way. An other obvious method which worked for me was to delete the cache manually:
rm -rf <your doku root>/data/cache/*
Alex 2007-05-29

I had the same trouble, delete of *.css files in the cache did the trick
Christian 2009-09-04

Flow around TOC

If you have a long table of contents and a <note> quite at the beginning of the page, the <note> will leave a lot of vertical space and only come after the end of the TOC.

Reinhold Kainhofer 2006-08-27 11:58

I solved this by surrounding the note <div>…</div> with <table style=“border: none;”><tr><td>…</td></tr></table>. Not particularly nice, but it works.
dab 2006-11-02 13:54
I solved it by editing \lib\plugins\note\style.css Instead of “clear:both” use “clear: left”
=AK= 2010-10-03
When you editing style.css, You could edit not only “Clear:both” but also “margin-left: auto;” and “width: 70% !important;”
Ø 2012-12-08
If you want the notes to have that nice layout also in the printout (currently, the notes are not marked in any
way in the printout), you have to copy the style.css over to print.css (which is the only style sheet used when

Reinhold Kainhofer 2006-08-28 13:28

This works for the formatting but I still can't get the icons to print. I have the option checked to print background colors & images. How can I get the icons to print?

Tim Constantine 2006-09-20 10:16

That is because you didn't alter the path for the images, in the style CSS there should be the line: “background-image: url(images/important.gif);”
This path won`t work in the print.css however, because you are in another root directory. There are two possible ways to change this:
1. Copy the images folder to the directory your print.css is in (not the best way, but easy to do :D)
2. Alter the path in your print.css, it should then look something like: “background-image: URL(../../../plugins/note/images/important.gif);”

Hope that works for you
Scarecrow 2006-12-01 13:07
Actually, I believe that most templates serve-out the print CSS from plugins via lib/exe/css.php?s=print and it looks to me like that css.php will replace relative paths in things like background-image URLs with absolute paths. So there should be no need to change any CSS or to move any images. What's more likely is that the client browser just does not have the option set to print background images. In Firefox and safari there is an option in the print dialog to toggle this. — Ryan Jacobs 2009-04-06
Wouldn't an @import in the print.css do it? You even would not have to alter the image-URLs. — Andy Pillip 2007-09-14 15:29

—- On at least one page i can a huge blank space… I don't understand what's going on… Any hint/help is appreciated. Weirdly enough, when logged on, that space disappears.

Pascal Giard 2006-10-04 11:48

Hi, Solution is to edit the style.css in plugins/note/ and remove clear: both; from it. — Ze 2006-12-07 13:46

Thanks alot, works like a charm! — Pascal Giard 2006-12-08 00:11

This will not work for IE6! Other ideas? — Robert Riebisch 2007-03-21 13:12

I'm not sure if anyone else had similar problems, but I noticed with the latest DokuWiki and Firefox (not sure which is more responsible) I had to change the style.css file so that the “.noteclassic” and so forth became “div.noteclassic”. Otherwise the notes didn't show up with any style.

I had the same problem but only with the arctic skin. Your workaround works great! Thank you.

Thanks !! That helped me out as well! — Wouter 2007-08-06 21:16

Bug within the plugin 2007-04-02 17:32
There's a bug in the syntax.php file, in the function render there's an inversion between <p> and </p>.
Philippe Gomes

Unable to install via plugin manager (2007-04-05)

I have to download it, and un-tar it.

Anyway, great plugin :)

I've seen the same bug as Philippe. I can only get notes to display if I edit syntax.php as he states.

However, with the notes plugin enabled, I get the following error whenever editing a page:- Warning: Cannot modify header information - headers already sent by (output started at C:\www\wiki\lib\plugins\note\syntax.php:1) in C:\www\wiki\inc\actions.php on line 295

Is this plugin incompatible with the latest DokuWiki, or is it perhaps incompatible with some other plugins ?

Sounds like a problem related to gzip

The notes leave a big space above when using the ach template…

Yes, the plugin didn't work for me until I made the changes Philippe suggested in lines 113 and 121 of note/syntax.php:

$renderer->doc .= '<p><div class="'.$data.'">';
$renderer->doc .= "\n</div></p>";

Is there a way to continue 2nd level unordered list after <note>…</note>?

If note is placed inside a second level bullet list, then the bullet following the note is reset to 1st level, e.g.:

  * level 1
    * level 2
<note>a note</note>
    * this should be level 2 bullet, but it becomes level 1

–This can be resolved by placing the <note>…</note> tag at the end of the level 2 line. Code tags suffer from the same deficiency.

  • Example
      * level 1
        * level 2 <note>a note</note>
        * level 2 <note>
    a note
        * this should be level 2 bullet, but it becomes level 1

toolbar icon

SCRIPT.JS for Note Plugin by — Seth 2007-03-27 17:47

I have created a script.js file for the note plugin which is used to create a note picker in the toolbar (when editing). It is based on the JavaScript function to create a highlight toolbar in DokuWiki. I hope this becomes standard with the plugin in the future.

The script.js file is available at: and should be saved as /lib/plugins/note/script.js

You will also need to find an image for the toolbar, the one I am using is probably copywritten, I searched the net for 'note' as a small image and found a 16×16. The default image file is /lib/plugins/note/note.gif but can be changed easily in the JavaScript.

There is one bug: When you click the image for the dropdown the options are blank, you must hover over the blank area to show the name in the tooltip. It isn't so much that it is a bug but that I don't know too much JavaScript so I cant fix it. I am sure there is a way to actually show the way the note looks in the picker.

If you use this plugin a lot you might put the icons in the toolbar. Add following code to /conf/userscript.js

if(toolbar){ toolbar[toolbar.length] = {"type":"format", "title":"note", "icon":"note.png", "key":"", "open":"<note>", "close":"</note>"}; } 
if(toolbar){ toolbar[toolbar.length] = {"type":"format", "title":"important", "icon":"note_important.png", "key":"", "open":"<note important>", "close":"</note>"}; } 
if(toolbar){ toolbar[toolbar.length] = {"type":"format", "title":"warning", "icon":"note_warning.png", "key":"", "open":"<note warning>", "close":"</note>"}; } 
if(toolbar){ toolbar[toolbar.length] = {"type":"format", "title":"tip", "icon":"note_tip.png", "key":"", "open":"<note tip>", "close":"</note>"}; } 

You can use the icons that are distributed with this plugin (resized to 16×16 pixels) and put them in /lib/images/toolbar/

Did not work for me - the only plugin not to work so far - DokuWiki 2007-06-26b - I've got HTML enabled and I tried disabling the box plugin just in case it conflicted and I cleared the cache.

new note type

it would be great if another type would be added - question very often i want to add a note containing a question, and a nice question mark icon would be great ….

I had the same problem, but I added the following line in syntax.php after the first require_once. Not the best solution, but a simpler solution.

echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"lib/plugins/note/style.css\" />" ;

Flawless! Thank you!

I had to change the permissions from “-rw-r—–” to “-rw-r–r–” for displaying the images correctly

— for me don't work in date 13/03/2008 and with the last version of DokuWiki… I tried some things you said here but it didn't work. an help?!?!

How to extend the note plugin ?

image : store your note type image to the image folder of the plugin, e.g. check.png

1.) add your note type to line 1 before the brackets and separate by comma, e.g , .notecheck

2.) Add your new style, e.g.

.notecheck {
/*border: 1px solid #9d9;*/
background-color: #dfd;
background-image: url(images/check.png);

syntax.php 1.) add new note type after line 48 and do not forget to end the line with comma, e.g.

'notecheck'     => array('ok','check'),

2.) set the quantity of types into line 131 behind $data; e.g. for one add type increase from 4 to 5
3.) define the color by extending the array in line 135 by related expression, e.g.


Now you can use it as the other note types, e.g.

<note check>
   The procedure ends here successfully.

Feature requests

Feature request: It would be nice to be able to disable the display of the icons when you want - thus, this would just display the coloured boxes without the icons. Sometimes this is preferred/desired. It would make this plugin that bit more useful. MP 06/05/08

Hello, with the latest DokuWiki release you should be able to use the 'block' PType and remove the <p> tags from your output strings in render(). Thanks for the plugin~ :) ~fantasai

Feature request: Are there any plans to make the note types configurable by the central configuration? A table/list of tag, color, reference to icon should be enough for the first step. I have also extended the plugin by myself to include more different note types ( and would contribute to this kind of improvement. Regards, Sebastian seb [at] gunis [dot] de

Compatibility with PHP7

Open the file \lib\plugins\note\syntax.php, and then edit the following lines :

  • Line 79 : replace “&$handler” with “Doku_Handler $handler”
  • Line 101 : replace “&$renderer” with “Doku_Renderer $renderer”

Editing those lines will avoid to get a warning on your pages.

Bug reports

Compatibility with Dokuwiki syntax

Note Plugin Release: 2009-06-15

dokuwiki/lib/plugins/note/syntax.php line 79 and line 102, respectively, should be changed/updated as follows:

PHP Warning: Declaration of syntax_plugin_note::handle($match, $state, $pos, &$handler) should be compatible with DokuWiki_Syntax_Plugin::handle($match, $state, $pos, Doku_Handler $handler)

PHP Warning: Declaration of syntax_plugin_note::render($mode, &$renderer, $indata) should be compatible with DokuWiki_Syntax_Plugin::render($format, Doku_Renderer $renderer, $data)

2016-06-13 12:36

Broken in May 2008 release

Testing this with the May 2008 release of DokuWiki the plugin appears broken. The tags display as lessthan TEXT greaterthan symbol without any CSS formatting. Is this a stylesheet problem as checking the source for a test page doesn't reveal an include for the templates CSS, and the fix suggested above doesn't work? ~Matt

To fix in the latest version, you should check the permissions of the files/folder, they are wrong. To do this in one step, chmod 755 everything in lib/plugin/note ;)

Even after chmod 755, the plugin is still broken. I use the DokuBook template … after switching back to the default template, the plugin works ! Something missing with DokuBook template? Thanks for this great plugin! … Back to DokuBook template and it works now, I don't know why… cache problem?

If there several paragraphs inside a note, there is no spacing after the first paragraph, but spacing is added as usual in DokuWiki after the 2nd and subsequent paragraphs. Does anyone know why?

I try to add an image. I go to CSS and add the image. Then, I got to the PHP and I insert it into the array. It isn't well?

FIXME The version (date) which the plugin returns is incorrect. It returns 2006-03-29. Though AFAIK this is the 2008-02-17 release.
:!: Would it be useful / wanted if I supply an updated version only “fixing” the above-mentioned thing plus adding some more note-types?
:!: Would it be a great idea to clean this page a bit more? Removing (maybe create a summarized archived list {page|section}) the old, deprecated stuff and keep the necessary stuff in a clean, sectioned page… Let me know if it's okay…

Mischa The Evil 2008/10/14 00:47

It's OK. ;-)

Does not seem to work out of the box on the 2008-05-05 release; two fixes were needed to make it function.

  • In “style.css”, add “div” in front of every tag – “.noteclassic” becomes “div.noteclassic”, “.noteimportant” becomes “div.noteimportant”, and so on
  • In “syntax.php”, the last line, containing only ?>, needed to be removed.

If someone has better solutions I'd love to hear them, I was shooting in the dark on these and was surprised I finally got it to work. Sofaspud 2009/01/08

At first this didn't work for me. It just showed the text that I entered between the note tags. I had used the wiki admin plugin page to install the plugin by entering the URL and clicking install.
To fix the problem, I just SSHed into the server and chmod -R 755 the …plugins/note directory. Works great now. Thanks. 2009/01/09

—- I also installed the 2008-02-17 version via the Plugin Manager but it didn't work out of the box, I had to change the file permissions of the notes directory and everything below it to 755 to make it work, as suggested above. I didn't have shell access to the server but FileZilla 3.0.11 made this task easy as pie.

Doesn't work when using with fsckg plugin. fsckg replaces <note></note> by <p></p>.

Plugin doesn't work within DokuWiki tables

Within DokuWiki tables, the plugin doesn't work and shows the note tags in plain text instead of rendering the boxes. Can that be fixed or is this not possible by principle? – frank, 17-JAN-2009

Conflict with TOC

When a page has a long TOC and a note is placed at the top of the page, the page is rendered in a way that the note comes after the TOC. The area before the note remains empty! (see below) imageshack.us_a_img266_4710_clipboardjo.jpg

Edit lib/plugins/note/style.css → /* clear: both; */ should do it. Tested with Angua.
Does it mean, I should remove the “/*”s and the “*/“s, or should I delete the whole commented line?

Works in 2009-01-30 (RC1)

Works without any modification in 2009-01-30 (RC1) – John, 6 Febr. 2009

Works in DokuWiki-2009-02-14

Works without any modification and ‘Allow embedded HTML’ and 'Allow PHP' turned off

I had to clean my DokuWiki cache as said above (delete the content of PathToWiki/data/cache/). I also used the installation via the Admin>Plugins page to correctly install the plugin (just untar the tar.gz did not worked for me).

not working with latest DokuWiki

With my latest DokuWiki version, this plugin don't work correctly. Look at Same class for two different note.

You are using an unsupported note attribute (help) thus the plugin falls back to the default note style (== to <note>). Try one of the supported styles important, tip or warning (see usage).

Mischa The Evil 2009/05/18 19:28

Yes, I'm stupid ^^

Xarkam 2009/05/18 20:12

W3C CSS-Validator reports two errors:
.noteclassic, .noteimportant, .notewarning, .notetip … Property -moz-border-radius does not exist : 20px
.noteclassic, .noteimportant, .notewarning, .notetip … Property -khtml-border-radius does not exist : 20px
⇒ ok, these are pre-standard-properties like the upcoming (not yet available) CSS3 property border-radius.
If someone (like me) wants to have a green CSS validation, those two properties must be commented out.
hgiritzer 2009/07/21 15:53

for Windows user

I'm using DokuWiki on a Stick 2008-05-05. The plugin manager just don't work. It says “The plugin manager was unable to decompress the downloaded file. This maybe as a result of a bad download, in which case you should try again; or the compression format may be unknown, in which case you will need to download and install the plugin manually.” , so I installed manually instead. When you install this way, remember following instructions to display properly. — Anonymous 2009/05/18 20:12

Thank you Aurélien, please keep going on. This is one of the best plugin. — Atronoush 2009/06/19 08:44

Renders as plain text using "monobook" template

Hello, I am using the latest stable release of DokuWiki, but unfortunately this plugin only works when I'm using the default template, but not “monobook”. It simply rendered the text between the two tags as plain text. Any help?

  • Same here, with monobook the notes render as plain text
    • Delete /data/cache/* - This fixed it for me

Thomas Süß - 2010/11/01 Eliminate problems with addons in Dokuwiki, disable on the Admin Page CSS and Javascript compression, may delete the cache, then reload the page.

Error installing

Marcel Huijkman - 2016/02/18 Warning: Declaration of syntax_plugin_note::handle($match, $state, $pos, &$handler) should be compatible with DokuWiki_Syntax_Plugin::handle($match, $state, $pos, Doku_Handler $handler) in C:\Data\www\dokuwiki\lib\plugins\note\syntax.php on line 0

Had to rename folder

After downloading the tar.gz file and uploading via admin page, it created a folder in plugins called dokuwikinote20090615/. DokuWiki could not pick up the plugin until I renamed the folder to simply note/.

Had to end the line

Guys, how to make end of line marker into note? <br> didn't work, for example

plugin/note.txt · Last modified: 2016-06-13 12:36 by 2001:558:6033:111:5583:8996:e1bf:d792