Difference between revisions of "ConsoleOutput MediaWiki Extension"

Revision as of 02:59, 28 August 2012

The ConsoleOutput MediaWiki extension was created by Daniel Robbins to provide highlighting of user input for interactive terminal session blocks. To use it, surround user input with <console> opening and closing tags, and put a ##i## input code immediately before user input on each line. This will cause all text from the ##i## point onwards to be highlighted in bold. The rest of the text will be in a lighter grey, allowing it to be distinguished more easily from user input.

Here is an example:

www@www-smw ~/public_html $ ls
COPYING  LocalSettings.php     api.php   extensions     index.php   maintenance           redirect.php    skins              thumb_handler.php5
CREDITS  README                api.php5  images         index.php5  mw-config             redirect.php5   tests              wiki.phtml
FAQ      RELEASE-NOTES-1.19    bin       img_auth.php   languages   opensearch_desc.php   redirect.phtml  thumb.php
HISTORY  StartProfiler.sample  cache     img_auth.php5  load.php    opensearch_desc.php5  resources       thumb.php5
INSTALL  UPGRADE               docs      includes       load.php5   profileinfo.php       serialized      thumb_handler.php
www@www-smw ~/public_html $ cd extensions/

To install, make the following modifications to your skin:

--- mediawiki-1.19.1/skins/vector/screen.css    2012-06-13 18:22:39.000000000 +0000
+++ public_html/skins/vector/screen.css 2012-08-27 04:34:47.507912892 +0000
@@ -683,10 +683,47 @@
        list-style-image: url(images/bullet-icon.png);
 }
 
-pre {
-       line-height: 1.3em;
+/* ConsoleOutput.php start */
+
+.shell, pre, code, tt, div.mw-geshi {
+        font-size: 12px;
+        font-family: Consolas, 'andale mono','lucida console', monospace;
+}
+
+.shell, pre, div.mw-geshi {
+        background-color: #F8F8FF;
+        line-height: 15px;
+        padding: 10px;
+        border: none;
+        border-top: 2px solid #C6C9E0;
+        border-bottom: 2px solid #C6C9E0;
+        margin: 0;
+        overflow-x: auto;
+        overflow-y: hidden;
+}
+
+.code {
+        color: #666;
+}
+
+.code_input {
+        color: #000;
 }
 
+.code_red {
+        color: #f00;
+}
+
+.code_blue {
+        color: #00f;
+}
+
+.shell_green {
+        color: #080;
+}
+
+/* ConsoleOutput.php end */
+
 /* Site Notice (includes notices from CentralNotice extension) */
 #siteNotice {
        font-size: 0.8em;

Then install the following code in your extensions directory and include it with a require_once( "$IP/extensions/ConsoleOutput.php" ); in LocalSettings.php:

<?php
$wgExtensionCredits['validextensionclass'][] = array(
    'name' => 'ConsoleOutput',
    'author' => 'Daniel Robbins',
    'url' => 'https://github.com/danielrobbins/mediawiki-consoleoutput',
    'description' => 'This extension allows you to display colorized console output in mediawiki'
);

if ( defined( 'MW_SUPPORTS_PARSERFIRSTCALLINIT' ) ) {
        $wgHooks['ParserFirstCallInit'][] = 'consoleOutputSetup';
} else {
        $wgExtensionFunctions[] = 'consoleOutputSetup';
}

function consoleOutputSetup( $data )
{
    global $wgParser;
    $wgParser->setHook('console', 'consoleRender');
    return true;
}

function consoleRender($input, $args, $parser)
{
    if (count($args))
    {
        return "<strong class='error'>" .
               "ConsoleOutput: arguments not supported" .
               "</strong>";
    }

    # Display < and > as literals, so escape them:

    $input = preg_replace('/>/','>', $input);
    $input = preg_replace('/</','<', $input);

    # http://www.perlmonks.org/?node_id=518444
    # See "Matching a pattern that doesn't include another pattern:

    $input = preg_replace('/##i##((?:(?!##!i##).)*)##!i##/','<span class="code_input">$1</span>', $input);
    $input = preg_replace('/##i##(.*)/','<span class="code_input">$1</span>', $input);
    $input = preg_replace('/##b##((?:(?!##!b##).)*)##!b##/','<b>$1</b>', $input);
    $input = preg_replace('/##b##(.*)/','<b>$1</b>', $input);
    return "<pre class=\"code\">" . $input . "

} ?> </pre>