Template:Boxcode: Difference between revisions
m (Notes about the annoying line wraps, and white-space:pre) |
mNo edit summary |
||
Line 94: | Line 94: | ||
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> | 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: | 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 | *Do the '''white-space:pre''' when calling the <nowiki>{{boxcode}}</nowiki> template, this way. '''<nowiki>{{Boxcode|width=50%|float=right|title=Something|code=<pre style="white-space:pre;">code here</pre>}}</nowiki>''' | ||
*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>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 :/ | ||
[[Category:templates]]</noinclude> | [[Category:templates]]</noinclude> |
Revision as of 12:59, 6 September 2021
Usage
{{Boxcode|code=Code Sample}}
...or...
{{Boxcode|title=Custom Title|code=Code Sample}}
...or...
{{Boxcode|width=50%|title=Custom Title|code=Code Sample}}
...or...
{{Boxcode|width=50%|float=right|title=Custom Title|code=Code Sample}}
...or...
{{Boxcode|width=500px|height=500px|float=center|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
<code>
lines
<!--here-->
very long lines adds a horizontal scroll bar at bottom of the template to preserve the width of the wiki pages
<code> lines <!--here--> very long lines adds a horizontal scroll bar at bottom of the template to preserve the width of the wiki pages
<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
<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
###############################################
<code>
lines
<!--here-->
<code>
lines
<!--here-->
- Notes:
The line wrapping inside <syntaxhighlight> and <pre> 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)
It seems it can be achieved by using white-space:pre as explained in 1 and 2 but doesnt seems to work when is included inside the {{boxcode}} template (so i cant predefine it to do it automatically), another aditional problem is that it works only for <pre> but doesnt seems to work for <syntaxhighlight>. 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 {{boxcode}} template, this way. {{Boxcode|width=50%|float=right|title=Something|code=<pre style="white-space:pre;">code here</pre>}}
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)This doesnt works, the long line is not wrapped, but all the other lines are :/