Syntax Highlighting with Google code-prettify and bootstrap

Google Code Prettify automatically detects your source code and highlights it accordingly. It’s quite simple to setup.

1. Put the below style links in your head section.

<link href='http://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.css' rel='stylesheet' type='text/css'/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

2. Now, place this script link before the closing body tag </body>

<script src='http://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.js'></script>

3. finally you can put your code in a pre tag with prettyprint class. your code block will be styled as per bootstrap pre class and syntax will be highlighted automatically with code-prettify.

<pre class="prettyprint">

x = input("Please Enter a number to reverse: ")
reverse = 0

while(x):
    reverse = reverse * 10
    reverse = reverse + x % 10
    x = x/10

print(reverse)
</pre>

Here is a full working example with everything done as said in above steps.

<!DOCTYPE html>

<html>

<head>

 <title>Code Prettify Example</title>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link href='http://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.css' rel='stylesheet' type='text/css'/>

</head>

<body>


<div class="container">

<pre class="prettyprint">

x = input("Please Enter a number to reverse: ")
reverse = 0

while(x):
    reverse = reverse * 10
    reverse = reverse + x % 10
    x = x/10

print(reverse)

 </pre>

</div>


<script src='http://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.js'></script>


</body>

</html>

Leave a Reply Cancel reply