Template:CodeBlock: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
(The source code has been reworked.)
m (fixed width with src/lang)
 
(67 intermediate revisions by 8 users not shown)
Line 1: Line 1:
<onlyinclude><includeonly><!--
See Also: [[Template:Code]]
--><div style="{{#if:{{{limited|}}}|max-height: 400px; height: {{{height|auto}}};|}}background-color:{{#switch:{{{style|}}}|#default=rgba(0,0,0,.3)|1=rgb(0,0,0,.1)}};{{#switch:{{{style|}}}|#default= |1=border:1px solid rgba(255,255,255,.1);}}border-radius:4px; {{#if:{{{limited|}}}|overflow-y:auto; overflow-x:hidden;|overflow:hidden;}} font-family:monospace; font-size:1.2em; line-height:1.125rem; text-indent:0; white-space:pre-wrap; padding:.5em; margin: {{{margin|.5em 0 0 0}}}"><!--
{{Doc}}
-->{{#switch:{{{header|}}}|#default=|1=<div style="width:100%; background-color:rgba(0,0,0,.1); border:1px solid rgba(255,255,255,.1); font-family:monospace; font-size:1.0em; line-height:1.125rem; text-indent:0; white-space:pre-wrap; padding:.5em; margin-top:-0.6em; margin-left:-0.6em; margin-bottom:0.5em">{{{1|}}}{{#if:{{{lang|}}}|<div style="float: right;">{{#switch:{{{lang|}}}|#default={{{lang|}}}|plain=Plain Text|html=HTML|css=CSS|scss=SCSS|less=LESS|js=JavaScript|json=JSON|php=PHP|c=C|cs=C#|cpp=C++|pascal=Pascal|python=Python|java=Java|squirrel=Squirrel|lua=Lua|glua=gLua}}</div>|}}</div>}}<!--
<includeonly>
-->{{#switch:{{{header|}}}|#default={{{1|}}}|1={{{2|}}}}}<!--
 
--></div></includeonly></onlyinclude>{{doc}}
<onlyinclude><!--
        --><div style="max-width:{{{width|unset}}}; overflow:hidden;background-color:{{#switch:{{{style|}}}|1=rgba(0,0,0,.1)|rgba(0,0,0,.4)}};{{#switch:{{{style|}}}|1=border:1px solid rgba(48,48,48,1);|}}border-radius:4px; font-family:monospace,monospace; line-height:1.125rem; text-indent:0; white-space:pre-wrap; margin: {{{margin|.3em 0 .3em 0}}}"><!--
            -->{{#if:{{{src|{{{lang|}}}}}}|<div style="width=100%; display:flex;justify-content:space-between;background-color:rgba(0,0,0,.1); border-bottom:1px solid rgba(255,255,255,.1); font-family:monospace,monospace;line-height:1.125rem; text-indent:0; white-space:pre-wrap; padding:.5em"><!--
--><!--
                --><div>{{{src|The source was not specified}}}</div><!--
                -->{{#if:{{{lang|}}}|<div>{{#switch:{{{lang}}}|plain=Plain text|html=HTML|css=CSS|scss=SCSS|less=LESS|js=JavaScript|json=JSON|php=PHP|c=C|csharp=C#|cpp=C++|pascal=Pascal|python=Python|java=Java|squirrel=Squirrel|lua=Lua|glua=gLua|fgd=Forge Game Data|{{{lang}}}}}</div>}}<!--
--><!--
            --></div>}}<!--
--><!--
            --><div style="width:100%"><!--
                --><div style="scrollbar-color:#373737 #101010; position:relative;width:100%;display:flex;max-height:{{{height|unset}}};overflow:auto"><!--
                    -->{{#if:{{{lines|}}}|<div style="z-index:1;display:flex;position:sticky;left:0;height:100%;padding:.5em 0 .4em 0;background-color:{{#switch:{{{style|}}}|1=rgb(31,31,31)|rgb(24,24,24)}};border-right:1px solid rgb(48,48,48)"><!--
                        --><ol start="{{{start|1}}}" style="text-align:right;pointer-events:none;white-space:nowrap;list-style-position:inside;margin-left:8px;margin-top:0;user-select:none;margin-right:-10px;text-indent:0"><!--
                            -->{{padright:|{{#expr:5 * {{{lines}}}}}|<li> }}{{#ifexpr:{{{lines}}} > 100<!--
                                -->|{{padright:|{{#expr:5 * ({{{lines}}} - 100)}}|<!--
                            --><li> }}}}{{#ifexpr:{{{lines}}} > 200 |{{padright:|{{#expr:5 * ({{{lines}}} - 200)}}|<!--
                            --><li> }}}}{{#ifexpr:{{{lines}}} > 300 |{{padright:|{{#expr:5 * ({{{lines}}} - 300)}}|<!--
                            --><li> }}}}{{#ifexpr:{{{lines}}} > 400 |{{padright:|{{#expr:5 * ({{{lines}}} - 400)}}|<!--
                            --><li> }}}}<!--
                        --></ol><!--
                    --></div>}}<!--
--><!--
                    --><div style="width:100%;text-indent:0;line-height:1.6em;white-space:{{#if:{{{softwrap|}}}|pre-wrap|pre}};height:100%;tab-size:4;"><!--
                        -->{{#if:{{{lightamount1|{{{lightstart1|}}}}}}|<div style="position:sticky;z-index:0"><!--
                            --><div style="width:100%;background:rgba(255,128,0,0.1);margin-top:calc((1.6em * ({{{lightstart1|1}}} - 1)) + .45em);margin-bottom:.45em;height:calc(1.6em * {{{lightamount1|1}}});position:absolute;left:0;user-select:none;pointer-events:none"><!--
                            --></div><!--
                        --></div>}}{{#if:{{{lightamount2|{{{lightstart2|}}}}}}|<div style="position:sticky;z-index:0"><!--
                            --><div style="width:100%;background:rgba(255,128,0,0.1);margin-top:calc((1.6em * ({{{lightstart2|2}}} - 1)) + .45em);margin-bottom:.45em;height:calc(1.6em * {{{lightamount2|1}}});position:absolute;left:0;user-select:none;pointer-events:none"><!--
                            --></div><!--
                        --></div>}}{{#if:{{{lightamount3|{{{lightstart3|}}}}}}|<div style="position:sticky;z-index:0"><!--
                            --><div style="width:100%;background:rgba(255,128,0,0.1);margin-top:calc((1.6em * ({{{lightstart3|3}}} - 1)) + .45em);margin-bottom:.45em;height:calc(1.6em * {{{lightamount3|1}}});position:absolute;left:0;user-select:none;pointer-events:none"><!--
                            --></div><!--
                        --></div>}}{{#if:{{{lightamount4|{{{lightstart4|}}}}}}|<div style="position:sticky;z-index:0"><!--
                            --><div style="width:100%;background:rgba(255,128,0,0.1);margin-top:calc((1.6em * ({{{lightstart4|4}}} - 1)) + .45em);margin-bottom:.45em;height:calc(1.6em * {{{lightamount4|1}}});position:absolute;left:0;user-select:none;pointer-events:none"><!--
                            --></div><!--
                        --></div>}}<div style="padding:.45em .5em;position:relative">{{#if:{{{highlight|}}}|{{#tag:syntaxhighlight|{{{1|}}}|lang={{{highlight}}}|inline=1|style="background-color:transparent;"}}|{{{1|}}}}}</div><!--
                    --></div><!--
--><!--
                --></div><!--
            --></div><!--
--><!--
        --></div></onlyinclude>
 
</includeonly>
 
[[Category:Formatting templates]]

Latest revision as of 16:21, 17 August 2025

See Also: Template:Code

English (en)Deutsch (de)Esperanto (eo)Español (es)Français (fr)Suomi (fi)Hrvatski (hr)Magyar (hu)Italiano (it)日本語 (ja)한국어 (ko)Nederlands (nl)Polski (pl)Português (pt)Português do Brasil (pt-br)Русский (ru)Slovenčina (sk)Svenska (sv)Türkçe (tr)Українська (uk)Tiếng Việt (vi)中文 (zh)中文(臺灣) (zh-tw)
Curly brackets white.pngTemplate Documentation [view] [edit]
Icon-translate.png Available doc translations
View
Page history

This template formats the text as a block of code.

Parameters and Examples

Main

The main parameters are described below.

Name Description Example Preview
{{{1}}} Your code.
It is recommended to wrap the template content with the <nowiki> tag.
{{CodeBlock|Hello, World!}}
Hello, World!
{{{margin}}} Controls margins. Goes clockwise.
{{CodeBlock|margin=5px 30px 0 10px|Hello, World!}}
Hello, World!
{{{style}}} The style of the template. The following styles are available:
  • 1 - Outlined version;
  • Default - Default style that is based on Markdown.
{{CodeBlock|style=1|Hello, World!}}
Hello, World!
{{{height}}} Controls the height of the block.
{{CodeBlock|height=52px|<nowiki>1. Hello World 2. Hello World 3. Hello World 4. Hello World</nowiki>}}
1. Hello World 2. Hello World 3. Hello World 4. Hello World
{{{width}}} Controls the width of the block.
{{CodeBlock|width=50%|<nowiki>1. Hello World 2. Hello World 3. Hello World 4. Hello World 5. Hello World </nowiki>}}
1. Hello World 2. Hello World 3. Hello World 4. Hello World 5. Hello World
{{{lines}}} Manual: Numbered lines.
{{CodeBlock|lines=4|<nowiki>Hello World Hello World Hello World Hello World</nowiki>}}
  1.  
  2.  
  3.  
  4.  
Hello World Hello World Hello World Hello World
{{{start}}} What number to start numbering from (default value is 1). The value can be negative.
{{CodeBlock|start=12|lines=5|<nowiki>Hello World Hello World Hello World Hello World Hello World</nowiki>}}
  1.  
  2.  
  3.  
  4.  
  5.  
Hello World Hello World Hello World Hello World Hello World
{{{highlight}}} Adds syntax highlighting for the language specified.
Icon-Bug.pngBug:Condenses code into one line.  [todo tested in ?]
{{CodeBlock|highlight=c|int main() {return 0;} }}
int main() { return 0; }

Header

The parameters for adding a header with the code source and the name of the programming language are described below.

Note.pngNote:The header is enabled automatically when you enter one of the following parameters.
Name Description Example Preview
{{{src}}} The source of your code.
{{CodeBlock|src=light.rad|forcetextureshadow props_foliage/urban_tree01.mdl}}
light.rad
forcetextureshadow props_foliage/urban_tree01.mdl
{{{lang}}} The name of the language displayed on the right side of the header.
{{CodeBlock|lang=csharp |<nowiki>using System; namespace HelloWorld { internal class Program { static void Main(string[] args) { Console.WriteLine("Hello World"); } } }</nowiki>}}
The source was not specified
C#
using System; namespace HelloWorld { internal class Program { static void Main(string[] args) { Console.WriteLine("Hello World"); } } }