View source for Template:Markup HTML Rendered/doc

{{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 side by side with the HTML it produces and the output it renders.

==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 39 unnamed parameters, resulting in up to 13 rows of examples.

This:
<pre>
{{Markup HTML Rendered|&lt;nowiki>'''Bold text'''&lt;/nowiki>|&lt;nowiki><b>Bold text</b>&lt;/nowiki>|'''Bold text'''}}
</pre>

Produces this:
{{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]].

==Examples==

===Multiple rows===
{{Markup HTML Rendered
|'''Bold text'''|<b>Bold text</b>|'''Bold text'''
|''Italic text''|<i>Italic text</i>|''Italic text''
|[[Internal link]]|<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
}}

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

== TemplateData ==
{{TemplateData header}}
<templatedata>
{
	"description": " ",
	"paramOrder": [
		"margin-left",
		"width",
		"style",
		"noheaders",
		"title",
		"colheaderstyle",
		"col1headerstyle",
		"col1",
		"col2headerstyle",
		"col2",
		"col3headerstyle",
		"col3",
		"padding",
		"col1style",
		"col2style",
		"col3style",
		"codestyle",
		"outputstyle",
		"1",
		"2",
		"3",
		"37",
		"38",
		"39"
	],
	"params": {
		"1": {
			"description": "row 1, Wikitext markup (first column).",
			"type": "string"
		},
		"2": {
			"description": "row 1, HTML markup (second column).",
			"type": "string"
		},
		"3": {
			"description": "row 1, rendered output (third column).",
			"type": "string"
		},
		"37": {
			"description": "First column's content in last possible row.",
			"type": "string"
		},
		"38": {
			"description": "Second column's content in last possible row.",
			"type": "string"
		},
		"39": {
			"description": "Third column's content in last possible row.",
			"type": "string"
		},
		"width": {
			"description": "To set the table's overall width.",
			"type": "string",
			"default": "auto"
		},
		"margin-left": {
			"description": "To set a margin on the table's lefthand side.",
			"type": "string",
			"default": "0"
		},
		"style": {
			"description": "For CSS styles amending the table's overall appearance.",
			"type": "string"
		},
		"title": {
			"description": "Title above table.",
			"type": "string",
			"default": "none"
		},
		"noheaders": {
			"description": "Set (as e.g. noheaders=on) to suppress the columns' headings and table's title.",
			"type": "string"
		},
		"col1": {
			"description": "First column (Wikitext)'s heading.",
			"type": "string",
			"default": "\"Markup\""
		},
		"col2": {
			"description": "Second column (HTML)'s heading.",
			"type": "string",
			"default": "\"Renders as\""
		},
		"col3": {
			"description": "Third column (output)'s heading.",
			"type": "string",
			"default": "\"Renders as\""
		},
		"codestyle": {
			"description": "Use CSS style code to change the appearance of content (text) in the Markup column.",
			"type": "string",
			"aliases": [
				"markupstyle"
			],
			"label": "Markup text style",
			"example": "white-space: nowrap;"
		},
		"outputstyle": {
			"description": "Use CSS style code to change the appearance of content (text) in the Renders-as column.",
			"type": "string",
			"label": "Output text style",
			"example": "white-space: nowrap;"
		},
		"col1headerstyle": {
			"description": "For CSS styling to amend the appearance of the first column's heading. Overrides (but does not replace) colheaderstyle.",
			"type": "string"
		},
		"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"
		},
		"colheaderstyle": {
			"description": "For CSS styling to amend the appearance of each column's heading.",
			"type": "string"
		},
		"col1style": {
			"label": "Column 1 Style",
			"description": "For CSS styles to amend the appearance of the Wikitext column (e.g. width of the column).",
			"example": "width:20em;",
			"type": "string",
			"default": "none"
		},
		"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"
		}
	}
}
</templatedata>
<includeonly>{{Sandbox other|
| <!-- Categories below this line, please: -->
[[Category:Documentation assistance templates]]
[[Category:Template namespace templates]]
[[Category:Template test cases| ]]
}}</includeonly>