Entering a Code Snippet in HTML

Dev Shed Forums Sponsor:

February 6th, 2012, 07:26 PM

Mike001

Registered User

Join Date: Feb 2012

Posts: 3

Time spent in forums: 46 m 54 sec
Reputation Power: 0

New Member - Entering a Code Snippet in HTML

I am setting up a web page that will show code examples when a button is selected.

I am not certain the best way to enter these examples in HTML. I have tried using the code element but when I view the page in the browser it treats the code examples as if they were HTML elements and they do not show.

What is the best way to enter code examples in an HTML document.

Thank you for any help.

Mike

February 6th, 2012, 10:25 PM

Catacaustic

Code Monkey V. 0.9

Dev Shed Intermediate (1500 - 1999 posts)

Join Date: Mar 2005

Location: A Land Down Under

Posts: 1,660

Time spent in forums: 2 Weeks 2 Days 2 m 8 sec
Reputation Power: 1642

That should be easy enough to do. All that it takes is making sure that you don't use any special HTML characters like < or > in your code samples. When you do need to use them, make sure that you change them all to their proper HTML equivalent.

Code:

"<" becomes "&lt;"
">" becomes "&gt;"
etc...

Last edited by Catacaustic : February 6th, 2012 at 10:28 PM.

February 7th, 2012, 12:48 PM

Mike001

Registered User

Join Date: Feb 2012

Posts: 3

Time spent in forums: 46 m 54 sec
Reputation Power: 0

Catacaustic

Thanks for the reply. I had already implemented character entities for the couple of pages that I tested on.

I was looking to see if there is a better and quicker way to enter the codes as I have hundreds of pages to setup with the code strings in them.

I may use popups with the code sheets entered as a png graphics file. This way I can keep the color coding, use the special characters and not have to enter all the input by hand. I am still debating how the best way is to enter these.

Thanks again for the reply.

Mike

February 7th, 2012, 02:32 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 29th Plane (19000 - 19499 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,134

Time spent in forums: 5 Months 1 Week 6 Days 2 h 38 m 32 sec
Reputation Power: 3755

Welcome to DevShed Forums, Mike001.

Quote:

Originally Posted by Mike001

I may use popups with the code sheets entered as a png graphics file. This way I can keep the color coding, use the special characters and not have to enter all the input by hand. I am still debating how the best way is to enter these.

So nobody can copy and paste the code? I'd recommend using a JavaScript script to add the color coding (aka syntax highlighting).

Quote:

Originally Posted by Mike001

I was looking to see if there is a better and quicker way to enter the codes as I have hundreds of pages to setup with the code strings in them.

I'd recommend that you use a script to automate the replacement of the special characters with character entities. Here's a script that I wrote for that purpose several years ago:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
form>div {
  float: left;
  text-align: center;
}
textarea {
  display: block;
}
</style>
<script type="text/javascript"><!--
function addRemoveMsg(msgId,parent,textToAdd) {
  if(!document.getElementById || !document.createElement) return;
  var el;
  if(!textToAdd && msgId && document.getElementById(msgId)) {
    el = document.getElementById(msgId);
    el.parentNode.removeChild(el);
  } else if(textToAdd && msgId && parent) {
    el = document.createElement('div');
    el.id = msgId;
    el.appendChild(document.createTextNode(textToAdd));
    parent.appendChild(el);
  }
}
window.onload = function() {
  document.form1.onsubmit = function() {
    var el=document.form1.ta1;
    var addCodeTags = document.form1.addCodeTags.checked;
    var doubleQuote = document.form1.doubleQuote.checked;
    
    if(el.parentNode) {
      window.tempEl = el.parentNode;
      setTimeout("addRemoveMsg('msgSpan1',tempEl,'running...')",1);
    }
    var str=el.value;
    str=str.replace(/>/g,'>');
    str=str.replace(/</g,'<');
    str=str.replace(/&/g,'&');
    if(doubleQuote) str=str.replace(/"/g,'"');
    str=str.replace(/&(([a-z]{2,16})|(\#x[a-z0-9]{2,5})|(\#[0-9]{2,5}));/ig,
      '&$1;');
    if(addCodeTags) {
      str=str.replace(/>/g,'></code>');
      str=str.replace(/</g,'<code><');
    }
    el.value=str;
    if(el.parentNode) {
      setTimeout("addRemoveMsg('msgSpan1')",500);
    }

    return false;
  }
}
// -->
</script>
</head>
<body>

<form name="form1" action="#"><div>
<textarea name="ta1" id="ta1" rows="20" cols="60"></textarea>
<label>Add <code><code></code> elements? <input type="checkbox" 
name="addCodeTags" value="yes"></label><br>
<label>Convert double-quote characters to <code>&quot;</code>? <input type="checkbox" 
name="doubleQuote" value="yes" checked="checked"></label><br>
<input type="submit" value="Submit">
<input type="reset" value="Clear the text">

</div></form>

</body>
</html>

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

February 7th, 2012, 08:05 PM

Mike001

Registered User

Join Date: Feb 2012

Posts: 3

Time spent in forums: 46 m 54 sec
Reputation Power: 0

Kravvitz

Now that is very cool. I had not thought about using JavaScript to parse through the entry.

I will try it in the morning and let you know how it worked.

Thanks for the great idea.

Mike