highlight实现自定义代码块高亮及左右滑动

在网页使用过程中，经常会用到代码的展示。而不同颜色的代码，可以让代码看起来更直观，也更美观。
找了几个不同的插件，觉得highlight的插件比较实用，而且用起来炒鸡简单。

1.引入css文件

    <!--开启代码高亮css-->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/dark.min.css">

2.引入js文件

    <!--开启代码高亮js-->
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>

3.自定义css文件内容

/*makedown代码块高亮自定义，横向的滑动块--start*/
.hljs-ln-numbers {
    text-align: center;
    color: #ccc;
    border-right: 1px solid #999;
    vertical-align: top;
    margin-left: 5px;
    padding-left: 5px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*去掉边框*/
pre {
    border: none;
}

code {
    /*实现左右滑动块*/
    white-space: pre !important;
    overflow-x: scroll !important;
    word-break: keep-all !important;
    word-wrap: initial !important;
}

.cnblogs-markdown .hljs {
    font-size: 16px !important;
    font-family: consolas, monospace !important;
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    background: #23241f !important;
    color: #FFF;
    white-space: pre;
    word-break: normal;
    padding: 10px 15px !important;
}

.hljs,
.hljs-tag,
.hljs-subst {
    color: #f8f8f2;
}

.hljs-strong,
.hljs-emphasis {
    color: #a8a8a2;
}

.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
    color: #ae81ff;
}

.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
    color: #a6e22e;
}

.hljs-strong {
    font-weight: bold;
}

.hljs-emphasis {
    font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
    color: #f92672;
}

.hljs-symbol,
.hljs-attribute {
    color: #66d9ef;
}

.hljs-params,
.hljs-class .hljs-title {
    color: #f8f8f2;
}

.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
    color: #e6db74;
}

.hljs-comment,
.hljs-deletion,
.hljs-meta {
    color: #75715e;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {

    color: #569CD6;

}

.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {

    color: #CE9178;

}


.hljs-comment,
.hljs-deletion,
.hljs-meta {

    color: #6A9955;

}

.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {

    color: #B5CEA8;

}
.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {

    color: #DCDCAA;

}
/*makedown代码块高亮自定义，横向的滑动块--end*/

4.自定义js，开启行号和代码块高亮

<script>
    var messages = $("#messages").val();
    if (messages!==""){
        alert(messages);
    }
    // 开启代码高亮
    hljs.initHighlightingOnLoad();
    // 行号显示
    hljs.initLineNumbersOnLoad({singleLine: true});
</script>

具体效果可以去我博客网站查看（http://sun1yue.cn/）