SyntaxHighlighter 3.0.83

lich
 lich
发布于 2010年07月25日
收藏 2

SyntaxHighlighter 3.0 has quite a few new tricks up its sleeve. There are a number of new features that are worth mentioning here.

Copy To Clipboard

Since the first version back in 2004, SyntaxHighlighter has always used Flash to provide copy to clipboard functionality. At first it was Flash 8, then it was Flash 9 and now 10. It's never been a crowd pleaser and a lot of requests over the years demanded Flash to be removed.

Well, it's finally happening -- no more Flash. I think I've came up with user interface to copy code to clipboard which is a lot more intuitive and almost too easy.

If you double click anywhere on the code, the entire code view is replaces with a pre-selected view from which users can copy with a simple Ctrl/Cmd-C. Clicking anywhere else returns the view to the original state.

Give it a try!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
toolbar: {
    /**
     * Generates HTML markup for the toolbar.
     * @param {Highlighter} highlighter Highlighter instance.
     * @return {String} Returns HTML markup.
     */
    getHtml: function(highlighter)
    {
        var html = '<div class="toolbar">',
            items = sh.toolbar.items,
            list = items.list
            ;
     
        function defaultGetHtml(highlighter, name)
        {
            return sh.toolbar.getButtonHtml(highlighter, name, sh.config.strings[name]);
        };
     
        for (var i = 0; i < list.length; i++)
            html += (items[list[i]].getHtml || defaultGetHtml)(highlighter, list[i]);
     
        html += '</div>';
     
        return html;
    },
...

Wasn't that easy? Keep going!

Code Selection

Another popular request has been ability to select the code without line numbers. This is also now part of the SyntaxHighlighter as it allows you to select the code with your mouse and then copy and paste it without straight into your code without any additional effort.

Block Title

You can now add titles to your code blocks by simply adding a title attribute to your <pre /> or <script /> SyntaxHighlighter tags.

Like so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="syntaxhighlighter" class="brush: js" title="This is a title, check it out!">
    $.ajax({
        url: path,
        type: 'GET',
        dataType: 'text',
        success: function(code)
        {
            var ext = path.match(/\w+$/)[0],
                name = brushes[ext],
                brush = new SyntaxHighlighter.brushes[name]()
                ;
            brush.init({ toolbar: false });
            $this.append(brush.getHtml(code));
        }
    });
</script>

Will render like so:

This is a title, check it out!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$.ajax({
    url: path,
    type: 'GET',
    dataType: 'text',
    success: function(code)
    {
        var ext = path.match(/\w+$/)[0],
            name = brushes[ext],
            brush = new SyntaxHighlighter.brushes[name]()
            ;
        brush.init({ toolbar: false });
        $this.append(brush.getHtml(code));
    }
});

It also works especially well if you want to collapse your examples:

CommonJS

Version 3.0 is fully CommonJS compatible.

A lot of people have tried using SyntaxHighlighter with AJAX and other "non-standard" ways that I have never originally imagined it being used in. With 3.0 release, SyntaxHighlighter can just render HTML code for you completely separately from the DOM, which means that not only it plays well with AJAX, you can use it on the server side with node.js, RingoJS, Jaxer or any other JavaScript platform.

For example, have a look at the node.js file in the demo folder. This file is meant to be executed with node.js and it looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
require.paths.unshift(__dirname + '/../scripts');
 
var sys = require('sys'),
    shSyntaxHighlighter = require('shCore').SyntaxHighlighter,
    shJScript = require('shBrushJScript').Brush,
 
    code = '\
        function helloWorld()\
        {\
            // this is great!\
            for(var i = 0; i <= 1; i++)\
                alert("yay");\
        }\
        ',
    brush = new shJScript()
    ;
 
brush.init({ toolbar: false });
sys.puts(brush.getHtml(code));

Which produces HTML output into the console.

shCore.js, XRegExp.js and all shBrush...js were updated to do proper CommonJS export and dependency requirement with just a few lines of code which doesn't affect execution in the browser. Included in the tests folder there is a file called commonjs_tests.js which when ran with node.js will test every bundled brush.

Improved CSS support

All CSS source files have been ported to the new SASS 3.0, which allows one to create new themes with ease (providing they have Ruby installed). Of course, if you wish you can still operate with "old school" CSS.

What does this mean? Well, for one, a theme in its source code now looks more like a configuration file rather than a convoluted set of CSS. For example, have a look at Django theme source:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// Django SyntaxHighlighter theme
 
$background:                    #0a2b1d !default;
 
$line_highlighted_background:   #233729 !default;
$line_highlighted_number:       white !default;
 
$gutter_text:                   #497958 !default;
$gutter_border_color:           #41a83e !default;
 
$toolbar_collapsed_a:           #96dd3b !default;
$toolbar_collapsed_a_hover:     #fff !default;
$toolbar_collapsed_background#000 !default;
 
$toolbar_a:                     #fff !default;
$toolbar_a_hover:               #ffe862 !default;
 
$code_plain:                    #f8f8f8 !default;
$code_comments:                 #336442 !default;
$code_string:                   #9df39f !default;
$code_keyword:                  #96dd3b !default;
$code_preprocessor:             #91bb9e !default;
$code_variable:                 #ffaa3e !default;
$code_value:                    #f7e741 !default;
$code_functions:                #ffaa3e !default;
$code_constants:                #e0e8ff !default;
$code_color1:                   #eb939a !default;
$code_color2:                   #91bb9e !default;
$code_color3:                   #edef7d !default;
 
@import "_theme_template.scss";
 
.syntaxhighlighter {
    .comments { font-style: italic !important; }
    .keyword { font-weight: bold !important; }
}

Further more, having file imports lets me very easily create files like shCoreDjango.css which merges main CSS and theme declaration into single file to speed up the page loading. This is done through the magic that SASS is, for example shCodeDjango.scss file is just two lines:

1
2
3
4
@import "shCore.scss";
@import "shThemeDjango.scss";

SASS 3.0 together with Compass is pure CSS heaven. Even if you don't use SyntaxHighlighter, I strongly encourage you to have a look at these tools. They can turn your CSS development from right side up!

That's all folks!

Please, download the new version and as always, quite a few months went into the development of this new version. Please support me by donating - anything helps! I'm also looking for sponsors.

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区。
转载请注明:文章转载自 OSCHINA 社区 [http://www.oschina.net]
本文标题:SyntaxHighlighter 3.0.83
加载中
返回顶部
顶部