Difference between revisions of "ConsoleOutput MediaWiki Extension"

Line 1: Line 1:
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  <tt>&lt;console&gt;</tt> opening and closing tags, and put a <tt>##i##</tt> input code immediately before user input on each line. This will cause all text from the <tt>##i##</tt> 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:
+
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  <tt>&lt;console&gt;</tt> opening and closing tags. This tag works similarly to a <tt>&lt;pre&gt;</tt> tag, and preserves output formatting in the quoted text.
  
* <tt>##b##</tt> - highlight the rest of the line in bold.
+
To highlight text typed by a user, rather than program output, put a <tt>##i##</tt> input code immediately before user input on each line. This will cause all text from the <tt>##i##</tt> to the end of the line to be highlighted in orange to offset it from the prompt and other other program output.
* <tt>##b## text here ##!b##</tt> - highlight the text between both markers in bold.
+
* <tt>##i## text here ##!i##</tt> - 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.
+
* {{c|##i##}} - Tag all following text on this line as user input.
 +
* {{c|##b##}} - Highlight the rest of the line in bold.
 +
* {{c|##b##text here##!b##}} - Highlight the text between both markers in bold.
 +
* {{c|##i##text here##!i##}} - Highlight the text between both markers as user input.
 +
* {{c|##g##}} - Green
 +
* {{c|##y##}} - Yellow
 +
* {{c|##bl##}} - Blue
 +
* {{c|##r##}} - Red
  
 +
=== Examples ===
 
Here are a few examples of the ConsoleOutput extension. First this is how you might typically display {{c|ls}} output, with a particular directory highlighted:
 
Here are a few examples of the ConsoleOutput extension. First this is how you might typically display {{c|ls}} output, with a particular directory highlighted:
  

Revision as of 01:11, January 12, 2015

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.

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