ConsoleOutput MediaWiki Extension

Revision as of 01:12, January 12, 2015 by Drobbins (Talk | contribs)

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. This tag works similarly to a <pre> tag, and preserves output formatting in the quoted text.

To highlight text typed by a user, rather than program output, put a ##i## input code immediately before user input on each line. This will cause all text from the ##i## to the end of the line to be highlighted in orange to offset it from the prompt and other other program output.

Console Markup

The folowing elements are available for marking up text within <console> elements:

  • ##i## - Tag all following text on this line as user input.
  • ##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 as user input.
  • ##g## - Green
  • ##y## - Yellow
  • ##bl## - Blue
  • ##r## - Red

Examples

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:

# bluetoothctl 
[NEW] Controller 00:02:72:C9:62:65 antec [default]
[bluetooth]# power on
Changing power on succeeded
[bluetooth]# agent on
Agent registered
[bluetooth]# scan on
Discovery started
[bluetooth]# devices
Device 00:1F:20:3D:1E:75 Logitech K760
[bluetooth]# 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
[agent] Passkey: 454358
[agent] Passkey: 454358
[agent] Passkey: 454358
[agent] Passkey: 454358
[agent] Passkey: 454358
[agent] Passkey: 454358
[agent] Passkey: 454358
[CHG] Device 00:1F:20:3D:1E:75 Paired: yes
Pairing successful
[CHG] Device 00:1F:20:3D:1E:75 Connected: no
[bluetooth]# 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
[bluetooth]# quit
[DEL] Controller 00:02:72:C9:62:65 antec [default]
#


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>";
}
?>