123 lines
3.8 KiB
Markdown
123 lines
3.8 KiB
Markdown
|
# Highlight.js
|
||
|
|
||
|
Highlight.js highlights syntax in code examples on blogs, forums and
|
||
|
in fact on any web pages. It's very easy to use because it works
|
||
|
automatically: finds blocks of code, detects a language, highlights it.
|
||
|
|
||
|
Autodetection can be fine tuned when it fails by itself (see "Heuristics").
|
||
|
|
||
|
|
||
|
## Installation and usage
|
||
|
|
||
|
Downloaded package includes file "highlight.pack.js" which is a full compressed
|
||
|
version of the library intended to use in production. All uncompressed source
|
||
|
files are also available, feel free to look into them!
|
||
|
|
||
|
The script is installed by linking to a single file and making a single
|
||
|
initialization call:
|
||
|
|
||
|
<script type="text/javascript" src="highlight.pack.js"></script>
|
||
|
<script type="text/javascript">
|
||
|
hljs.initHighlightingOnLoad();
|
||
|
</script>
|
||
|
|
||
|
Also you can replaces TAB ('\x09') characters used for indentation in your code
|
||
|
with some fixed number of spaces or with a `<span>` to set them special styling:
|
||
|
|
||
|
<script type="text/javascript">
|
||
|
hljs.tabReplace = ' '; // 4 spaces
|
||
|
// ... or
|
||
|
hljs.tabReplace = '<span class="indent">\t</span>';
|
||
|
|
||
|
hljs.initHighlightingOnLoad();
|
||
|
</script>
|
||
|
|
||
|
Then the script looks in your page for fragments `<pre><code>...</code></pre>`
|
||
|
that are used traditionally to mark up code examples. Their content is
|
||
|
marked up by logical pieces with defined class names.
|
||
|
|
||
|
|
||
|
### Custom initialization
|
||
|
|
||
|
If you use different markup for code blocks you can initialize them manually
|
||
|
with `highlightBlock(code, tabReplace)` function. It takes a DOM element
|
||
|
containing the code to highlight and optionally a string with which to replace
|
||
|
TAB characters.
|
||
|
|
||
|
Initialization using for example jQuery might look like this:
|
||
|
|
||
|
$(document).ready(function() {
|
||
|
$('pre code').each(function(i, e) {hljs.highlightBlock(e, ' ')});
|
||
|
});
|
||
|
|
||
|
If your code container relies on `<br>` tags instead of line breaks (i.e. if
|
||
|
it's not `<pre>`) pass `true` into third parameter of `highlightBlock`:
|
||
|
|
||
|
$('div.code').each(function(i, e) {hljs.highlightBlock(e, null, true)});
|
||
|
|
||
|
|
||
|
### Styling
|
||
|
|
||
|
Elements of code marked up with classes can be styled as desired:
|
||
|
|
||
|
.comment {
|
||
|
color: gray;
|
||
|
}
|
||
|
|
||
|
.keyword {
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
|
||
|
.python .string {
|
||
|
color: blue;
|
||
|
}
|
||
|
|
||
|
.html .atribute .value {
|
||
|
color: green;
|
||
|
}
|
||
|
|
||
|
Highligt.js comes with several style themes located in "styles" directory that
|
||
|
can be used directly or as a base for your own experiments.
|
||
|
|
||
|
For full reference list of classes see [classref.txt][cr].
|
||
|
|
||
|
[cr]: http://github.com/isagalaev/highlight.js/blob/master/classref.txt
|
||
|
|
||
|
|
||
|
## Export
|
||
|
|
||
|
File export.html contains a little program that shows and allows to copy and paste
|
||
|
an HTML code generated by the highlighter for any code snippet. This can be useful
|
||
|
in situations when one can't use the script itself on a site.
|
||
|
|
||
|
|
||
|
## Heuristics
|
||
|
|
||
|
Autodetection of a code's language is done with a simple heuristics:
|
||
|
the program tries to highlight a fragment with all available languages and
|
||
|
counts all syntactic structures that it finds along the way. The language
|
||
|
with greatest count wins.
|
||
|
|
||
|
This means that in short fragments the probability of an error is high
|
||
|
(and it really happens sometimes). In this cases you can set the fragment's
|
||
|
language explicitly by assigning a class to the `<code>` element:
|
||
|
|
||
|
<pre><code class="html">...</code></pre>
|
||
|
|
||
|
You can use class names recommended in HTML5: "language-html",
|
||
|
"language-php". Classes also can be assigned to the `<pre>` element.
|
||
|
|
||
|
To disable highlighting of a fragment altogether use "no-highlight" class:
|
||
|
|
||
|
<pre><code class="no-highlight">...</code></pre>
|
||
|
|
||
|
|
||
|
## Meta
|
||
|
|
||
|
- Version: 6.0
|
||
|
- URL: http://softwaremaniacs.org/soft/highlight/en/
|
||
|
- Author: Ivan Sagalaev (<Maniac@SoftwareManiacs.Org>)
|
||
|
|
||
|
For the license terms see LICENSE files.
|
||
|
For the list of contributors see AUTHORS.en.txt file.
|