Using Ace.js for Pukiwiki

October 18th, 2020

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:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.4/ace.js"></script>
</body>

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

// adapted from https://stackoverflow.com/a/19513428
$(function () {
    $('textarea[data-editor]').each(function () {
        var textarea = $(this);
        var mode = textarea.data('editor');
        var editDiv = $('<div>', {
            position: 'absolute',
            width: textarea.width(),
            height: textarea.height(),
            'class': textarea.attr('class')
        }).insertBefore(textarea);
        textarea.css('display', 'none');
        var editor = ace.edit(editDiv[0]);
        editor.renderer.setShowGutter(textarea.data('gutter'));
        editor.setReadOnly(textarea.data('readonly') === true);
        editor.getSession().setValue(textarea.val());
        editor.getSession().setMode("ace/mode/" + mode);
        editor.setTheme("ace/theme/chrome");
        if (textarea.data('grow') === true) {
            editor.setOptions({
                maxLines: 180
            });
        }

        // copy back to textarea on form submit...
        textarea.closest('form').submit(function () {
            textarea.val(editor.getSession().getValue());
        })
    });
});

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.

netdex

Using Ace.js for Pukiwiki

Tutorial