Template:Code:Interpreted/doc

Code:Interpreted

This is a rather more complex code template, intended to present code that can be typed in to an interpreter, rather than compiled. It is expected that this sort of code will be copied and pasted directly into an interactive shell-like environment. The same template can also be used for a variety of formats, such as basic input, or input plus output. This is achieved by using a template that accepts a variable number of arguments.

If a language is specified, then syntax highlighting of code is automatically included, using the <source> tag (courtesy of GeSHi). This also allows line numbering, or (with a few user CSS lines, as described below), displays a cursor character which will not be copied and pasted. This allows readers to copy and paste example code directly into the interpreter.

Named arguments

Called with 4 unnamed arguments, the output generated looks something like Template:Code:Output

The 1st argument is for the initial explanation. The entire box is contained in a div of class "code".

Input:

The 2nd argument is the text typed into the interpreter.

It will be enclosed in either <source> or <pre> tags, depending on if an input language has been specified which themselves are contained in a div of class "input". (N. B. If this parameter is blank, then the whole thing is omitted

Result:

The 3rd argument is the output. This should be in <pre> </pre> tags: you probably don't want to use <source>, because syntax-highlighting the output would be silly e.g.

>cd /bin

>ls
bash            df              ln              rm
cat             echo            ls              rmdir
chmod           ed              mkdir           sh
cp              expr            mv              sleep
csh             hostname        ps              stty
date            kill            pwd             sync
dd              ksh             rcp             tcsh

and the 4th argument is the continuation of the explanation.

The main use of this template is to produce input text with an auto-generated prompt character, using the :before pseudo-element available in CSS. This has one major advantage, and another possible benefit

• When copying and pasting the text, the prompt character is not copied in most browsers. This allows the user to copy the text and paste it in to the interpreter verbatim, without removing the prompt
• The prompt character is user-defined, so can be set to the user's personal prompt character, if desired. This is of dubious benefit.

To see this in action, you need to add something like the following to your user CSS file (usually located at Special:Mypage/monobook.css)

.code .input pre{padding:0; border: none;}
.code .input pre:before {content: "\003E \0020";}

This will put a "> " prompt in front of each <pre> tag in the input box.

Called with three unnamed arguments, the Results box vanishes, as does the (now unneeded) "Input" heading

This is a script in Python. If you wish to format Python scripts differently from other scripts, add the following to your user CSS file

.code * pre.source-python:before, .code .source-python pre:before {content: "\003E \003E \003E \0020";}

hello = "Hello, World!"

print hello #does what it says

See?

However, you might want an Input/Results box with no end explanation. If so, just use a blank 4th argument

You might want to provide a Python-specific prompt in the output too. If so, just call <pre> with the appropriate class

Input:

hello = "Hello, World!"

print hello #does what it says

Result:

hello = "Hello, World!"

print hello #does what it says
Hello, World!

Now it gets simpler. With two unnamed arguments:

There is no "after" text.

cd /bin

ls

With one unnamed argument

{{{2}}}

Named arguments

There are 2 named arguments: "title", "lang". (Note it would be nice to have a 3rd, whether or not to apply an output prompt)

The effect of the "title" argument should be obvious:

A simple example with 2 unnamed arguments and a "title" argument set to "Title example".

Title example

cd /bin

ls

The named argument "lang" is a shortcut, so that you don't need to put the class="source-python" or equivalent in every <pre> tag.

An example with all 6 possible arguments. The "lang" argument adds another class to the input div, called source-"lang"

A title Input:

'"`UNIQ--syntaxhighlight-00000014-QINU`"'
'"`UNIQ--pre-00000016-QINU`"'

Result:

hello = "Hello, World!"

print hello #does what it says

much easier, if you don't want to use <source>.

Wiki Code

The code for all the above codeboxes is

Called with 4 unnamed arguments, the output generated looks something like Template:Code:Output
{{Code:Interpreted
|The 1st argument is for the initial explanation. The entire box is contained in a div of class "code".
|The 2nd argument is the text typed into the interpreter. It is contained in a div of class "input". Normally the contents should be enclosed in one or more <pre> </pre> or <source> </source> tags, like so
<source lang="bash">cd /bin #a comment</source><pre>ls</pre>
|The 3rd argument is the output. This should be in <pre> </pre> tags: you probably don't want to use <source>, because syntax-highlighting the output would be silly e.g.
<pre>>cd /bin</pre>
<pre>>ls
bash            df              ln              rm
cat             echo            ls              rmdir
chmod           ed              mkdir           sh
cp              expr            mv              sleep
csh             hostname        ps              stty
date            kill            pwd             sync
dd              ksh             rcp             tcsh
</pre>
|and the 4th argument is the continuation of the explanation. 
The main use of this template is to produce input text with an auto-generated prompt character, using the :before pseudo-element available in [[CSS]]. This has one major advantage, and another possible benefit
*When copying and pasting the text, the prompt character is not copied in most browsers. This allows the user to copy the text and paste it in to the interpreter verbatim, without removing the prompt
*The prompt character is user-defined, so can be set to the user's personal prompt character, if desired. This is of dubious benefit.
To see this in action, you need to add something like the following to your [[Special:MyPage/skin.css|user CSS]] file)

<pre>.code .input pre{padding:0; border: none;}
.code .input pre:before {content: "\003E \0020";}</pre>
This will put a " >" prompt in front of each <pre> tag in the input box.
}}

Called with three unnamed arguments, the Results box vanishes, as does the (now unneeded) "Input" heading
{{Code:Interpreted
|This is a script in Python. If you wish to format Python scripts differently from other scripts, add the following to your user CSS file<pre>.code .input pre.source-python:before, .code .source-python pre:before {content: "\003E \003E \003E \0020";}</pre>
|<source lang="python">hello = "Hello, World!"</source>
<source lang="python">print hello #does what it says</source>
|See?
}}

However, you might want an Input/Results box with no end explanation. If so, just use a blank 4th argument
{{Code:Interpreted
|You might want to provide a Python-specific prompt in the output too. If so, just call <pre> with the appropriate class
|<source lang="python">hello = "Hello, World!"</source>
<source lang="python">print hello #does what it says</source>
|<pre class="source-python">hello = "Hello, World!"</pre>
<pre class="source-python">print hello #does what it says
Hello, World!</pre>
|
}}

Now it gets simpler. With two unnamed arguments: 
{{Code:Interpreted
|There is no "after" text.
|<pre>cd /bin</pre><pre>ls</pre>
}}

With one unnamed argument
{{Code:Interpreted
|there is no before text. The first argument is the code<pre>cd /bin</pre><pre>ls</pre>
}}

There are 2 named arguments: "title" and "lang". The effect of the "title" argument should be obvious:
{{Code:Interpreted
|title=Title example
|A simple example with 2 unnamed arguments and a "title" argument set to "Title example".
|<pre>cd /bin</pre><pre>ls</pre>
}}

The named argument "lang" is a shortcut, so that you don't need to put the class="source-python" or equivalent in every <pre> tag. 
{{Code:Interpreted
|A simple example with 3 unnamed arguments and a "lang" argument. The "lang" argument adds another class to the input div, called source-"lang"
|<pre>hello = "Hello, World!"</pre>
<pre>print hello #does what it says</pre>
|much easier, if you don't want to use <source>.
|code=python
}}