Note: This post won’t make sense here. Refer to the original post.
Here’s another online code syntax highlighter called google-code-prettify. The following are the test results.
In order to use this technology in your post, the following simple steps will do.
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"> </script>
Insert the following lines of code and replace the text inside the
<pre> tag with your code.
Note: Like SyntaxHighlighter and highlight.js, you need to encode
&, etc into HTML encoding using an HTML encoder. At the
bottom part of one of my older posts, I included a link to an
HTML encoder, and here’s a list of two more.
- Web 2.0 Generators: it contains a list of reserved characters and their entity names, as well as an HTML decoder.
- OpinionatedGeek: it contains an HTML decoder.
i.e. If you want to embed HTML code using an HTML encoder, you need to type the following unencoded code first.
1 2 3
Then you use a HTML encoder to generate the following output and paste
it inside the
<pre class="prettyprint lang-html"> <!-- your code here--> </pre>
Exercise: If you think that you understand the above text, try making
a web page that teaches users how to embed HTML code into a web
Hint: Right click and choose “View Page Source” in the pop up menu.
If your source code contains too many characters in a line, the right part of the code will go out of the box. Add the following CSS code to automatically fix the problem.
1 2 3
Then a scrollbar will be automatically attached to the source code container if the source code has too many columns and/or lines.
Suppose you see the following lines of code in message in response to
a question on Stack Overflow. However, it has no line
number, and you want to embed this piece of code into your web page
with line number. So I append
linenums to the
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
For further details, refer to the official README.