I generally rename this folder to highlighter. Don’t delete anything within here, unless you don’t anticipate using some of the language specific JavaScript files.

Step 3 — Import the Necessary Files

Within your HTML file (or whichever page is responsible for displaying your view), import both the prettify.css and prettify.js files.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf—8″>
<title>untitled</title>
<link rel=”stylesheet” href=”highlighter/prettify.css” />
</head>
<body>

11.<script src=”highlighter/prettify.js”></script>

13.</body>

14.</html>

Notice how we’ve placed our script at the bottom of the page, just before the closing body tag. This is always a smart move, as it improves performance.

Next, we need something to work with! The syntax highlighter will search for either a pre or code element that has a class of prettyprint. Let’s add that now.

<pre class=”prettyprint”>
(function() {
var jsSyntaxHighlighting = ‘rocks’;
})();
</pre>

Step 4 — Calling the prettyPrint() Function

The last step is to execute the prettyPrint() function. We can place this bit of code at the bottom of the page as well.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>untitled</title>
<link rel=”stylesheet” href=”highlighter/prettify.css” />
</head>
<body>

11.<pre>

12.(function() {

var jsSyntaxHighlighting = ‘rocks’;

14.})();

15.</pre>

16.<script src=”highlighter/prettify.js”></script>

17.<script>prettyPrint();</script>

18.</body>

19.</html>

If we now view the page in the browser…

To get more updates like the page Bugtreat Technologies and all a happy weekend

Add Download Highlighting How to Add Project Syntax