Using Ace.js for Pukiwiki

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

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


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

<script src=""></script>
<script src=""></script>

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

// adapted from
$(function () {
    $('textarea[data-editor]').each(function () {
        var textarea = $(this);
        var mode ='editor');
        var editDiv = $('<div>', {
            position: 'absolute',
            width: textarea.width(),
            height: textarea.height(),
            'class': textarea.attr('class')
        textarea.css('display', 'none');
        var editor = ace.edit(editDiv[0]);
        editor.setReadOnly('readonly') === true);
        editor.getSession().setMode("ace/mode/" + mode);
        if ('grow') === true) {
                maxLines: 180

        // copy back to textarea on form submit...
        textarea.closest('form').submit(function () {

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

  <textarea name="msg" data-editor="c_cpp" data-gutter="true" cols=90 style="height:80vh">$s_postdata</textarea>

Additionally, since we already have Ace loaded, we can use it for syntax highlighting.

The version of Ace.js that this site uses has a special Pukiwiki syntax highlighter module which implements rudimentary support for Pukiwiki markup. My fork is available on GitHub. I got a bit lazy trying to translate the context free grammar into regexes, so the result is a bit incomplete.