Simplest Highlight.js Example
#############################
#############################
* END RESULT: Highlighting of syntax like this http://10khoc.blogspot.com/2012/10/how-to-use-highlightjs-with-blogger.html or like this: http://softwaremaniacs.org/media/soft/highlight/test.html
* Sidenote this is the same engine that powers the syntax highlighter in hastebin (a pastebin server for your self) – link on how to setup hastebin right here:
This code will highlight all of your syntax. These are the minimum requirements.
Note you can have local copies of the stylesheets and the highlight.pack.js file (Sometimes its just called highlight.min.js file). You can download your own copy of it, also you can download it to have only certain languages or have all the languages its up to you: http://softwaremaniacs.org/soft/highlight/en/download/
ABOUT STYLE SHEET:
###################
The http://softwaremaniacs.org/media/soft/highlight/styles/tomorrow-night-bright.css Can be replaced with any other stylesheet. ITs basically the color scheme for the syntax highlighting
You can point to any stylesheet on the web or have a local copy – here is a repository of style sheets: https://github.com/isagalaev/highlight.js/tree/master/src/styles The github repository must be downloaded locally (the raw version doesnt work I tried., probably because they are ssl – https – version)
SOME STYLE SHEETS:
###################
ALSO: https://github.com/isagalaev/highlight.js/tree/master/src/styles The github repository must be downloaded locally (the raw version doesnt work I tried., probably because they are ssl – https – version)
ABOUT HIGHLIGHT.JS:
####################
The http://softwaremaniacs.org/media/soft/highlight/highlight.pack.js is the actual code that we point to and reference. The hljs.initHighlightingOnLoad(); part tell it too start highligting, without it you would just get the background colors and one foreground color (no syntax highlighting)
HOW TO PUT IN CODE
##################
FOR THE HEAD
————
In the <head> section between <head> and </head> put in the following code:
<link rel="stylesheet" href="HIGHLIGHT.JS STYLE SHEET"> <script src="HIGHLIGHT.JS LINK"></script>
Where HIGHLIGH.JS STYLE SHEET is either a local copy on the server that apache or your webserver can reach, or its a remote copy online. We use the remote copy online in this case.
FOR THE BODY – PUTTING IN THE CODE
————————————
Put the <pre><code>CODE GOES HERE</pre></code> in between the <body> </body> tags, make sure the code begins right after the <pre><code> or you will have an extra space.
<body> <pre><code>CODE GOES HERE</pre></code> </body>
MORE NOTES:
############
This part <!DOCTYPE html> is optional its for HTML5, this code will work without it
You can make it light weight by downloading the highlight.js (if you want a local copy of it) that doesnt include syntax highlighting for the programming languages that you will not use.
Here is an example also of a light weight one: “Another Example – different highlight.js file – LIGHT WEIGHT”
hljs.tabReplace = ‘ ‘; This part just replaces tabs with spaces and its an optional thing to include
BASIC SYNTAX:
#############
<head> <link rel="stylesheet" href="HIGHLIGHT.JS STYLE SHEET"> <script src="HIGHLIGHT.JS LINK"></script> <script> hljs.tabReplace = ' '; hljs.initHighlightingOnLoad(); </script> </head> <body> <h1>The WINNING code!:</h1> <p>Nothing fancy here</p> <pre><code>PUT CODE HERE</pre></code> </body> </html>
FULL SIMPLE EXAMPLES
#####################
Try the below script – “SCRIPT#1”, just copy paste it to an empty whatever.html file and open it.
THE SCRIPT – SCRIPT#1:
=======================
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://softwaremaniacs.org/media/soft/highlight/styles/tomorrow-night-bright.css">
<script src="http://softwaremaniacs.org/media/soft/highlight/highlight.pack.js"></script>
<script>
hljs.tabReplace = ' ';
hljs.initHighlightingOnLoad();
</script>
</head>
<body>
<h1>The WINNING code!:</h1>
<p>Nothing fancy here</p>
<pre><code>#include
int main() {
printf("Hello, world!\n");
}
</pre></code>
</body>
</html>
Another Example – different style sheet:
=========================================
<head>
<link rel="stylesheet" href="http://softwaremaniacs.org/media/soft/highlight/styles/far.css">
<script src="http://softwaremaniacs.org/media/soft/highlight/highlight.pack.js"></script>
<script>
hljs.tabReplace = ' ';
hljs.initHighlightingOnLoad();
</script>
</head>
<body>
<h1>The WINNING code!:</h1>
<p>Nothing fancy here</p>
<pre><code>#include
int main() {
printf("Hello, world!\n");
}
</pre></code>
</body>
</html>
Another Example – different highlight.js file – LIGHT WEIGHT
====================================================
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/default.min.css">
<script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
<script>
hljs.tabReplace = ' ';
hljs.initHighlightingOnLoad();
</script>
</head>
<body>
<h1>The WINNING code!:</h1>
<p>Nothing fancy here</p>
<pre><code>#include
int main() {
printf("Hello, world!\n");
}
</pre></code>
</body>
</html>