Fandom

Avatar Wiki

Comment1

Pre tags and Syntaxhighlight tags

MateyY October 13, 2012 User blog:MateyY

Here is a simple tutorial on how to use <pre> tags and <syntaxhighlight> tags. For any questions, feel free to contact me.

<pre> tags

<pre> tags are great to wrap coding samples without any syntax highlighting. They also preserve all spaces.

Here is a chunk of code wrapped and not wrapped in a <pre> tag:

<text> here is some text </text>

<text>   here is some text    </text>

To wrap code in <pre>tags, just write: <pre>your code</pre>

<syntaxhighlight> tags

The <syntaxhighlight> tags are used to highlight syntax on different script/programming/markup languages. The tag <source> is its alias, but is not recommended because of XML conflicts.

Here is the difference between a <pre> tag and a <syntaxhighlight> tag:

With a <pre>tag:

var callback = function() {
     for (var i = 0; i < this.childNodes.length; i++) this.removeChild(this.childNodes[i]);
},
    body = document.body;
if (body.addEventListener) body.addEventListener("click",callback,false);
else body.attachEvent("onclick",function() {
     callback.call(body);
});

With a <syntaxhighlight>tag:

var callback = function() {
     for (var i = 0; i < this.childNodes.length; i++) this.removeChild(this.childNodes[i]);
},
    body = document.body;
if (body.addEventListener) body.addEventListener("click",callback,false);
else body.attachEvent("onclick",function() {
     callback.call(body);
});

To use that tag, just write: <syntaxhighlight lang="language">your code</syntaxhighlight>

Some languages are: javascript, html5, and css. If the language is invalid, a box will show up with all the valid languages.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.