之前使用ueditor的默认代码高亮的样式,但是BlueBu比较喜欢深色系,所以希望换个样式,而之前使用wordpress时候,记得是可以切换主题的.

ueditor third目录里有两个可疑插件codemirror2.15 & SyntaxHighlighter

放狗搜之,原来codemirror是用来做code editing的,我只是想要code view,所以用的不是这个,而且导入包的时候是导入SyntaxHighlighter的,于是去官网 http://alexgorbatchev.com/SyntaxHighlighter/

下载源码: http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current


scripts 里面包含各种语言的识别, 调用也非常简单,就是根据pre 里面 class来判断code是什么语言,这里,我直接用ueditor自带的了,如果需要自定义的话,可以看看官方文档


接下来就是更换主题了,styles里面有各种主题的css,但是hi-ruby既然用Rails做的,所以选择使用scss来做

1、把compass目录中的scss文件copy到 app/assets/stylesheets/syntaxhighlighter中

2、新建app/assets/stylesheets/syntaxhighlighter.css.scss文件,import要使用的scss文件, 其中第一句是用来修复无法换行的问题

.syntaxhighlighter table td.code .container, .syntaxhighlighter table td.code .container:before, .syntaxhighlighter table td.code .container:after {
  display: block;
}
@import "syntaxhighlighter/shCore.scss";
@import "syntaxhighlighter/shThemeEmacs.scss"

3、将syntaxhighlighter.css.scss添加到预编译目录中

config.assets.precompile += ['admin.js', 'admin.css', "syntaxhighlighter.css"]

4、修复无法换行的问题,修改shCore.scss文件, 注释掉height: auto  !important;

.syntaxhighlighter {
    a,
    div,
    code,
    table,
    table td,
    table tr,
    table tbody,
    table thead,
    table caption,
    textarea {
        @include round_corners(0);
              
        background: none !important;
        border: 0 !important;
        bottom: auto !important;
        float: none !important;
        // 注释掉 height: auto  !important; 
        left: auto !important;
        line-height: 1.1em !important;
        margin: 0 !important;
        outline: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
        position: static !important;
        right: auto !important;
        text-align: left !important;
        top: auto !important;
        vertical-align: baseline !important;
        width: auto !important;
        box-sizing: content-box !important;
        font: {
            family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
            weight: normal !important;
            style: normal !important;
            size: 1em !important;
        }
        min: {
            // For IE8, FF & WebKit
            height: inherit !important;
            // For IE7
            height: auto !important;
        }
    }
}