1. Download
SyntaxHighlighter 3.0.83: http://alexgorbatchev.com/SyntaxHighlighter
2. Configuration
(1) The default label for SyntaxHighlighter parsing is pre
The code copy is as follows:
SyntaxHighlighter.config.tagName="div";
(2) Remove HTML line break tags
If your software adds < br /> tags at the end of each line, this option allows you to ignore these tags.
The implementation code in shCore.js is:
The code copy is as follows:
if (sh.config.stripBrs == true)
str = str.replace(br, '');
SyntaxHighlighter.config.stripBrs=true;
(3) The toolbar is not displayed
The code copy is as follows:
SyntaxHighlighter.defaults['toolbar'] = false;
3. Use in the code
3.1 brush is a required option, and the rest are optional:
The code copy is as follows:
<div>some java code</div>
Brush value: java/xml/sql/c/js/css, etc., see: http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
3.2 Shading call:
The code copy is as follows:
SyntaxHighlighter.highlight();
or
The code copy is as follows:
SyntaxHighlighter.all();
The difference between all() and highlight() is that all() is registered in the onload() event.
4. Use in the blog park
Blog Park supports SyntaxHighlighter by default. The code changes the default value (because jQuery does not support setting the !important style, so cssText needs to be set):
The code copy is as follows:
var sh = $(".syntaxhighlighter");
var code = sh.find("code");
var line = sh.find(".line");
var caption = sh.find("table caption");
sh.css("cssText", "width: auto !important");
code.add(line)
.add(caption)
.css("cssText", "font-size: 20px !important;white-space: nowrap !important;line-height: 1.5em !important;");
The above is all about this article. Have you gained a new understanding of how to use SyntaxHighlighter? I hope you can like this article.