Tech
Infected

Linux, OpenSource, Programming And Hacks

Dec 10, 2016

Syntax Highlighting with Google code-prettify and bootstrap

Dec 10, 2016

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>




No comments:

Post a Comment