Solved

Code view

Posted on 2013-06-04
5
192 Views
Last Modified: 2013-06-27
I'm trying to figure a way of showing CSS / HTML and javascript code in a page,  I've managed to get the html code to show how I want but want to put it in a scrolling windows.

I thought I could try and use an iFrame, but its a bit of a mess making another page to pull the html in, eg:-
<iframe src="mycode.php"></iframe> 

Open in new window


What I would have preferred to use is:-
<iframe><strong>Hello</strong><I>Test</I></iframe> 

Open in new window


However it doesn't show the html inside.

I read an article that used a textArea to put html code inside, but using the code just puts the raw html in (without highlighting):-
<textarea><strong>Hello</strong><I>Test</I></textarea>

Open in new window


Experts-exchange seem to be able to do it (without highlighting).

How does everyone else do it?
0
Comment
Question by:tonelm54
5 Comments
 
LVL 34

Expert Comment

by:Paul MacDonald
ID: 39220234
Replace the open and close brackets with &gt; and &lt;.  This will allow you to display the markup but not cause the browser to interpret it as HTML.
0
 

Author Comment

by:tonelm54
ID: 39220240
As a textarea or iframe?
0
 
LVL 23

Accepted Solution

by:
tailoreddigital earned 500 total points
ID: 39220243
0
 
LVL 34

Expert Comment

by:Paul MacDonald
ID: 39220274
I'm sorry, I misunderstood the question.  [tailoreddigital]'s <code> tag may be the way to go.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39220304
You can also just convert non alpha numeric's to entities http://www.webmaster-toolkit.com/html-entity-chart.shtml

Then place all of that in a div with a height class set to overflow scroll.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question