Editing Template:Boxcode

Jump to navigation Jump to search
Warning: You are not logged in. Your IP address will be publicly visible if you make any edits. If you log in or create an account, your edits will be attributed to your username, along with other benefits.

The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then publish the changes below to finish undoing the edit.

Latest revision Your text
Line 1: Line 1:
<div style="width:{{{width|auto}}}; float:{{{float|none}}};">
<div style="width:{{{width|auto}}}; float:{{{float|left}}};">
  <div style="margin:5px; padding:3px; background:#e5e5ff; border:3px double #8080b0; box-shadow: 4px 4px 2px 1px rgba(0,0,0,.2);">
  <div style="background:#e5e5ff; border:3px double #8080b0; margin:5px; padding:5px; box-shadow: 4px 4px 2px 1px #e0e0e0; overflow:auto;">
   {{#if:{{{title|}}} |
   <div class="nowrap" style="display:inline-block; margin-bottom:5px;">
  <div class="nowrap" style="display:block; width:100%; margin-bottom:3px; overflow:auto;">
  <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; outline:1px solid #8080b0; outline-offset:-1px; font-weight:bold; font-style:italic; color:#606090;">{{{title|Custom Title}}}</div><span style="text-align:right; margin-left:3px;">[[image:Edit-copy_purple.svg.png|link=|x25px]]</span>
  </div>
  </div> |
   {{clear}}
   }}
   <div style="border:1px dashed #8080b0; height:{{{height|auto}}}; overflow:auto;">
   <div style="height:{{{height|auto}}}; border:1px dashed #8080b0; {{#if:{{{height|}}}|overflow-y:scroll;|overflow:auto;}}">{{#tag:pre|{{{code|Code Sample}}}|style="display:inline-block; min-width:100%; margin-bottom:-5px; padding:0px; border:none;"}}</div>
  <div style="margin-top:-14px; margin-bottom:-14px;">{{{code|code}}}</div>
  </div>
  </div>
  </div>
</div><noinclude>
</div><noinclude>


<br><br>{{clear}}
== Usage ==
== Usage ==
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>
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>
Line 17: Line 19:
<nowiki>{{</nowiki>Boxcode|'''title='''Custom Title|'''code='''Code Sample<nowiki>}}</nowiki>
<nowiki>{{</nowiki>Boxcode|'''title='''Custom Title|'''code='''Code Sample<nowiki>}}</nowiki>
<br>...or...<br>
<br>...or...<br>
<nowiki>{{</nowiki>Boxcode|'''float='''left|'''title='''Custom Title|'''code='''Code Sample<nowiki>}}</nowiki>
<nowiki>{{</nowiki>Boxcode|'''float='''right|'''title='''Custom Title|'''code='''Code Sample<nowiki>}}</nowiki>
<br>...or...<br>
<br>...or...<br>
<nowiki>{{</nowiki>Boxcode|'''float='''left|'''width='''50%|'''title='''Custom Title|'''code='''Code Sample<nowiki>}}</nowiki>
<nowiki>{{</nowiki>Boxcode|'''float='''right|'''width='''500px|'''title='''Custom Title|'''code='''Code Sample<nowiki>}}</nowiki>
<br>...or...<br>
<br>...or...<br>
<nowiki>{{</nowiki>Boxcode|'''float='''right|'''width='''50%|'''height='''500px|'''title='''Custom Title|'''code='''Code Sample<nowiki>}}</nowiki>
<nowiki>{{</nowiki>Boxcode|'''float='''right|'''width='''500px|'''height='''500px|'''title='''Custom Title|code=Code Sample<nowiki>}}</nowiki>


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


{{clear}}
{{clear}}


{{Boxcode|float=left|title=float=left|code=<syntaxhighlight lang="xml">
{{Boxcode|width=700px|float=left|title=width=700px float=left|code=<syntaxhighlight lang="xml">
<code>
<code>
lines
lines
Line 40: Line 54:
very long lines adds a horizontal scroll bar
very long lines adds a horizontal scroll bar
</syntaxhighlight>}}
</syntaxhighlight>}}
{{Boxcode|float=right|title=float=right|code=<syntaxhighlight lang="xml">
{{Boxcode|width=auto|float=right|title=width=auto float=right|code=<syntaxhighlight lang="xml">
<code>
<code>
lines
lines
Line 46: Line 60:
very long lines adds a horizontal scroll bar
very long lines adds a horizontal scroll bar
</syntaxhighlight>}}
</syntaxhighlight>}}
 
{{Boxcode|width=auto|float=right|title=width=auto float=right|code=<syntaxhighlight lang="xml">
{{clear}}
 
{{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 at bottom of the template to preserve the width of the wiki pages
very long lines adds a horizontal scroll bar
</syntaxhighlight>}}
</syntaxhighlight>}}
{{Boxcode|float=right|width=50%|title=float=right, width=50%|code=<syntaxhighlight lang="xml">
{{Boxcode|width=350px|height=200px|float=right|title=width=350px height=200px float=right|code=<syntaxhighlight lang="xml">
<code>
lines
<!--here-->
very long lines adds a horizontal scroll bar
<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>}}
 
{{clear}}
 
{{Boxcode|float=left|title=float=left (with a title longer than the code)|code=<syntaxhighlight lang="xml">
<code>
<code>
lines
lines
<!--here-->
<!--here-->
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">
{{Boxcode|float=left|width=200px|title=float=left, width=200px (with a title longer than the code but restricted in width)|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=right|width=700px|title=float=right, width=700px|code=<syntaxhighlight lang="xml">
<code>
<code>
lines
lines
<!--here-->
<!--here-->
very long lines adds a horizontal scroll bar
</syntaxhighlight>}}
</syntaxhighlight>}}


{{clear}}
{{clear}}
 
*Notes:
{{boxcode|float=left|height=300px|title=float=left, height=300px|code=<syntaxhighlight lang=bash>
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>
lv2(2): # Register Info.
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:
lv2(2): #      LR: 0xbadadd0010800010    CR:0x24000028
*Do the '''white-space:pre''' when calling the <nowiki>{{boxcode}}</nowiki> template, this way. '''<nowiki>{{Boxcode|title=Something|code=<pre style="white-space:pre;">code here</pre>}}</nowiki>'''
lv2(2): #    CTR: 0x000000000163c62c
*<strike>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)</strike> This doesnt works, the long line is not wrapped, but all the other lines are :/
lv2(2): #
lv2(2): #  GPR 0: 0xbadadd0010800010  GPR 1: 0x00000000d00caf90
lv2(2): #  GPR 2: 0x000000000191ef80  GPR 3: 0xffffffffffffffff
lv2(2): #  GPR 4: 0x00000000300e4af0  GPR 5: 0x0000000000000021
lv2(2): #  GPR 6: 0x0000000000010000  GPR 7: 0x0000000000000000
lv2(2): #  GPR 8: 0x00000000d00cad90  GPR 9: 0x0000000000000000
lv2(2): #  GPR10: 0xffffffff80020001  GPR11: 0x0000000000000002
lv2(2): #  GPR12: 0x0000000024000028  GPR13: 0x000000001000cf50
lv2(2): #  GPR14: 0x0000000000000000  GPR15: 0x0000000000000000
lv2(2): #  GPR16: 0x0000000000000000  GPR17: 0x0000000000000000
lv2(2): #  GPR18: 0x0000000000000000  GPR19: 0x0000000000000000
lv2(2): #  GPR20: 0x0000000000000000  GPR21: 0x0000000000000000
lv2(2): #  GPR22: 0x0000000000000000  GPR23: 0x0000000000000000
lv2(2): #  GPR24: 0x0000000000000000  GPR25: 0x0000000000000000
lv2(2): #  GPR26: 0x0000000000000000  GPR27: 0x0000000000000000
lv2(2): #  GPR28: 0x0000000000000000  GPR29: 0x0000000000000000
lv2(2): #  GPR30: 0x0000000000000000  GPR31: 0x0000000000000000
</syntaxhighlight>}}
 
{{boxcode|float=left|width=350px|height=300px|title=float=left, width=350px, height=300px|code=<syntaxhighlight lang=bash>
lv2(2): # Register Info.
lv2(2): #      LR: 0xbadadd0010800010    CR:0x24000028
lv2(2): #    CTR: 0x000000000163c62c
lv2(2): #
lv2(2): #  GPR 0: 0xbadadd0010800010  GPR 1: 0x00000000d00caf90
lv2(2): #  GPR 2: 0x000000000191ef80  GPR 3: 0xffffffffffffffff
lv2(2): #  GPR 4: 0x00000000300e4af0  GPR 5: 0x0000000000000021
lv2(2): #  GPR 6: 0x0000000000010000  GPR 7: 0x0000000000000000
lv2(2): #  GPR 8: 0x00000000d00cad90  GPR 9: 0x0000000000000000
lv2(2): #  GPR10: 0xffffffff80020001  GPR11: 0x0000000000000002
lv2(2): #  GPR12: 0x0000000024000028  GPR13: 0x000000001000cf50
lv2(2): #  GPR14: 0x0000000000000000  GPR15: 0x0000000000000000
lv2(2): #  GPR16: 0x0000000000000000  GPR17: 0x0000000000000000
lv2(2): #  GPR18: 0x0000000000000000  GPR19: 0x0000000000000000
lv2(2): #  GPR20: 0x0000000000000000  GPR21: 0x0000000000000000
lv2(2): #  GPR22: 0x0000000000000000  GPR23: 0x0000000000000000
lv2(2): #  GPR24: 0x0000000000000000  GPR25: 0x0000000000000000
lv2(2): #  GPR26: 0x0000000000000000  GPR27: 0x0000000000000000
lv2(2): #  GPR28: 0x0000000000000000  GPR29: 0x0000000000000000
lv2(2): #  GPR30: 0x0000000000000000  GPR31: 0x0000000000000000
</syntaxhighlight>}}
 
<pre style="float:left; width:350px; height:300px;>
lv2(2): # Register Info.
lv2(2): #      LR: 0xbadadd0010800010    CR:0x24000028
lv2(2): #    CTR: 0x000000000163c62c
lv2(2): #
lv2(2): #  GPR 0: 0xbadadd0010800010  GPR 1: 0x00000000d00caf90
lv2(2): #  GPR 2: 0x000000000191ef80  GPR 3: 0xffffffffffffffff
lv2(2): #  GPR 4: 0x00000000300e4af0  GPR 5: 0x0000000000000021
lv2(2): #  GPR 6: 0x0000000000010000  GPR 7: 0x0000000000000000
lv2(2): #  GPR 8: 0x00000000d00cad90  GPR 9: 0x0000000000000000
lv2(2): #  GPR10: 0xffffffff80020001  GPR11: 0x0000000000000002
lv2(2): #  GPR12: 0x0000000024000028  GPR13: 0x000000001000cf50
lv2(2): #  GPR14: 0x0000000000000000  GPR15: 0x0000000000000000
lv2(2): #  GPR16: 0x0000000000000000  GPR17: 0x0000000000000000
lv2(2): #  GPR18: 0x0000000000000000  GPR19: 0x0000000000000000
lv2(2): #  GPR20: 0x0000000000000000  GPR21: 0x0000000000000000
lv2(2): #  GPR22: 0x0000000000000000  GPR23: 0x0000000000000000
lv2(2): #  GPR24: 0x0000000000000000  GPR25: 0x0000000000000000
lv2(2): #  GPR26: 0x0000000000000000  GPR27: 0x0000000000000000
lv2(2): #  GPR28: 0x0000000000000000  GPR29: 0x0000000000000000
lv2(2): #  GPR30: 0x0000000000000000  GPR31: 0x0000000000000000
</pre>


[[Category:templates]]</noinclude>
[[Category:templates]]</noinclude>
Please note that all contributions to PS3 Developer wiki are considered to be released under the GNU Free Documentation License 1.2 (see PS3 Developer wiki:Copyrights for details). If you do not want your writing to be edited mercilessly and redistributed at will, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource. Do not submit copyrighted work without permission!

To protect the wiki against automated edit spam, we kindly ask you to solve the following hCaptcha:

Cancel Editing help (opens in new window)

Templates used on this page: