If you're interested in sharing a glimpse of your code on your website, there are a couple of ways to do it. The tricky part is, you need to represent the tags in a way that a web browser wouldn't recognize as actual HTML (or CSS or XML etc) tags. You need to use escape characters to represent the angle brackets, and these always begin with a & character. Because the & is specially used for escape characters in markup languages we have to use an escape sequence if we want to use it in an actual HTML or XML document, too. Here are the escape characters:
&: stands for &
< stands for <
> stands for >
Now, how to use these to represent code on your website? I do this a lot in writing coding tutorials on my newtfire.org website, like this tutorial for HTML.
Here are two ways: inline with the <code> elements, and block with the <pre> element:
One way is inline so that you're just mentioning a short snip of code as you're discussing something. For this, use the <code> element, and wrap it around the special escape characters to make tags like this:
<p>Here is a representation of the <code><h1></code> element.
Here's an example of a longer passage using inline <code> elements, first a screen capture and then the code. I wrote CSS to make the <code> elements come out in red text to accent them.
<h4>Headings</h4>
<p>Heading elements are for title and section headings throughout your page. HTML defines six
levels of headings, with the idea that the first level is usually the largest and
strongest, and others get smaller and smaller. The heading tags are: <code><h1></code>, <code><h2></code>, <code><h3></code>, <code><h4></code>, <code><h5></code>, and <code><h6></code>. The idea is to use these
in order, so that you typically only use <code><h1></code> once to give
the title of the whole page, and then use <code><h2></code> for major
sections and <code><h3></code> for subsections (etc.) Have a look at <a
href="http://www.w3schools.com/html/tryit.asp?filename=tryhtml_headings">this visual
example from w3schools</a> to see how these six elements typically display in a browser. </p>
The other way is to use the <pre> element (for preformatted text). <pre> is great for longer blocks of code where you want to preserve the line breaks and formatting from your code file. Here's an example for sharing a block of HTML code. Again, here's a screen shot of webpage first, followed by a code block: Again we need to use those escape sequences to represent the tags:
Here's one more example of <pre> to show a CSS code block. My code is more complicated here because I wanted to highlight portions of the code in color. For that I used <span> elements where I wanted to put different colors. Screen shot first, followed by sample code:
Now, this wouldn't work for color by itself: My CSS file has these lines to choose the actual hexadecimal color codes for the @class attributes in the above block, and I added a font-weight property to bold them, too. Here's my CSS:
What if you don't want to take forever to hand-type the escape characters for angle-brackets when you want to quote a block of HTML or XML code? In the oXygen Editor, there's a Find & Replace you can use, and it works nicely if you highlight just the portion of your code you want to change (say, a block of code you pasted inside a <pre>....</pre> element.
Highlight that text, and turn in the search for < , and set replace for <.
If you're interested in sharing a glimpse of your code on your website, there are a couple of ways to do it. The tricky part is, you need to represent the tags in a way that a web browser wouldn't recognize as actual HTML (or CSS or XML etc) tags. You need to use escape characters to represent the angle brackets, and these always begin with a
&character. Because the&is specially used for escape characters in markup languages we have to use an escape sequence if we want to use it in an actual HTML or XML document, too. Here are the escape characters:&: stands for&<stands for<>stands for>Now, how to use these to represent code on your website? I do this a lot in writing coding tutorials on my newtfire.org website, like this tutorial for HTML. Here are two ways: inline with the
<code>elements, and block with the<pre>element:<code>element, and wrap it around the special escape characters to make tags like this:Here's an example of a longer passage using inline
<code>elements, first a screen capture and then the code. I wrote CSS to make the<code>elements come out in red text to accent them.<pre>element (for preformatted text).<pre>is great for longer blocks of code where you want to preserve the line breaks and formatting from your code file. Here's an example for sharing a block of HTML code. Again, here's a screen shot of webpage first, followed by a code block: Again we need to use those escape sequences to represent the tags:<pre>to show a CSS code block. My code is more complicated here because I wanted to highlight portions of the code in color. For that I used<span>elements where I wanted to put different colors. Screen shot first, followed by sample code:Now, this wouldn't work for color by itself: My CSS file has these lines to choose the actual hexadecimal color codes for the
@classattributes in the above block, and I added a font-weight property to bold them, too. Here's my CSS:<pre>....</pre>element.<, and set replace for<.>and set replace for>