Template:Markup HTML Rendered/doc: Difference between revisions

Revision as of 21:41, 14 February 2024

Latest revision as of 06:22, 2 December 2024

(10 intermediate revisions by 2 users not shown)

Line 1:

{{Documentation subpage}}

{{TemplateStyles|Template:Markup/styles.css}}

<!-- Categories where indicated at the bottom of this page, please. -->

{{TOC right |limit=2}}

This template is used to present Wikitext markup or code side by side with the HTML it produces and the output it renders.

==Usage==

Each pair of {{tl|Markup HTML Rendered}}'s arguments should be twoprovided copiesin sets of somethree. [[wikitext]]The markup,first withof the firstset ofshould thebe pairWikitext enclosed in {{xtag|nowiki}} tags. The templatesecond producesshould outputbe HTML, also enclosed in two{{xtag|nowiki}} columns,tags. theThe firstthird showingis theusually markupidentical andto the secondfirst, showingbut howwithout it{{xtag|nowiki}} is renderedtags. The template accepts up to 4039 unnamed parameters, resulting in up to 2013 rows of examples.

This:

<pre>

{{markupMarkup HTML Rendered|&lt;nowiki>'''Bold text'''&lt;/nowiki>|&lt;nowiki><b>Bold text</b>&lt;/nowiki>|'''Bold text'''}}

</pre>

Produces this:

{{markupMarkup HTML Rendered|<nowiki>'''Bold text'''</nowiki>|<nowiki><b>Bold text</b></nowiki>|'''Bold text'''}}

In many cases, the markup for both columns are identical, but there are instances where this may need to differ. IfFor noneguidance and examples of thesemore issuescomplex applyusage, then you may use {{tlx|mra}} to save yourself from copying the codesee twice[[Template:Markup/doc]].

