Syntax Highlighter Demo:
Using Google Code Prettify with Bootstrap 3.x
/*--- CSS Sample ---*/
body {
text-align: left;
padding: 0;
margin: 0;
background-color: #FFF;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 14px;
border-top: 5px solid #333;
}
a:link, a:visited {
color: #0088CC;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #005588;
}
<!-- HTML Sample --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sykot.com</title> </head> <body> <h1>Hello There!</h1> </body> </html>
<!-- PHP Sample -->
<?php
query_posts( "cat=19&posts_per_page=5" );
while (have_posts()) : the_post();
?>
<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
<?php the_excerpt() ?>
<?php endwhile; ?>
Pretty awesome right? Let’s learn how to use it!
How to Use
Step 1: Include JS & CSS Files
Include prettify.js & prettify.css in your template.
Step 2: Enable Prettify Using jQuery
Add the script right after prettify.js
<script type="text/javascript">
!function ($) {
$(function(){
window.prettyPrint && prettyPrint()
})
}(window.jQuery)
</script>
Step 3: Encode HTML
You need to HTML-encode your source code for displaying properly. You can use this Online Web Encoding Utility for HTML-encoding.
Step 4: Display
Paste your code inside <pre class="prettyprint"></pre> like this:
<pre class="prettyprint"> <!-- Your code here --> </pre>
If you want to print line number then add linenums class in <pre class="prettyprint linenums"></pre>, it will print line number shown below:
<pre class="prettyprint linenums"> <!-- Your code here --> </pre>
For inline codes, use <code></code>