User:Cassiel Seraphim/Sandbox: Difference between revisions

Line 183:

|}

= Pre-tag with markups =

Sometimes you want to combine showing raw code, which is easily done with the {{co|violet|<pre></pre>}} html-tag or with the {{t|code}}-template, but also do some markup on it to illustrate what to change.

Here's an example of how it can be done, taken from the [[overview manipulation]] page:

<pre<includeonly></includeonly>>

tabSetup: {{co|lightgreen|-- This identifies the start of the code handling tabs.}}

- - 0 {{co|lightgreen|-- First tab.}}

- - - bracket

- null

- - name

- {{co|slateblue|<b>. PvP .</b>}} {{co|lightgreen|-- This is the value for 'name', which is the label for the tab.}}

- - overview

- {{co|slateblue|1a - pvp + drones}} {{co|lightgreen|-- This is the name of the setting that's loaded into this tab.}}

</pre<includeonly></includeonly>>

The key to make this kind of presentation work is to break up the pre-tag with another tag, opening it up with {{co|violet|<pre<includeonly></includeonly>>}} and then closing it with {{co|violet|</pre<includeonly></includeonly>>}}, which will end up changing the parsing behaviour of the page and the end result is that you can combine the best of both worlds, a pre-formatted text you can markup with colours or other highlight-methods.

In the rare case your code or text has some templates or wiki-code you don't want to format, but still want to be able to add your own wiki commands you can take this even further by adding {{co|violet|<nowiki>}} to the opening pre-line and {{co|violet|</nowiki>}} in the closing part then wrap any individual wiki-code inside with the reverse {{co|violet|</nowiki>}} wiki-code {{co|violet|<nowiki>}} markup.

Since this opens up for html-tags as well as wiki-markups it might be necessary to break up tags or replace equal signs to get the parsed result to your liking. This can be done by using {{co|slateblue|&lt;}} instead of {{co|violet|<}} and {{co|slateblue|&gt;}} instead of {{co|violet|>}} for tags plus {{co|slateblue|&#61;}} instead of {{co|violet|=}} for the equal sign.

= Useful HTML-codes =

@@ Line 183: / Line 183: @@
 |}
 |}
+= Pre-tag with markups =
+Sometimes you want to combine showing raw code, which is easily done with the {{co|violet|&lt;pre&gt;&lt;/pre&gt;}} html-tag or with the {{t|code}}-template, but also do some markup on it to illustrate what to change.
+Here's an example of how it can be done, taken from the [[overview manipulation]] page:
+<pre<includeonly></includeonly>>
+tabSetup:  {{co|lightgreen|-- This identifies the start of the code handling tabs.}}
+- - 0  {{co|lightgreen|-- First tab.}}
+  - - - bracket
+      - null
+    - - name
+      - {{co|slateblue|<b&gt;.  PvP  .</b&gt;}}  {{co|lightgreen|-- This is the value for 'name', which is the label for the tab.}}
+    - - overview
+      - {{co|slateblue|1a - pvp + drones}}  {{co|lightgreen|-- This is the name of the setting that's loaded into this tab.}}
+</pre<includeonly></includeonly>>
+The key to make this kind of presentation work is to break up the pre-tag with another tag, opening it up with {{co|violet|&lt;pre&lt;includeonly&gt;&lt;/includeonly&gt;&gt;}} and then closing it with {{co|violet|&lt;/pre&lt;includeonly&gt;&lt;/includeonly&gt;&gt;}}, which will end up changing the parsing behaviour of the page and the end result is that you can combine the best of both worlds, a pre-formatted text you can markup with colours or other highlight-methods.
+In the rare case your code or text has some templates or wiki-code you don't want to format, but still want to be able to add your own wiki commands you can take this even further by adding {{co|violet|&lt;nowiki&gt;}} to the opening pre-line and {{co|violet|&lt;/nowiki&gt;}} in the closing part then wrap any individual wiki-code inside with the reverse {{co|violet|&lt;/nowiki&gt;}} wiki-code {{co|violet|&lt;nowiki&gt;}} markup.
+Since this opens up for html-tags as well as wiki-markups it might be necessary to break up tags or replace equal signs to get the parsed result to your liking. This can be done by using {{co|slateblue|&amp;lt;}} instead of {{co|violet|<}} and {{co|slateblue|&amp;gt;}} instead of {{co|violet|>}} for tags plus {{co|slateblue|&amp;#61;}} instead of {{co|violet|=}} for the equal sign.
 = Useful HTML-codes =