Rinniee Ginsburg
If you are avid to implement syntax highlighting to your project. Then nothing to worry any more. In this significant tips post I am presenting a syntax highlighter grounded over JavaScript, which is very useful and obvious towards incorporating a functionality of syntax highlighting to any website project. Moreover, it can be also employed on a simple HTML page.
Step 1: Download the Source Code
First of all, your are required to download the source code towards this endeavor. Don’t worry, I am providing the link from where you can download easily without any hurdles.
Download Syntax highlighting code here.
Step 2: Incorporate the src Directory in your Project
Basically, I have renamed this directory to highlighter. So, you shouldn’t delete or modify anything at this point, until you do not forecast it by employing some language specific JavaScript files.
Step 3: Import the requisite files
Throughout your entire HTML file or the page which is authoritative for displaying the view. However, import both the prettify.js and theprettify.css files.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf—8"> <title>untitled</title> <link rel="stylesheet" href="highlighter/prettify.css" /> </head> <body> <script src="highlighter/prettify.js"></script> </body> </html>
It is the thing to be marked that how we have implanted our script prior to closing the body tag at the bottom of page. It has been always referred as one among the best step, as it enhance the performance too.
Now, we are supposed to perform something. The syntax highlighter will look either for a code or pre element which is accompanied by prettyprint class. So, let’s go ahead to add now.
<pre class="prettyprint">
(function()
{
var jsSyntaxHighlighting = 'rocks';
}
)
();
</pre>
Step 4: Calling the prettyPrint()Function
Almost we have done it, next we are about to perform the last action of executing the prettyPrint() function. However, you can put this snippet code at the bottom of page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<link rel="stylesheet" href="highlighter/prettify.css" />
</head>
<body>
<pre class="prettyprint">
(function() {
var jsSyntaxHighlighting = 'rocks';
})();
</pre>
<script src="highlighter/prettify.js"></script>
<script>prettyPrint();</script>
</body>
</html>
Now, you can see the page in your browser as the image listed below.
So, how affable it was! Now, eventually at bonus step, you would like to know regarding changing the theme of highlighter. Therefore, towards this context you are supposed to modify the stylesheet as it seems to be fit. Also, a bunch of stylesheets are also available in the theme gallery which are absolutely free to employ and are very easy and affable to implement. As for example, let’s assume Desert theme is to be employed.
So, you are required to put a little bit of efforts of copy the CSS snippet code and create a new stylesheet in the project you are working with. Next paste the CSS code into it. Then update the incorporated stylesheet underneath the document’s head section.
<head> <meta charset="utf—8"> <title>untitled</title> <link rel="stylesheet" href="highlighter/dessert.css" /> </head>
Comments
0 comments