Home > Web Front-end > JS Tutorial > SyntaxHighlighter 3.0.83 usage notes_javascript skills

SyntaxHighlighter 3.0.83 usage notes_javascript skills

WBOY
Release: 2016-05-16 16:18:07
Original
1303 people have browsed it

1. Download

SyntaxHighlighter 3.0.83: http://alexgorbatchev.com/SyntaxHighlighter

2. Configuration

(1) The default tag parsed by SyntaxHighlighter, the default is pre

Copy code The code 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 those tags.
The implementation code in shCore.js is:

Copy code The code is as follows:

If (sh.config.stripBrs == true)
              str = str.replace(br, '');
SyntaxHighlighter.config.stripBrs=true;

(3) Do not display the toolbar

Copy code The code is as follows:

SyntaxHighlighter.defaults['toolbar'] = false;

3. Use

in the code

3.1 brush is required, the rest are optional:

Copy code The code is as follows:

some java code

Brush value: java/xml/sql/c/js/css, etc. For details, see: http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

3.2 Shading call:

Copy code The code is as follows:

SyntaxHighlighter.highlight();

or

Copy code The code 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 garden

Blog Park supports SyntaxHighlighter by default. Code to modify the default value (because jQuery does not support setting the !important style, you need to set the cssText):

Copy code The code 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 the entire content of this article. Do you have a new understanding of how to use SyntaxHighlighter? I hope you will like this article.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template