Template:Boxcode: Difference between revisions

From PS3 Developer wiki
Jump to navigation Jump to search
m (Notes about the annoying line wraps, and white-space:pre)
m (Top and bottom margins inside <pre> tags removed globally since 2021/09/15)
(13 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div style="width:{{{width|100%}}}; float:{{{float|none}}};">
<div style="width:{{{width|auto}}}; float:{{{float|none}}};">
  <div style="background:#e5e5ff; border:3px double #8080b0; margin:5px; padding:5px; box-shadow: 4px 4px 2px 1px #e0e0e0; overflow:auto;">
  <div style="margin:5px; padding:5px; background:#e5e5ff; border:3px double #8080b0; box-shadow: 4px 4px 2px 1px #e0e0e0; overflow:auto;">
   <div class="nowrap" style="display:inline-block; margin-bottom:5px;">
   {{#if:{{{title|}}} | <div class="nowrap" style="margin-bottom:5px; display:inline-block;">
   <div style="float:left; background:#ffffff; line-height:25px; border:1px solid #8080b0; font-family:Arial; font-weight:bold; font-style:italic; color:#606090; padding-left:5px; padding-right:5px;">{{{title|Code Sample}}}</div><span style="text-align:right; margin-left:5px;">[[image:Edit-copy_purple.svg.png|link=|x25px]]</span>
   <div style="float:left; padding-left:5px; padding-right:5px; line-height:25px; background:#ffffff; border:1px solid #8080b0; font-weight:bold; font-style:italic; color:#606090;">{{{title|Custom Title}}}</div><span style="text-align:right; margin-left:5px;">[[image:Edit-copy_purple.svg.png|link=|x25px]]</span>
   </div>
   </div> | }}
  {{clear}}
   <div style="height:{{{height|auto}}}; border:1px dashed #8080b0;">{{{code|Code Sample}}}</div>
   <div style="border:1px dashed #8080b0; height:{{{height|auto}}}; overflow:auto;">
  <div style="margin-top:-14px; margin-bottom:-14px;">{{{code|code}}}</div>
  </div>
  </div>
  </div>
</div><noinclude>
</div><noinclude>


<br><br>{{clear}}
== Usage ==
== Usage ==
<nowiki>{{Boxcode|code=Code Sample}}</nowiki>
All the parameters in bold are optional, for a good look the "code sample" should start with either a <nowiki><pre> or a <syntaxhighlight></nowiki>
 
<nowiki>{{</nowiki>Boxcode|'''code='''Code Sample<nowiki>}}</nowiki>
<br>...or...<br>
<br>...or...<br>
<nowiki>{{Boxcode|title=Custom Title|code=Code Sample}}</nowiki>
<nowiki>{{</nowiki>Boxcode|'''title='''Custom Title|'''code='''Code Sample<nowiki>}}</nowiki>
<br>...or...<br>
<br>...or...<br>
<nowiki>{{Boxcode|width=50%|title=Custom Title|code=Code Sample}}</nowiki>
<nowiki>{{</nowiki>Boxcode|'''float='''left|'''title='''Custom Title|'''code='''Code Sample<nowiki>}}</nowiki>
<br>...or...<br>
<br>...or...<br>
<nowiki>{{Boxcode|width=50%|float=right|title=Custom Title|code=Code Sample}}</nowiki>
<nowiki>{{</nowiki>Boxcode|'''float='''left|'''width='''50%|'''title='''Custom Title|'''code='''Code Sample<nowiki>}}</nowiki>
<br>...or...<br>
<br>...or...<br>
<nowiki>{{Boxcode|width=500px|height=500px|float=center|title=Custom Title|code=Code Sample}}</nowiki>
<nowiki>{{</nowiki>Boxcode|'''float='''right|'''width='''50%|'''height='''500px|'''title='''Custom Title|'''code='''Code Sample<nowiki>}}</nowiki>


== Examples ==
== Examples ==
{{Boxcode|title=Custom Title|code=<syntaxhighlight lang="xml">
{{Boxcode|code=<syntaxhighlight lang="xml">
<code>
<code>
lines
lines
<!--here-->
<!--here-->
very long lines adds a horizontal scroll bar at bottom of the template to preserve the width of the wiki pages ...............................................................................................................................................................................................................................................................................................o/sup
very long lines adds a horizontal scroll bar at bottom of the template to preserve the width of the wiki pages
................................. ........................... ............................................ ....................................... ....................................................... ..................................... ....................... .............................o/sup
</syntaxhighlight>}}
</syntaxhighlight>}}


{{Boxcode|width=50%|float=left|title=width=50% float=left|code=<syntaxhighlight lang="xml">
{{clear}}
 
{{Boxcode|float=left|title=float=left|code=<syntaxhighlight lang="xml">
<code>
<code>
lines
lines
<!--here-->
<!--here-->
very long lines adds a horizontal scroll bar at bottom of the template to preserve the width of the wiki pages
very long lines adds a horizontal scroll bar
</syntaxhighlight>}}
</syntaxhighlight>}}
{{Boxcode|width=50%|float=right|title=width=50% float=right|code=<pre style="white-space:pre;">
{{Boxcode|float=right|title=float=right|code=<syntaxhighlight lang="xml">
<code>
<code>
lines
lines
<!--here-->
<!--here-->
very long lines adds a horizontal scroll bar at bottom of the template to preserve the width of the wiki pages
very long lines adds a horizontal scroll bar
</pre>}}
</syntaxhighlight>}}


{{clear}}
{{clear}}


{{Boxcode|width=700px|float=left|title=width=700px float=left|code=<syntaxhighlight lang="xml">
{{Boxcode|float=left|width=50%|title=float=left, width=50%|code=<syntaxhighlight lang="xml">
<code>
<code>
lines
lines
<!--here-->
<!--here-->
very long lines adds a horizontal scroll bar
very long lines adds a horizontal scroll bar at bottom of the template to preserve the width of the wiki pages
</syntaxhighlight>}}
</syntaxhighlight>}}
{{Boxcode|width=auto|float=right|title=width=auto float=right|code=<syntaxhighlight lang="xml">
{{Boxcode|float=right|width=50%|title=float=right, width=50%|code=<syntaxhighlight lang="xml">
<code>
<code>
lines
lines
<!--here-->
<!--here-->
very long lines adds a horizontal scroll bar
very long lines adds a horizontal scroll bar at bottom of the template to preserve the width of the wiki pages
</syntaxhighlight>}}
</syntaxhighlight>}}
{{Boxcode|width=auto|float=right|title=width=auto float=right|code=<syntaxhighlight lang="xml">
 
{{clear}}
 
{{Boxcode|float=left|width=700px|title=float=left, width=700px|code=<syntaxhighlight lang="xml">
<code>
<code>
lines
lines
Line 64: Line 68:
very long lines adds a horizontal scroll bar
very long lines adds a horizontal scroll bar
</syntaxhighlight>}}
</syntaxhighlight>}}
{{Boxcode|width=350px|height=200px|float=right|title=width=350px height=200px float=right|code=<syntaxhighlight lang="xml">
{{Boxcode|float=right|width=350px|height=200px|title=float=right, width=350px, height=200px|code=<syntaxhighlight lang="xml">
<code>
<code>
lines
lines
Line 77: Line 81:
<!--here-->
<!--here-->
very long lines adds a horizontal scroll bar
very long lines adds a horizontal scroll bar
###############################################
</syntaxhighlight>}}
</syntaxhighlight>}}
{{Boxcode|width=auto|height=auto|float=left|title=width=auto height=auto float=left|code=<syntaxhighlight lang="xml">
 
{{clear}}
 
{{Boxcode|float=left|title=float=left (with a title longer than the code)|code=<syntaxhighlight lang="xml">
<code>
<code>
lines
lines
<!--here-->
<!--here-->
</syntaxhighlight>}}
</syntaxhighlight>}}
{{Boxcode|width=150px|height=auto|float=left|title=width=150px height=auto float=left|code=<syntaxhighlight lang="xml">
{{Boxcode|float=left|width=150px|title=float=left, width=150px (with a title longer than the code but restricted in width)|code=<syntaxhighlight lang="xml">
<code>
<code>
lines
lines
<!--here-->
<!--here-->
</syntaxhighlight>}}
</syntaxhighlight>}}
{{clear}}
*Notes:
The line wrapping inside <nowiki><syntaxhighlight></nowiki> and <nowiki><pre></nowiki> applyed when the text is longer than the container is an annoyance because it wraps the lines at the positions of the space characters (thats very bad for displaying code), by default is a lot better to display the lines entirelly and let them float "hidden" at the right of the box (thats when the horizontal scrollbar appears at bottom of the box)<br>
It seems it can be achieved by using '''white-space:pre''' as explained in [https://www.w3schools.com/cssref/pr_text_white-space.asp 1] and [https://css-tricks.com/almanac/properties/w/whitespace/ 2] but doesnt seems to work when is included inside the <nowiki>{{boxcode}}</nowiki> template (so i cant predefine it to do it automatically), another aditional problem is that it works only for <nowiki><pre></nowiki> but doesnt seems to work for <nowiki><syntaxhighlight></nowiki>. If someone knows how to implement this feature in the template (maybe with a mediawiki class ?) please do it, in the meantime the only 2 solutions i see are:
*Do the '''white-space:pre''' when calling the <nowiki>{{boxcode}}</nowiki> template
*Add a long line of consecutive characters (of the same lenght of the longest code line) at the last line of the code, to force the scroll bar to appear (this is a dirty hack but is easy and solves the problem)


[[Category:templates]]</noinclude>
[[Category:templates]]</noinclude>

Revision as of 18:18, 15 September 2021

Code Sample

Usage

All the parameters in bold are optional, for a good look the "code sample" should start with either a <pre> or a <syntaxhighlight>

{{Boxcode|code=Code Sample}}
...or...
{{Boxcode|title=Custom Title|code=Code Sample}}
...or...
{{Boxcode|float=left|title=Custom Title|code=Code Sample}}
...or...
{{Boxcode|float=left|width=50%|title=Custom Title|code=Code Sample}}
...or...
{{Boxcode|float=right|width=50%|height=500px|title=Custom Title|code=Code Sample}}

Examples

<code>
lines
<!--here-->
very long lines adds a horizontal scroll bar at bottom of the template to preserve the width of the wiki pages
................................. ........................... ............................................ ....................................... ....................................................... ..................................... ....................... .............................o/sup
float=left
Edit-copy purple.svg.png 
<code>
lines
<!--here-->
very long lines adds a horizontal scroll bar
float=right
Edit-copy purple.svg.png 
<code>
lines
<!--here-->
very long lines adds a horizontal scroll bar
float=left, width=50%
Edit-copy purple.svg.png 
<code>
lines
<!--here-->
very long lines adds a horizontal scroll bar at bottom of the template to preserve the width of the wiki pages
float=right, width=50%
Edit-copy purple.svg.png 
<code>
lines
<!--here-->
very long lines adds a horizontal scroll bar at bottom of the template to preserve the width of the wiki pages
float=left, width=700px
Edit-copy purple.svg.png 
<code>
lines
<!--here-->
very long lines adds a horizontal scroll bar
float=right, width=350px, height=200px
Edit-copy purple.svg.png 
<code>
lines
<!--here-->
very long lines adds a horizontal scroll bar
<code>
lines
<!--here-->
very long lines adds a horizontal scroll bar
<code>
lines
<!--here-->
very long lines adds a horizontal scroll bar
float=left (with a title longer than the code)
Edit-copy purple.svg.png 
<code>
lines
<!--here-->
float=left, width=150px (with a title longer than the code but restricted in width)
Edit-copy purple.svg.png 
<code>
lines
<!--here-->
Retrieved from "http://www.psdevwiki.com/ps3/index.php?title=Template:Boxcode&oldid=62040"