Template:Markup
{{| style="table-layout: fixed; width: 100%; border-width: medium; margin-left: 0em;"
! style="width:50%" scope="col" | Markup ! style="width:50%" scope="col" | Renders as |- | style="width:50%; border-width: 1px; padding: 5px; border-style: solid none none none; border-color: #ddd; vertical-align:text-top;" | | style="width:50%; border-width: 1px; padding: 5px; border-style: solid none none none; border-color: #ddd; vertical-align:text-top;" | |}}
This template is used to present markup or code side by side with the output it renders.
Usage
Each cell in the first ("Markup") column uses <pre>
to retain newlines and spaces but styled to allow content to wrap within it. It is usually desirable to escape the content of these cells so that the markup is displayed by wrapping the markup in <nowiki>...</nowiki>
. It is technically not possible to add this feature to the template.
Each cell in the second ("Renders as") column is usually the unescaped markup copied from the corresponding "Markup" cell before it. There are instances where this may differ:
- If the first line includes wikimarkup that must start on a new line such as #, * or ; then use
<nowiki />
before the first line; see examples below.
Limitations
====<nowiki>...</nowiki>
==
If you don't wrap the content of the markup cell in <nowiki>...</nowiki>
, then any template markup will not be escaped, it will be expanded.
This example shows the markup for {{tl|tag}}: {{| style="table-layout: fixed; width: 100%; border-width: medium; margin-left: 0em;"
! style="width:50%" scope="col" | Renders as
! style="width:50%" scope="col" | Expected rendering
|-
<code>{{[[Template:tag|tag]]}}</code>
| style="width:50%; background-color: #f9f9f9; border-width: 1px; padding: 5px; border-style: solid solid none solid; border-color: #ddd; vertical-align:text-top;" | {{tl|tag}} |- | style="width:50%; border-width: 1px; padding: 5px; border-style: solid none none none; border-color: #ddd; vertical-align:text-top;" | | style="width:50%; border-width: 1px; padding: 5px; border-style: solid none none none; border-color: #ddd; vertical-align:text-top;" | |}}
HTML entities
HTML entities are parsed in the markup cell: {{| style="table-layout: fixed; width: 100%; border-width: medium; margin-left: 0em;"
! style="width:50%" scope="col" | Nowikied markup shows as
! style="width:50%" scope="col" | Expected markup
|-
–
| style="width:50%; background-color: #f9f9f9; border-width: 1px; padding: 5px; border-style: solid solid none solid; border-color: #ddd; vertical-align:text-top;" | – |- | style="width:50%; border-width: 1px; padding: 5px; border-style: solid none none none; border-color: #ddd; vertical-align:text-top;" | | style="width:50%; border-width: 1px; padding: 5px; border-style: solid none none none; border-color: #ddd; vertical-align:text-top;" | |}}
To work around this, replace the & with & thus &nbsp; will show as
Example
Simple
{{| style="table-layout: fixed; width: 100%; border-width: medium; margin-left: 0em;"
! style="width:50%" scope="col" | Markup
! style="width:50%" scope="col" | Renders as
|-
'''Bold text'''
| style="width:50%; background-color: #f9f9f9; border-width: 1px; padding: 5px; border-style: solid solid none solid; border-color: #ddd; vertical-align:text-top;" | Bold text
|-
''Italic text''
| style="width:50%; background-color: #f9f9f9; border-width: 1px; padding: 5px; border-style: solid solid none solid; border-color: #ddd; vertical-align:text-top;" | Italic text |- | style="width:50%; border-width: 1px; padding: 5px; border-style: solid none none none; border-color: #ddd; vertical-align:text-top;" | | style="width:50%; border-width: 1px; padding: 5px; border-style: solid none none none; border-color: #ddd; vertical-align:text-top;" | |}}
Multiple rows
{{| style="table-layout: fixed; width: 100%; border-width: medium; margin-left: 0em;"
! style="width:50%" scope="col" | Markup
! style="width:50%" scope="col" | Renders as
|-
The quick brown fox jumps over the lazy dog.
| style="width:50%; background-color: #f9f9f9; border-width: 1px; padding: 5px; border-style: solid solid none solid; border-color: #ddd; vertical-align:text-top;" | The quick brown fox jumps over the lazy dog.
|-
The quick brown fox jumps over the lazy dog.
| style="width:50%; background-color: #f9f9f9; border-width: 1px; padding: 5px; border-style: solid solid none solid; border-color: #ddd; vertical-align:text-top;" | The quick brown fox jumps over the lazy dog.
|-
The quick brown fox jumps over the lazy dog.
| style="width:50%; background-color: #f9f9f9; border-width: 1px; padding: 5px; border-style: solid solid none solid; border-color: #ddd; vertical-align:text-top;" | The quick brown fox jumps over the lazy dog.
|-
The quick brown fox jumps over the lazy dog.
| style="width:50%; background-color: #f9f9f9; border-width: 1px; padding: 5px; border-style: solid solid none solid; border-color: #ddd; vertical-align:text-top;" | The quick brown fox jumps over the lazy dog.
|-
The quick brown fox jumps over the lazy dog.
| style="width:50%; background-color: #f9f9f9; border-width: 1px; padding: 5px; border-style: solid solid none solid; border-color: #ddd; vertical-align:text-top;" | The quick brown fox jumps over the lazy dog. |- | style="width:50%; border-width: 1px; padding: 5px; border-style: solid none none none; border-color: #ddd; vertical-align:text-top;" | | style="width:50%; border-width: 1px; padding: 5px; border-style: solid none none none; border-color: #ddd; vertical-align:text-top;" | |}}
With title
{{| style="table-layout: fixed; width: 100%; border-width: medium; margin-left: 0em;"
|+ Foxes and dogs
! style="width:50%" scope="col" | Markup
! style="width:50%" scope="col" | Renders as
|-
The quick brown fox jumps over the lazy dog.
| style="width:50%; background-color: #f9f9f9; border-width: 1px; padding: 5px; border-style: solid solid none solid; border-color: #ddd; vertical-align:text-top;" | The quick brown fox jumps over the lazy dog. |- | style="width:50%; border-width: 1px; padding: 5px; border-style: solid none none none; border-color: #ddd; vertical-align:text-top;" | | style="width:50%; border-width: 1px; padding: 5px; border-style: solid none none none; border-color: #ddd; vertical-align:text-top;" | |}}
TemplateData
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| margin-left | margin-left | To set a margin on the table's lefthand side.
| String | optional |
| width | width | To set the table's overall width.
| String | optional |
| style | style | For CSS styles amending the table's overall appearance. | String | optional |
| noheaders | noheaders | Set (as e.g. noheaders=on) to suppress the columns' headings and table's title. | String | optional |
| title | title | Title above table. | String | optional |
| colheaderstyle | colheaderstyle | For CSS styling to amend the appearance of each column's heading. | String | optional |
| col1headerstyle | col1headerstyle | For CSS styling to amend the appearance of the first column's heading. Overrides (but does not replace) colheaderstyle. | String | optional |
| col1 | col1 | First column (markup/code)'s heading.
| String | optional |
| col2headerstyle | col2headerstyle | For CSS styling to amend the appearance of the second column's heading. Overrides (but does not replace) colheaderstyle. | String | optional |
| col2 | col2 | Second column (output)'s heading.
| String | optional |
| codestyle | codestyle markupstyle | For CSS styles amending the presentation of the first column (markup/code)'s content (e.g. a smaller font-size). | String | optional |
| outputstyle | outputstyle | For CSS styles amending the presentation of the second column (output)'s content. | String | optional |
| 1 | 1 | row 1, first column (markup/code)'s content. | String | optional |
| 2 | 2 | row 1, second column (output)'s content. | String | optional |
| 3 | 3 | row 2, first column's content (etc). | String | optional |
| 4 | 4 | row 2, second column's content (etc). | String | optional |
| 39 | 39 | First column's content in last possible row. | String | optional |
| 40 | 40 | Second column's content in last possible row. | String | optional |
The above documentation is transcluded from Template:Markup/doc. (edit | history)