Adding a feature to MediaWiki WikiEditor formatting

MediaWiki is an excellent tool for maintaining documentation and I’ve had a self-hosted instance since at least 2011-06-04 (that’s the oldest edit in my internal user contributions list). And some 3,436 edits later, I still can’t remember the tags for SyntaxHighlight, which is an awfully nice little highlighter that uses pygments to render structured text in a more readable form. I got tired of looking them up every few weeks and so thought there must be a way to add some hints to the user interface.

I was surprised the WikiEditor plugin, which provides a nice point-n-click interface to some of the more commonly used MediaWiki markup tags, did not have an option or extension for SyntaxHighlight point-n-click and but, of courese, you can edit the JavaScript that renders the toolbar and amend it with features you want.

The instructions are pretty clear, if not quite the step-by-step howto some are.

• Make sure you have WikiEditor enabled in LocalSettings.php
• You need permission to edit the Common.js page, which if you run the site you should have, but regular users can’t.
• If it doesn’t seem to load, make sure you clear all caches before testing.

On my site, the URL for Common.js is https://your.host.tld/mediawiki/index.php?title=MediaWiki:Common.js which contained only the default

/* Any JavaScript here will be loaded for all users on every page load. */

and to which I added:

/* Any JavaScript here will be loaded for all users on every page load. */
// Check if we're editing a page.
if ( [ 'edit', 'submit' ].indexOf( mw.config.get( 'wgAction' ) ) !== -1 ) {
    // Add a hook handler.
    mw.hook( 'wikiEditor.toolbarReady' ).add( function ( $textarea ) {
        // Configure a new toolbar entry on the given $textarea jQuery object.
        $textarea.wikiEditor( 'addToToolbar', {
            section: 'advanced',
            group: 'format',
            groups: {
                list: {
                    tools: {
                        syntaxhighlight : {
                            label: 'SyntaxHighlight',
                            type: 'select',
                            list: {
                                'bash': {
                                    label: 'Bash',
                                    action: {
                                        type: 'encapsulate',
                                        options: {
                                            pre: '<syntaxhighlight lang="bash">',
                                            post: '</syntaxhighlight>'
                                        }
                                    }
                                },
                                'unixconfig': {
                                    label: 'Config',
                                    action: {
                                        type: 'encapsulate',
                                        options: {
                                            pre: '<syntaxhighlight lang="unixconfig">',
                                            post: '</syntaxhighlight>'
                                        }
                                    }
                                },
                                'apacheconf': {
                                    label: 'ApacheConfig',
                                    action: {
                                        type: 'encapsulate',
                                        options: {
                                            pre: '<syntaxhighlight lang="apacheconf">',
                                            post: '</syntaxhighlight>'
                                        }
                                    }
                                },
                                'json': {
                                    label: 'JSON',
                                    action: {
                                        type: 'encapsulate',
                                        options: {
                                            pre: '<syntaxhighlight lang="json">',
                                            post: '</syntaxhighlight>'
                                        }
                                    }
                                },
                                'patch': {
                                    label: 'Patch',
                                    action: {
                                        type: 'encapsulate',
                                        options: {
                                            pre: '<syntaxhighlight lang="diff">',
                                            post: '</syntaxhighlight>'
                                        }
                                    }
                                },
                                'php': {
                                    label: 'PHP',
                                    action: {
                                        type: 'encapsulate',
                                        options: {
                                            pre: '<syntaxhighlight lang="php">',
                                            post: '</syntaxhighlight>'
                                        }
                                    }
                                },
                                'javascript': {
                                    label: 'JavaScript',
                                    action: {
                                        type: 'encapsulate',
                                        options: {
                                            pre: '<syntaxhighlight lang="javascript">',
                                            post: '</syntaxhighlight>'
                                        }
                                    }
                                },
                                'html': {
                                    label: 'HTML',
                                    action: {
                                        type: 'encapsulate',
                                        options: {
                                            pre: '<syntaxhighlight lang="html">',
                                            post: '</syntaxhighlight>'
                                        }
                                    }
                                },
                                'css': {
                                    label: 'CSS',
                                    action: {
                                        type: 'encapsulate',
                                        options: {
                                            pre: '<syntaxhighlight lang="css">',
                                            post: '</syntaxhighlight>'
                                        }
                                    }
                                },
                                'arduino': {
                                    label: 'Arduino',
                                    action: {
                                        type: 'encapsulate',
                                        options: {
                                            pre: '<syntaxhighlight lang="arduino">',
                                            post: '</syntaxhighlight>'
                                        }
                                    }
                                },
                                'perl': {
                                    label: 'Perl',
                                    action: {
                                        type: 'encapsulate',
                                        options: {
                                            pre: '<syntaxhighlight lang="perl">',
                                            post: '</syntaxhighlight>'
                                        }
                                    }
                                },
                                'python': {
                                    label: 'Python',
                                    action: {
                                        type: 'encapsulate',
                                        options: {
                                            pre: '<syntaxhighlight lang="python">',
                                            post: '</syntaxhighlight>'
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        } );
    });
}

and coolio, it works: