I want to be able to make code show up on my website so that it shows up with the code on the webpage instead of using it as code in the HTML file itself.
Example:
<!DOCTYPE html>
<html>
<body>
<p>Hello World</p>
</body>
</html>
Instead of:
Hello World
I know I explained that horribly but I'm sure you can see where I'm coming from. Can you escape in HTML? Or is there a tag that allows for HTML code to be viewed as text on a webpage?
xmp tag
<!DOCTYPE html>
<html>
<body>
<xmp><p>Hello World</p></xmp>
</body>
</html>
keep in mind that xmp tag is considered obsolete, as far as I know it is still supported by most browser but your mileage may vary.
you are safer if you use <pre> and escape html code with < and > like this
<!DOCTYPE html>
<html>
<body>
<pre><p>Hello World</p></pre>
</body>
</html>
There is similar question answered on this link: Display HTML code in HTML
In addition, have a look at the following websites
https://craig.is/making/rainbows
https://highlightjs.org/
You can use the xmp property. Anything inside the xmp that is exempted by the browser while rendering the HTML code.
Example :
<xmp><h1>Heading</h1></xmp>
Related
Is it possible wrap an HTML document within another, all within the same file? Such as:
<!DOCTYPE html>
<html>
<body>
...
<!DOCTYPE html>
<html>
<body>...</body>
</html>
...
</html>
Why would I want to do that, you ask? (I don't :-) ) The phpinfo() function in PHP generates a full HTML document (to be used as a single call, on its own). I created an HTML document around it. Most browsers display this as I expected, but it is invalid HTML.
<!DOCTYPE html>
<html>
<body>
<h1>PHP Info</H1>
<?php phpinfo(); ?>
</body>
</html>
I can solve this with PHP, but I was for an HTML-only solution; something like:
...
<xframe>
<!DOCTYPE html>
<html>
<body>...</body>
</html>
</xframe>
...
I.e., something like <iframe> without the external reference.
Not as such.
The closest you could come would be to use an iframe with the src expressed as a data: scheme URL (which encodes the entire HTML document inside the URL itself) … but that would require phpinfo() to return a string of HTML instead of just outputting it.
This question already has answers here:
How to display raw HTML code on an HTML page
(30 answers)
Closed 2 years ago.
My website is a simple educational one. I want to display HTML code in my web page in a formatted way like they look in a editor. I mean to say the HTML tags should appear in a different color from remaining text etc. This is a code snippet from another website. I want the output of my web page like this:
This is my code :-
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
<div class="code">
<xmp>
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
This is a simple HTML page
</body>
</html>
</xmp>
</div>
</body>
</html>
How can I achieve desired behavior in my web page. I thank you all for your efforts.
The most vanilla way to do this and have HTML show up as actual content on your webpage is by wrapping you HTML markup you want to display inside of ' <pre> ' tags.
Then you would need to use HTML entities to show the special characters you need, an open bracket is
<
and a closing bracket is
>
You can also use a plug-in to help aid in making your code look nice, like for syntax highlighting and more. A pretty nice javascript plug-in can be found here http://prismjs.com/
Use appropriate HTML markup. Don't use <xmp>, which isn't in HTML.
Use <pre> to indicate that white space is significant
Use entities for characters with special meaning in HTML (e.g. <)
Use <code> to mark up code (e.g. <code class="html tag start-tag"><title></code>).
Apply CSS for the colours you want. The <code> elements give you something to target.
If you're using Prism as suggested by #JustSomeDude, you might want to use the Unescaped Markup plug-in so that you do not need to use the special characters like < to display your HTML tags.
Can anyone tell me why special here?
<html>
<head>
<script src="editor.js"></script>
</head>
<body>
<div id="scripts" class="scripts">
Editor.Execute('<html>Html String</html>');
Editor.Execute('<something>Html String</something>');
</div>
</body>
</html>
document.getElementById("scripts").innerHTML shows something however html dissapears.
Execute('Html String');
Execute('<something>Html String</something>');
It behaves the same way in Firefox and Chrome.
You're running into this issue.
Basically, the browser sanitizes out the HTML tags before your JavaScript can even access the page – you can check in the Chrome elements inspector, your <html> tag is not there.
I guess the answer depends on what exactly you're trying to do, but if you're just trying to output that code onto a web page, you can just escape the characters:
<html>
<body>
<div id="scripts" class="scripts">
Execute('<html>Html String</html>');
Execute('<something>Html String</something>');
</div>
</body>
</html>
Then document.getElementById('scripts').innerHTML will output:
Execute('<html>Html String</html>');
Execute('<something>Html String</something>');
And then you can replace the HTML entities in JavaScript.
Without knowing what you do in that Execute() it is hard to say what is going on there.
Just in case: HTML document can have one and only one <html> node.
I'm creating a website to help me learn web development. I want to be able to put html on my website, as if it were just text in a paragraph tag. I think that the browser thinks that the html is part of the DOM, because it never renders on the page the way I want. This is the simple code I have been using...
<pre>
<code>
"<!DOCTYPE html>
<html>
<!--All html goes here-->
</html>
"
</code>
</pre>
Am I doing something wrong? How can I create a box of code on the page without the browser thinking it's part of the DOM?
Thanks in advance!
Use the proper entities:
<pre>
<!DOCTYPE html>
<html>
<!--All html goes here-->
</html>
</pre>
There isn't a way to write plain HTML and have it displayed the way you want, using only HTML. The answers to this question may provide further help.
im currently makeing some form
you can see at http://jsfiddle.net/AnMSa/
it is working fine
but when i run it on my localhost.. it turns like
ive countered this bug till yesterday, and now its time to me to look for help.
heres the html if anybody wants to download it http://www.mediafire.com/?vzi7kjgcdzldh48
please tell me everything that can reproduce this kinda bug.
The html file isn't valid html. it doesn't include the html or body tags or the doctype.
It works fine if you add your content in the following:
<!doctype html>
<html>
<body>
<!-- add content here -->
</body>
</html>
Or you can use the html5 boilerplate code from http://html5boilerplate.com/
You have to determinate your Doctype.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<!--- content -->
</body>
</html>
Do it and it will be fixed. You see it ok onjsfiddle because they have already defined the Doctype.