Solved

Code view

Posted on 2013-06-04
5
189 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

Migrating Your Company's PCs

To keep pace with competitors, businesses must keep employees productive, and that means providing them with the latest technology. This document provides the tips and tricks you need to help you migrate an outdated PC fleet to new desktops, laptops, and tablets.

Question has a verified solution.

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

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
This article discusses how to create an extensible mechanism for linked drop downs.
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 …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

772 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