Code view

Posted on 2013-06-04
Medium Priority
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:-

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):-

Open in new window

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

How does everyone else do it?
Question by:tonelm54
LVL 35

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.

Author Comment

ID: 39220240
As a textarea or iframe?
LVL 23

Accepted Solution

tailoreddigital earned 2000 total points
ID: 39220243
LVL 35

Expert Comment

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

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.

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

627 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