注意:

The Funtoo Linux project has transitioned to "Hobby Mode" and this wiki is now read-only.

Difference between revisions of "ConsoleOutput MediaWiki Extension"

From Funtoo
Jump to navigation Jump to search
 
(6 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 [https://github.com/BreezyOps/MediaWiki-ConsoleOutput 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">
--- 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>:
 
<syntaxhighlight lang="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);
Please see [https://github.com/BreezyOps/MediaWiki-ConsoleOutput ConsoleOutput GitHub] page for install instructions.
    $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:32, April 30, 2018

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:

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 #

Installation

Please see ConsoleOutput GitHub page for install instructions.