originally published by Acetolyne on Wed, 12/12/2012
This tutorial shows you how to print html or other source code examples on your website, show users example coding, and display programming code to a user.
The problem is when you write the example code into your HTML or otherwise parsed website it doesn’t display the coding rather it parses it and displays it as if it were part of your website.To fix this I found two ways that work. As a note I came across a reference to the <xmp> tag. This tag is deprecated and doesn’t work with many browsers so should NOT be used.Now for an example we have the following code
<html>
<body>
<h1>
Here is an example of some HTML code
</h1>
<form>
<input type=”text” name=”form1″>
</form>
</body>
</html>
This will give us the following output
Here is an example of some HTML code
BUT WAIT!! this isn’t what we want we wanted the coding for the form to be displayed instead it parsed the form and displayed an actual form. So how do we get around this?
METHOD 1
using the <pre> and <code> tags. Why we use both is for compatibility with browsers we want our code to be compatible with all or atleast most browsers or some users will not be able to view our site. This will cause less visitors to be able to come to our site and this is not good so we will use both. Our new code will look like this:
<h1>
Here is an example of some HTML code
</h1>
<pre>
<code>
<form>
<input type=”text” name=”form1″>
</form>
</code>
</pre>
Notice the <pre> and <code> tags are around the coding we want to display and nothing else any coding inside these tags should be shown as text instead of parsed. Now lets take a look at a better way to do it instead.
METHOD 2
This method is much better but a bit harder to do but will result in better browser compatibility. Lets start with the original coding we had
<html>
<body>
<h1>
Here is an example of some HTML code
</h1>
<form>
<input type=”text” name=”form1″>
</form>
</body>
</html>
We want this coding displayed as text instead:
<form>
<input type=”text” name=”form1″>
</form>
So what we need to do is replace all the < symbols with
& lt; (without spaces)and all the > symbols with
& gt; (without spaces)But only around the coding we wish to display to the users of our website. Hope this tutorial helps and allows you all to show your source coding to others. I will also be doing a tutorial on a Javascript alternative to these methods so look for it on this site soon.
Leave a Reply