How hard can it be to display HTML source code in a HTML document? Let's find out. The hard way. Here is some html source code to display in a HTML document.
<PRE><CODE> <!DOCTYPE html> <BODY> <P>Hello World<P> </BODY> </HTML> </CODE></PRE>
Didn't work. The browser sees the first HTML tag <!DOCTYPE html> and thinks it's starting a new document. Then it sees all the other tags and it's thinking "what happened to the closing </CODE> tag?" Here is what this code block looks like.
Hello World
Tidy is totally freaked out.
dave@mba:~/writing/codeblock> tidy -e index.html line 29 column 12 - Warning: discarding unexpected <!DOCTYPE> line 29 column 6 - Warning: missing </code> before <body> line 29 column 1 - Warning: missing </pre> before <body> line 31 column 4 - Warning: inserting implicit <code> line 30 column 1 - Warning: content occurs after end of body line 33 column 8 - Warning: discarding unexpected </code> line 30 column 1 - Warning: content occurs after end of body line 33 column 15 - Warning: discarding unexpected </pre> line 30 column 1 - Warning: content occurs after end of body line 30 column 1 - Warning: content occurs after end of body line 30 column 1 - Warning: content occurs after end of body line 30 column 1 - Warning: content occurs after end of body line 30 column 1 - Warning: content occurs after end of body line 30 column 1 - Warning: content occurs after end of body line 30 column 1 - Warning: content occurs after end of body line 30 column 1 - Warning: content occurs after end of body line 30 column 1 - Warning: content occurs after end of body line 30 column 1 - Warning: content occurs after end of body line 30 column 1 - Warning: content occurs after end of body line 30 column 1 - Warning: content occurs after end of body line 30 column 1 - Warning: content occurs after end of body line 118 column 1 - Warning: discarding unexpected </html> line 119 column 1 - Warning: inserting implicit <pre> line 119 column 1 - Warning: missing </pre> line 119 column 1 - Warning: trimming empty <pre> Info: Document content looks like HTML5 Tidy found 25 warnings and 0 errors! One or more empty elements were present in the source document but dropped on output. If these elements are necessary or you don't want this behavior, then consider setting the option "drop-empty-elements" to no.
The trick to displaying HTML source code inside a HTML document is replacing <, >, and & with HTML entities <, >, and &.
Here are some examples.
This is a <PRE> tag in a paragraph.
Here is the HTML source code <PRE>
This is a <PRE> tag with HTML entities <PRE> in a paragragh.
Here is the HTML source code &lt;PRE&gt;
The HTML source file needs all of the <, >, and & characters painstakingly replaced to display correctly. Make a copy of the file and use search and replace on these strings in order. Then cut and paste the modified source file into a <PRE><CODE> and </CODE></PRE> block in your HTML document.
Here is a bash function that will make the replacements. This article does not cover displaying bash code in HTML. I had to !@#$% hand edit this bash function to display correctly.
#!/bin/bash
htmlescape(){
if [ $# -eq 0 ]; then
echo "Usage: htmlescape filename > newfile"
else
sed 's/\<\;/\<\;/g' "$1" | \
sed 's/\>\;/\>\;/g' | \
sed 's/\&\;/\&\;amp\;/g' | \
sed 's/\</\<\;/g' | \
sed 's/\>/\>\;/g'
fi
}
Here is the HTML source code for this web page.
<!DOCTYPE html>
<head>
<title>Displaying HTML Source Code in HTML</title>
<meta name="author" content="dave@worldsworstwriter.org">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
<h1>Displaying HTML Source Code in HTML</h1>
<p>
How hard can it be to display HTML source code in a HTML document?
This must be why the WC3 invented the &lt;CODE&gt; tag. Well let's find out. The hard way. Here is some html source code to display.
</p>
<pre>
&lt;PRE&gt;&lt;CODE&gt;
&lt;!DOCTYPE html&gt;
&lt;BODY&gt;
&lt;P&gt;Hello World&lt;P&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;
&lt;/CODE&gt;&lt;/PRE&gt;
</pre>
<p>
Didn't work. The browser sees the first HTML tag &lt;!DOCTYPE html&gt; and thinks it's starting a new document. Then it sees all the other tags and it's thinking what happened to the closing &lt;/CODE&gt; tag? Here is what this code block looks like.
</p>
<pre>
Hello World
</pre>
<!--<PRE><CODE><!DOCTYPE html>-->
<!--<BODY>-->
<!--<P>Hello World</P>-->
<!--</BODY>-->
<!--</HTML></CODE></PRE>-->
<p>
Tidy is totally freaked out.
</p>
<pre>
dave@mba:~/writing/codeblock&gt; tidy -e index.html
line 29 column 12 - Warning: discarding unexpected &lt;!DOCTYPE&gt;
line 29 column 6 - Warning: missing &lt;/code&gt; before &lt;body&gt;
line 29 column 1 - Warning: missing &lt;/pre&gt; before &lt;body&gt;
line 31 column 4 - Warning: inserting implicit &lt;code&gt;
line 30 column 1 - Warning: content occurs after end of body
line 33 column 8 - Warning: discarding unexpected &lt;/code&gt;
line 30 column 1 - Warning: content occurs after end of body
line 33 column 15 - Warning: discarding unexpected &lt;/pre&gt;
line 30 column 1 - Warning: content occurs after end of body
line 30 column 1 - Warning: content occurs after end of body
line 30 column 1 - Warning: content occurs after end of body
line 30 column 1 - Warning: content occurs after end of body
line 30 column 1 - Warning: content occurs after end of body
line 30 column 1 - Warning: content occurs after end of body
line 30 column 1 - Warning: content occurs after end of body
line 30 column 1 - Warning: content occurs after end of body
line 30 column 1 - Warning: content occurs after end of body
line 30 column 1 - Warning: content occurs after end of body
line 30 column 1 - Warning: content occurs after end of body
line 30 column 1 - Warning: content occurs after end of body
line 30 column 1 - Warning: content occurs after end of body
line 118 column 1 - Warning: discarding unexpected &lt;/html&gt;
line 119 column 1 - Warning: inserting implicit &lt;pre&gt;
line 119 column 1 - Warning: missing &lt;/pre&gt;
line 119 column 1 - Warning: trimming empty &lt;pre&gt;
Info: Document content looks like HTML5
Tidy found 25 warnings and 0 errors!
One or more empty elements were present in the source document but
dropped on output. If these elements are necessary or you don't want
this behavior, then consider setting the option "drop-empty-elements"
to no.</pre>
<h3>Plan B</h3>
<p>
The trick to displaying HTML source code inside a HTML document is
replacing <b>&lt;</b>, <b>&gt;</b>, and <b>&</b> with HTML entities <b>&lt;</b>, <b>&gt;</b>, and <b>&amp;</b>.
</p>
<p>Here are some examples.</p>
<p>
Here is a &lt;PRE&gt; tag in a paragraph.
</p>
<pre>
Here is the HTML source code &lt;PRE&gt;
</pre>
<p>
Here are the HTML entities &lt;PRE&gt; in a paragragh.
</p>
<pre>
Here is the HTML source code &amp;lt;PRE&amp;gt;
</pre>
<h3>Escaping the HTML Tags</h3>
<p>
The HTML source file will need all of the &lt;, &gt;, and & characters painstakingly replaced for display.
Make a copy of the file and use search and replace on these strings in order. Then cut and paste the modified source file in a &lt;PRE&gt;&lt;CODE&gt; and &lt;/CODE&gt;&lt;/PRE&gt; block in your HTML document.
</p>
<ol>
<li>Search and replace &lt; with &amp;lt;</li>
<li>Search and replace &gt; with &amp;gt;</li>
<li>Search and replace &amp; with &amp;amp;</li>
<li>Search and replace < with &lt;</li>
<li>Search and replace > with &gt;</li>
</ol>
<p>
Here is a bash function that will make the replacements. This article does not cover displaying bash code in HTML. I had to !@#$% hand edit this bash function to display correctly.
</p>
<pre contenteditable>
#!/bin/bash
htmlescape(){
if [ $# -eq 0 ]; then
echo "Usage: htmlescape filename &gt; newfile"
else
sed 's/\&lt\;/\&lt\;/g' "$1" | \
sed 's/\&gt\;/\&gt\;/g' | \
sed 's/\&amp\;/\&amp\;amp\;/g' | \
sed 's/\&lt;/\&lt\;/g' | \
sed 's/\&gt;/\&gt\;/g'
fi
}
</pre>
</figure>
<p>Here is the HTML source code for this web page.</p>
<pre contenteditable><code>
</code></pre>
</body>
</html>
dave@worldsworstwriter.org 2024-10-25