Recent comments

You are here

Home

Error message

  • Warning: count(): Parameter must be an array or an object that implements Countable in theme_table() (line 1878 of /home/lwvu15gt0rgr/public_html/Projects7/includes/theme.inc).
  • Warning: count(): Parameter must be an array or an object that implements Countable in theme_table() (line 1941 of /home/lwvu15gt0rgr/public_html/Projects7/includes/theme.inc).
  • Deprecated function: The each() function is deprecated. This message will be suppressed on further calls in menu_set_active_trail() (line 2385 of /home/lwvu15gt0rgr/public_html/Projects7/includes/menu.inc).

Showing code examples on your website

published by Acetolyne on Wed, 12/12/2012 - 17:04

This tutorial shows you how to print html or other source code exaples 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 doesnt display the coding rather it parses it and dispays 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 depriciated and doesnt 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 isnt 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

useing 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 Javascipt alternative to these methods so look for it on this site soon.

Theme by Danetsoft and Danang Probo Sayekti inspired by Maksimer