添加代碼高亮

寫博客的時候，通常需要在內(nèi)容區(qū)添加一些代碼程序，但是后臺編輯文檔沒有高亮代碼的功能wordpress代碼高亮插件，使得內(nèi)容區(qū)的文字內(nèi)容和程序代碼顏色一致，并且不能高亮代碼程序。，并不能滿足用戶體驗的要求。

最近看到一個國外網(wǎng)站，Prism是一個輕量級、可擴展的語法亮點，它是基于現(xiàn)代web標準構(gòu)建的。它被用于數(shù)千個網(wǎng)站，包括您每天訪問的一些網(wǎng)站。

單擊頂部按鈕轉(zhuǎn)到下載選擇頁面。包括四部分壓縮級別（level）、核心（core）、語言（）、插件（）wordpress代碼高亮插件wordpress建站，四部分操作后，可以自定義自己喜歡的高亮代碼，最后一個鏈接會調(diào)整模板js代碼和css樣式被下載并放置在您自己的網(wǎng)站上。

顯示高亮代碼的樣式，如下圖：

從上圖可以看出顯示效果很漂亮，但是這個方法下面有個滾動條wordpress網(wǎng)站建設(shè)，隱藏的代碼部分需要拖出來。

下面介紹另一種方法，這是我最喜歡的一種方法，也是通過css和js實現(xiàn)的。

首先，將 CSS 樣式添加到您的模板中，如下所示：

/*淡白灰代碼高亮樣式*/
pre {
    display: block;
    padding: 0 0 0 10px;
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 20px;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre;
    white-space: pre-wrap;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 2px
}
pre.prettyprint {
    margin-bottom: 20px;
    background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
    background-size: 3em 3em;
}
.prettyprint.linenums, pre.prettyprint.linenums {
    -webkit-box-shadow: inset 40px 0 0 #f8f8f8, inset 42px 0 0 #358ccb;;
    -moz-box-shadow: inset 40px 0 0 #f8f8f8, inset 42px 0 0 #358ccb;;
    box-shadow: inset 40px 0 0 #f8f8f8, inset 42px 0 0 #358ccb;
}
.prettyprint.linenums ol, pre.prettyprint.linenums ol {
    padding-left: 1.8em;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}
.prettyprint.linenums ol li, pre.prettyprint.linenums ol li {
    padding-left: 6px;
    color: #bebec5;
    line-height: 21px;
    margin-left:3px;
    list-style: decimal;
}
.prettyprint.linenums ol li:before, pre.prettyprint.linenums ol li:before {
    content: "";
    width: 0
}
.prettyprint .com {
    color: #666
}
.prettyprint .lit {
    color: #c0c
}
.prettyprint .clo, .prettyprint .opn, .prettyprint .pun {
    color: #0a0
}
.prettyprint .fun {
    color: #dc322f
}
.prettyprint .atv, .prettyprint .str {
    color: #c28f5b
}
.prettyprint .kwd, .prettyprint .tag {
    color: #f92659
}
.prettyprint .atn, .prettyprint .dec, .prettyprint .typ, .prettyprint .var {
    color: #0a0
}
.prettyprint .pln {
    color: #00f
}

其次，在.js代碼的最后，在編輯器中添加一個高亮代碼的按鈕，添加

function prettify_codeHighlight() {
?>


注意：把上面的pres改成pre，因為pres是一個不存在的標簽，為了避免和代碼中的pre class="沖突，我這里發(fā)布內(nèi)容的時候特意這樣寫。
你沒有音頻。
標簽：代碼高亮
文章來自互聯(lián)網(wǎng)，侵權(quán)請聯(lián)系刪除，文章闡述觀點來自文章出處，并不代表本站觀點。
www.bjcthy.com
                
                返回