Template:Markup HTML Rendered/doc: Difference between revisions

Revision as of 21:48, 14 February 2024

Latest revision as of 06:22, 2 December 2024

(9 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}}

Line 6 ⟶ 7:

==Usage==

{{tl|Markup HTML Rendered}}'s arguments should be provided in sets of three. The first of the set should be Wikitext enclosed in {{xtag|nowiki}} tags. The second should be HTML, also enclosed in {{xtag|nowiki}} tags. The third is usually identical to the first, but without {{xtag|nowiki}} tags. The template accepts up to 4039 unnamed parameters, resulting in up to 13 rows of examples.

This:

Line 16 ⟶ 17:

{{Markup 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. For guidance and examples of more complex usage, see [[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 third 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 third 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==

Line 32 ⟶ 23:

===Multiple rows===

{{Markup HTML Rendered

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

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

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

}}

===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 136 ⟶ 54:

"col2headerstyle",

"col2",

"col3headerstyle",

"col3",

"padding",

"col1style",

"col2style",

"col3style",

"codestyle",

"outputstyle",

Line 143 ⟶ 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 196 ⟶ 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 226 ⟶ 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 234 ⟶ 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 241 ⟶ 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"

}

}

}