Template:Code:Output/doc

Code:Output/doc

Purpose:

The template is written to link a prefixed snippet of software coding then display it's output effect both in & out framed in a window with prefixed explanatory text or additional commentary.

Usage

This template was undocumented. It's internal code after some named parameters were added to allow other skins to better generalize it's uses is at page bottom.

• It uses upper case mnemonic letter codes for passing optional styling overrides, B for border, P for padding and so forth like many general box templates (e.g. {{LeftBox}}). These are apparent in the below but currently consist of the set { B, TA, P, CLR, BG & WBG } plus an auxiliary 'style2' style-pass-parameter that can take a list of HTML inside the style quotes.
  

• BG and WBG (window background) most effect the appearance. A pre-template using an alternative color scheme with this as a sub-template call is easy to write.
  
• Since the original had no margin controls, I left that to anyone wanting such and the use of the 'style2' pass parameter.

---

Output example using this input:

({{Lorem}} and {{LoremS}} are standard text-sourcing test templates)

One input via placeholder parameter

{{Code:Output
|This is NOT the second param:  {{loremS|C}}, nor is it being five! But just a measly one {{loremS|B}}
}}

which generates:

This is NOT the second param: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur., nor is it being five! But just a measly one Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

TWO inputs via placeholder parameters

{{Code:Output
|{{loremS|B}} But soone forsooth...  Let there be five!
|This is ''still'' NOT the third param:  {{loremS|C}}
}}

2... which generates:

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. But soone forsooth... Let there be five!

Code:

This is still NOT the third param: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Three inputs via placeholder parameters

Throwing in the below stuff.... but not quite the kitchen sink

|B=5px groove silver|BG=Wheat|WBG=lightyellow|style2=color:green

{{Code:Output|B=5px groove silver|BG=Wheat|WBG=lightyellow|style2=color:green
|{{loremS|B}}
|This is NOT the third param:  {{loremS|C}}
|Let there be five!
}}

3... which generates:

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Code:

This is NOT the third param: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Output:

Let there be five!

Four inputs via placeholder parameters

(five really)

{{Code:Output|Blah 1 Blah {{loremS}}
|{{loremS|B}}
|This is third param
|{{BL|Any fourths here for cards?}} {{loremS|C}}
|Let there be five!
}}

4... which generates:

Blah 1 Blah Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Code:

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Output:

This is third param

Any fourths here for cards? Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Internal code

For other templates of this kind see the Category:Code templates:

Working guts of the template
<div style="border: {{{B|#7777FF solid 1px}}}; text-align: {{{TA|left}}}; padding:{{{P|5px}}}; clear: {{{CLR|both}}}; background-color: {{{BG|#DDDDFF}}}; {{{style2|}}};">{{#if: 1 | {{{1|}}} <!-- trim whitespace -->}}
{{#if: {{{2|}}} | [[Image:Crystal_Clear_app_terminal.png|20px]] '''Code:'''
<div style="border: #7777FF solid 1px; text-align: left; padding:5px; clear: both; background-color: {{{WBG|#FFFFFF}}};">{{{2}}}</div>
}}
{{#if: {{{3|}}} | [[Image:Crystal_Clear_app_kscreensaver.png|20px]] '''Output:'''
<div style="border: #7777FF solid 1px; text-align: left; padding:5px; clear: both; background-color: {{{WBG|#FFFFFF}}};">{{{3}}}</div>
}}{{#if: 1 | {{{4|}}} <!-- trim whitespace -->}}</div>