Using Ace.js for PukiWiki

Last updated: 2019-06-03
Tag: PukiWiki

Out of the box, Pukiwiki's text editor is a simple textarea. Of course, this leaves much to be desired, such as:

  • Auto-indentation
  • Syntax highlighting
  • Line numbering
  • Find/replace
  • Vim bindings (a must-have)
  • etc.

We can use Ace to implement this functionality, by embedding the text editor in place of the default textarea used for editing.

Tutorial

At the end of pukiwiki.skin.php before the </body> tag, insert the following two script includes:

At the end of main.js, add the following code at the end:

In html.php, change the msg textarea to this:

If you get stuck, I have attached the relevant files to this article.

Additionally, since we already have Ace loaded, we can use it for syntax highlighting. I have attached a modified version of highlight.inc.php by sonots which has changes to use Ace instead of dp.SyntaxHighlighter?.


Attach file: filehighlight.inc.php 7 download [Information] filepukiwiki.skin.php 8 download [Information] filemain.js 6 download [Information] filehtml.php 9 download [Information]

Front page   Edit Freeze Diff Attach Copy Rename Reload   New List of pages Search Recent changes   Help   RSS of recent changes
Last-modified: 2019-07-01 (Mon) 18:48:59