Code beautifying with Google Prettify
In this blog I am going to give a detailed description of How to use Google prettify in a webpage or in a blog post.
Setup
Include the script tag below in your document in a head tag:
<script src=
"https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js">
</script>
Look at the skin gallery and pick styles that suit you.
You can choose your choice of skins
some of them are as follows..
- default
- sons-of-obsidian
- doxy
- sunbrust
- desert
Example
<script src=
"https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?
lang=css&skin=desert"></script>
Usage
Put code snippets in <pre class="prettyprint">...</pre> or
<code class="prettyprint">...</code> and it will automatically be pretty-printed.
Example:
<pre class="prettyprint">
class Voila {
public:
// Voila
static const string VOILA = "Voila";
// will not interfere with embedded <a href="#voila2">tags</a>.
}
</pre>
For Line numbers add the following style in head
<style>
.prettyprint ol.linenums > li { list-style-type: decimal; }
</style>
Example code for linenumbers:
<pre class="prettyprint linenums">
foo
bar
bis
sed
awk
cat
</pre>
The following example starts line number from 3
<pre class="prettyprint linenums:3">
</pre>
File extensions supported by default include:
"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java",
"js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml",
"xsl".
Comments
Post a Comment