Difference between revisions of "ConsoleOutput MediaWiki Extension"

 
(2 intermediate revisions by the same user not shown)
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.
+
=== Console Markup ===
  
 +
The folowing elements are available for marking up text within <tt>&lt;console&gt;</tt> elements:
 +
 +
* {{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:
  
Line 54: Line 64:
 
}}
 
}}
  
To install, make the following modifications to your skin:
+
=== Installation ===
  
<syntaxhighlight lang="css">
+
To install the ConsoleOutput extension, clone it from its official source repository:
--- 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;
+
</syntaxhighlight>
+
  
Then install the following code in your <tt>extensions</tt> directory and include it with a <tt>require_once( "$IP/extensions/ConsoleOutput.php" );</tt> in <tt>LocalSettings.php</tt>:
+
{{console|body=
 +
$ ##i##cd extensions
 +
$ git clone http://git.funtoo.org/MediaWiki-ConsoleOutput ConsoleOutput
 +
Cloning into 'ConsoleOutput'...
 +
Checking connectivity... done.
 +
$
 +
}}
  
<syntaxhighlight lang="php">
+
Next, add the following line to {{f|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' ) ) {
+
{{file|name=LocalSettings.php|body=
        $wgHooks['ParserFirstCallInit'][] = 'consoleOutputSetup';
+
require_once( "$IP/extensions/ConsoleOutput/ConsoleOutput.php" );
} 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);
+
In order to enable the colorizing of console output, add the contents of {{f|ConsoleOutput/ConsoleOutput.css}} to the MediaWiki:Common.css page on your wiki.
    $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>";
+
}
+
?>
+
</syntaxhighlight>
+
  
 
[[Category:MediaWiki Hacks]]
 
[[Category:MediaWiki Hacks]]

Latest revision as of 01:21, 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.

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]
#


Installation

To install the ConsoleOutput extension, clone it from its official source repository:

$ cd extensions
$ git clone http://git.funtoo.org/MediaWiki-ConsoleOutput ConsoleOutput
Cloning into 'ConsoleOutput'...
Checking connectivity... done.
$


Next, add the following line to LocalSettings.php:

LocalSettings.php
require_once( "$IP/extensions/ConsoleOutput/ConsoleOutput.php" );

In order to enable the colorizing of console output, add the contents of ConsoleOutput/ConsoleOutput.css to the MediaWiki:Common.css page on your wiki.