Making the Distribution, Part 2

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 to the end of the line to be in a darker color. The rest of the text will be in a lighter grey, allowing it to be distinguished more easily from user input. Here are other sequences that can be used:

• ##b## - highlight the rest of the line in bold.
• ##b## text here ##!b## - highlight the text between both markers in bold.
• ##i## text here ##!i## - highlight the text between both markers in a darker color.

This extension can be further extended to add color support, as desired, and some of the CSS for color support can already be found in the code below.

Here are a few examples of the ConsoleOutput extension. First this is how you might typically display ls output, with a particular directory highlighted:

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/

And here is how you might display a more detailed example of console output, using colors:

root # bluetoothctl 
[NEW] Controller 00:02:72:C9:62:65 antec [default]
root ##bl##[bluetooth]##!bl### power on
Changing power on succeeded
root ##bl##[bluetooth]##!bl### agent on
Agent registered
root ##bl##[bluetooth]##!bl### scan on
Discovery started
root ##bl##[bluetooth]##!bl### devices
Device 00:1F:20:3D:1E:75 Logitech K760
root ##bl##[bluetooth]##!bl### pair 00:1F:20:3D:1E:75
Attempting to pair with 00:1F:20:3D:1E:75
[CHG] Device 00:1F:20:3D:1E:75 Connected: yes
root ##r##[agent]##!r## Passkey: 454358
root ##r##[agent]##!r## Passkey: 454358
root ##r##[agent]##!r## Passkey: 454358
root ##r##[agent]##!r## Passkey: 454358
root ##r##[agent]##!r## Passkey: 454358
root ##r##[agent]##!r## Passkey: 454358
root ##r##[agent]##!r## Passkey: 454358
[CHG] Device 00:1F:20:3D:1E:75 Paired: yes
Pairing successful
[CHG] Device 00:1F:20:3D:1E:75 Connected: no
root ##bl##[bluetooth]##!bl### connect 00:1F:20:3D:1E:75
Attempting to connect to 00:1F:20:3D:1E:75
[CHG] Device 00:1F:20:3D:1E:75 Connected: yes
Connection successful
root ##bl##[bluetooth]##!bl### quit
[DEL] Controller 00:02:72:C9:62:65 antec [default]
root #

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('/>/','&gt;', $input);
    $input = preg_replace('/</','&lt;', $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 . "&lt;/pre>";
}
?>