CODEWITHSUNDEEP
html
Steven
Steven

Reputation: 25314

How to display code in plain text?

I want to display bare code on an HTML page, I tried this:

<script>
function getSize() {
    var myFSO = new ActiveXObject("Scripting.FileSystemObject");
    var filepath = document.upload.file.value;
    var thefile = myFSO.getFile(filepath);
    var size = thefile.size;
    alert(size + " bytes");
}
</script>

The above JavaScript code is some code entered by the user. I can't figure out to show this bare code on the html page without being interpreted and screwed up by the browser.

How do I display bare code on an HTML page?

Upvotes: 2

Views: 6516

Answers (5)

Eric Leschinski
Eric Leschinski

Reputation: 154103

Dump it into a textarea and render it like a div tag

This is a bit of a hack and parlor trick, but it works.

Get bare code rendered onto an HTML page is to place it in a text area and remove all the formatting around the textarea so it looks like a <div> tag:

Code:<br>
<textarea style="border: none;width:400;height:200;background-color:lightgrey;">
#include<iostream>
using namespace std;
class Box{
  public:
    int mymethod(){ cout << "is method"; }
};
int myfunction(){ cout << "is function"; }
int main(){
  Box b;
  b.mymethod();
  myfunction();
}
</textarea>
<br>
Output:
<pre>is methodis function
</pre>

The above html code should render like this on the page:

enter image description here

What I've done is invalid HTML, it only works because customary error handling happens to handle it this way. You shouldn't put unescaped angle brackets in the content of a <textarea>. You get undefined behavior depending on how the browser chooses to interpret your textarea tag.

Upvotes: 0

StevenWang
StevenWang

Reputation: 3836

The most reliable method is to htmlencode the code to be displayed on the page.

For example

< into &lt

space into &nbsp

etc.

Upvotes: -1

krish512
krish512

Reputation: 31

Use the <code></code> tag, and use javascript or your sever-side scripting language

Upvotes: 1

mensch
mensch

Reputation: 4411

You can use the <pre> and <code> tags to display formatted code. But to prevent the code from executing and not displaying you'll need to convert the text to character entities. > becomes &gt;, < becomes &lt, etc.

You could do this by using PHP, for example:

<?php echo htmlentities('function getSize() {  var myFSO = new
ActiveXObject("Scripting.FileSystemObject");
  var filepath =
document.upload.file.value;   var
thefile = myFSO.getFile(filepath);
  var size = thefile.size;  alert(size
+ " bytes"); }'); ?>

As your system relies on user input, you might have to rely on AJAX to actually process the user input and convert it to HTML entities.

Upvotes: 1

Elle H
Elle H

Reputation: 12237

I'm not quite clear on the specifics of the issue, as pre tags should, in general, do the trick, but here's an alternative tag:

<xmp>[Code can be displayed here]</xmp>

If you're using a server-side language, though, I'd suggest converting to HTML entities before outputting, then using CSS to style it.

As well, be sure if you're accepting user input that any JavaScript is being filtered and never executed.

Upvotes: 1

Related Questions