* Header markup such as {{code|1===}} will show in the page table of contents; to avoid this, use {{tlx|fake heading}} in the markup for the second column (see example [[#A complex example|below]]).

* Some templates will place the page in a maintenance category, which is usually undesired. For example.

** Instead of {{tlx|citation needed}}, use {{tlx|fake citation needed}} in the second column.

* Some templates may have error checking that places the page in a maintenance category.

** <s>{{cs1}} templates with errors: add {{para|template doc demo|true}} to the template in the second column.</s>

** To avoid this and the associated red error messages make sure that each example on the page uses different sources.

* HTML entities are parsed in the first cell, even with {{xtag|nowiki}} tags. To work around this, replace the <code>&</code> with <code>&amp;amp;</code> in the first column (see example [[#With HTML entities|below]]).

It is advisable to begin both copies of the markup with a [[newline]]; this is necessary if the first line of the markup must start on a new line (such as #, * or ;).

==Examples==

===Multiple rows===

{{Markup HTML Rendered

{{markup

|<nowiki>'''Bold text'''|<b>Bold text</nowikib>|'''Bold text'''

|<nowiki>''Italic text''|<i>Italic text</nowikii>|''Italic text''

|<nowiki>[[Internal link]]|<nowiki><a href="https://en.wikipedia.org/wiki/Internal_link">Internal link</a></nowiki>|[[Internal link]]

|<nowiki>

{{cite book|ref=none|last=Smith|year=2021|title=Smith's book}}

</nowiki>|

{{cite book|ref=none|last=Smith|year=2021|title=Smith's book}}

|<nowiki>

<score>\relative c' { c( b~ c b c b c b c~ c)}</score>

</nowiki>|

<score>\relative c' { c( b~ c b c b c b c~ c)}</score>

}}

===With custom title and column headers===

{{Markup HTML Rendered

| title=How to write about foxes and dogs in Wikipedia.

|t1=Write this in wikitext|t2=HTML markup|t3=and this will appear in the article.

| Some '''bold''' text | Some <b>bold</b> text | Some '''bold''' text

| The quick brown [[fox]] jumps over the lazy [[dog]]. | The quick brown [[fox]] jumps over the lazy [[dog]].

}}

===ASee complex example=also==

* {{tl|Markup}} for two-column code and output

In this example, {{tl2|Markup}}'s second argument here uses {{tl2|fake heading}} (to avoid headings appearing in the table of contents) and {{tl2|fake citation needed}} (to avoid adding this page to the maintenance list).

{{Markup

| <nowiki>The quick brown fox jumps over the lazy dog.{{#tag:ref|A footnote.<ref>A reference for the footnote.</ref>|group=nb}} The cow jumped over the moon.{{fact}}

== Notes ==

{{reflist|group=nb}}

== References ==

{{reflist}}

</nowiki>

| The quick brown fox jumps over the lazy dog.{{#tag:ref|A footnote.<ref>A reference for the footnote.</ref>|group=nb}} The cow jumped over the moon.{{fake citation needed}}

{{fake heading|sub=2|Notes}}

{{reflist|group=nb}}

{{fake heading|sub=2|References}}

{{reflist|close}}

}}

===With HTML entities===

HTML entities are parsed in the markup cell. To work around this, replace the <code>&</code> with <code>&amp;amp;</code> in the first column.

<pre>

{{Markup| &lt;nowiki>&amp;amp;ndash;</nowiki> | &amp;ndash;}}

</pre>

renders as:

{{Markup| <nowiki>&amp;ndash;</nowiki> | &ndash;}}

===With the glyphs "|" and "="===

If the markup contains the [[Glyph|glyph]]s <code>[[Vertical bar{{!}}|]]</code> or <code>[[Equals sign|=]]</code> they need to be replaced by the [[Help:Magic words#Other|magic words]] <code>[[:mw:Help:Magic_words#Other|<nowiki>{{!}}</nowiki>]]</code> or <code>[[:mw:Help:Magic_words#Other|<nowiki>{{=}}</nowiki>]]</code>. If not they are being interpreted for the Template:Markup itself as a separator between the parameters or between the parameter name and value! So as an example use:

<pre>

{{markup

|&lt;nowiki>use <code>|lang = en</code></nowiki>

|use <code>{{!}}lang {{=}} en</code>

}}

</pre>

which renders as:

{{markup

|<nowiki>use <code>|lang = en</code></nowiki>

|use <code>{{!}}lang {{=}} en</code>

}}

===More examples===

{{Markup|<nowiki>

{{cite book |last=White |first=T. H. |title=The Book of Merlyn |year=1977}}

</nowiki>|

{{cite book |last=White |first=T. H. |title=The Book of Merlyn |year=1977}}

|<nowiki>

{{code|lang=html|{{cite book |last=White |first=T. H. |title=The Book of Merlyn |year=1977}}}}

</nowiki>|

{{code|lang=html|{{cite book |last=White |first=T. H. |title=The Book of Merlyn |year=1977}}}}

}}

==Typing aid: template {{tl|mra}}==

{{tl|mra}} will duplicate the source text automatically, saving you the trouble of copying the text and adding {{xtag|nowiki}} tags to the first case.

This:

<pre>{{subst:mra|'''Bold text'''|''Italic text''}}</pre>

Will produce this:

<pre>{{markup|

&lt;nowiki>'''Bold text'''</nowiki>|'''Bold text'''|

&lt;nowiki>''Italic text''</nowiki>|''Italic text''}}</pre>

Which renders as:

{{markup|

<nowiki>'''Bold text'''</nowiki>|'''Bold text'''|

<nowiki>''Italic text''</nowiki>|''Italic text''}}

==See also==

* {{tl|Markup2}} for bulleted and indented markup.

* {{tl|Markupv}} for the vertical presentation (above/below) of markup/code and its output.

* {{tl|Automarkup}} does not require to write the code samples twice.

== TemplateData ==

{{TemplateData header}}

Line 143 ⟶ 54:

"col2headerstyle",

"col2",

"col3headerstyle",

"col3",

"padding",

"col1style",

"col2style",

"col3style",

"codestyle",

"outputstyle",

Line 150 ⟶ 65:

"2",

"3",

"437",

"3938",

"4039"

],

"params": {

"1": {

"description": "row 1, firstWikitext columnmarkup (markup/code)'sfirst contentcolumn).",

"type": "string"

},

"2": {

"description": "row 1, secondHTML columnmarkup (output)'ssecond contentcolumn).",

"type": "string"

},

"3": {

"description": "row 21, firstrendered column's contentoutput (etcthird column).",

"type": "string"

},

"437": {

"description": "row 2, second column's content (etc).",

"type": "string"

},

"39": {

"description": "First column's content in last possible row.",

"type": "string"

},

"4038": {

"description": "Second column's content in last possible row.",

"type": "string"

},

"39": {

"description": "Third column's content in last possible row.",

"type": "string"

},

Line 203 ⟶ 118:

},

"col1": {

"description": "First column (markup/codeWikitext)'s heading.",

"type": "string",

"default": "\"Markup\""

},

"col2": {

"description": "Second column (outputHTML)'s heading.",

"type": "string",

"default": "\"Renders as\""

},

"col3": {

"description": "Third column (output)'s heading.",

"type": "string",

"default": "\"Renders as\""

Line 233 ⟶ 153:

"col2headerstyle": {

"description": "For CSS styling to amend the appearance of the second column's heading. Overrides (but does not replace) colheaderstyle.",

"type": "string"

},

"col3headerstyle": {

"description": "For CSS styling to amend the appearance of the third column's heading. Overrides (but does not replace) colheaderstyle.",

"type": "string"

},

Line 241 ⟶ 165:

"col1style": {

"label": "Column 1 Style",

"description": "For CSS styles to amend the appearance of the markupWikitext column (e.g. width of the column).",

"example": "width:20em;",

"type": "string",

Line 248 ⟶ 172:

"col2style": {

"label": "Column 2 Style",

"description": "For CSS styles to amend the appearance of the HTML column (e.g. the background colour).",

"example": "background-color:#fff;",

"type": "string",

"default": "none"

},

"col3style": {

"label": "Column 3 Style",

"description": "For CSS styles to amend the appearance of the output column (e.g. the background colour).",

"example": "background-color:#fff;",

"type": "string",

"default": "none"

},

}

"padding": {

"description": "Padding within each cell.",

"example": "0 5px",

"type": "string",

"default": "5px"

}

}

}