How do I insert code examples into an HTML file? [closed]
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
开发者_JS百科 Improve this questionI want to place an example of code without the tags being processed?
Xmp tag will work:
<xmp>
...code...
</xmp>
ETA: As of this writing this still works in all major browsers, but as others have pointed out it has officially been obsoleted in HTML5 [link]. Browsers could stop rendering it any day without warning or notice and it should be avoided for production sites. Still, there is no replacement that doesn't involve HTML encoding your string manually or using iframe trickery. It still has a place in my personal utility page tool-belt, but I would not consider it for a client.
The <pre> tag allows you to display text with whitespaces and line breaks as-is. Also, code must be entity-encoded:
For example, the code sample
<html>
<head><title></title></head>
<body></body>
</html>
will become
<pre><html>
<head><title></title></head>
<body></body>
</html></pre>
< encodes into < & encodes into &
PHP htmlentities does the job:
<pre><?php echo htmlentities($code) ?></pre>
<textarea> does the job too: it also allow the code to be copied.
To present code in HTML typically one would use the <code> tag.
Your question isn't very clear, and I don't know what you mean by "without the tags being processed". If you're saying that you want to present a fragment of HTML as code in an HTML page (for example), then you need to "escape" the HTML tags so that the web client doesn't attempt to parse them.
To do this, you should use the entity > for the greater-than angle bracket, and < for the less-than bracket.
Try:
<xmp></xmp>
or
<code></code>
for exemple:
<pre>
<xmp><!-- your html code --></xmp>
</pre>
<pre>
<code><!-- your html code --></code>
</pre>
bye
put it in a text area, its an html tag that will prevent all text inside him to be rendered
If you're using an XHTML <!DOCTYPE> declaration, then you could use CDATA sections:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>My Example</title>
</head>
<body>
<h1>Example!</h1>
<pre><code>
<![CDATA[
<div>
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
</div>
]]>
</code></pre>
</body>
</html>
Note that you'll want to use a .xhtml file extension and you'll want to consider serving these documents with a Content-Type: application/xhtml+xml header.
The only thing I can think of is just converting all your ‘<’ and ‘>’ to ‘<’ and ‘>’ respectively
Beyond putting your code in 'pre' tags and escaping th '<' and'>' you may want to look as syntax highlighting. A good library for this was written by Alex Gorbatchev.
http://alexgorbatchev.com/SyntaxHighlighter/
Run the HTML you wish to display though htmlspecialchars() to properly escape the code you wish to display if you're using PHP. Do NOT use htmlentities() because your browser will choke on extended characters. Just make sure your page's encoding is set correctly in the <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> if you are outputting UTF-8 for example.
Good luck.
You can use textarea with this way.
<textarea class="form-control" rows="25">
<form action=".. " method="post" id="postForm">
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="name" id="name" value="Customer Name" /></td>
</tr>
</table>
</form>
</textarea>
Note this use Bootstrap 3, if you want pure html remove textarea class and rows attribute.
Make it a comment.
<p>This will be rendered.</p>
<!-- from here on, this is a comment
<p>This won't be rendered.</p>
end of comment -->
<p>This will be rendered too.</p>
This works like a gem. I am trying to get the code on the HTML page. We need to use the combo as below. I have tested this as well.
<xpm>
<pre>
#include<stdio.h>
void fun(){
printf("%s","yooo");
}
fun();
</pre>
</xpm>
加载中,请稍侯......
精彩评论