DIY博客園代碼高亮設置

一、下載樣式

1.1 下載頁面

點擊 Get Versioin 進入下載頁面。

插件官網

該頁面的Custom package位置，可配置下載支持的語言樣式，如沒有特殊要求，默認即可。

在Custom package結束部分可下載所有主題樣式。點擊該按鈕 開始下載。

或選擇網盤下載，鏈接 | 提取碼：c1ri

1.2 所有樣式

在文件夾 [heighlight] ——> [style]

二、樣式示例

該官網提供了各個主題的Demo演示,官網樣式示例

三、設置博客園代碼塊高亮顯示

3.1 選擇代碼高亮樣式

通過官網的Demo，找到合適的主題，在下載好的 [heighlight] ——> [style] 中，找到對應的CSS文件，打開並復制其CSS代碼到博客園的頁面定制CSS代碼中。

溫馨提示： 為保證這些樣式被成功渲染，須在 [.hljs] 前加上 [ .cnblogs-markdown ]。如：

.cnblogs-markdown .hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    background: #2d2b57;
    font-weight: normal;
}

可能會存在一些樣式沖突，可以采用微調，也可以粗暴地使用!important關鍵字，提高其優先級。

3.2 關於在博客中顯示代碼高亮

3.2.1 在Markdown編輯器下

將默認編輯器設置為Markdown，在內容區如下使用即可。值得注意的是，外層不能包含其它標簽，否則會被解析為純文本。

將代碼片段用反引號 ``` 包起來

3.2.2 在TinyMCE編輯器下

須在HTML中添加相應的類名，或將代碼片段用``` 反引號包起來

四、代碼示例

1. Java

/**
 * @author langkye <[e-mail]>
*/

public Example {
  publick static void main(String[] args) {
    int i,j;
  }
}

2. Javascript

function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ` class="${cls}"`;
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      console.log('undefined');
  }

  return (
    <div>
      <web-component>{block}</web-component>
    </div>
  )
}

export  $initHighlight;

3. Python

@requires_authorization
def somefunc(param1='', param2=0):
    r'''A docstring'''
    if param1 > param2: # interesting
        print 'Gre\'ater'
    return (param2 - param1 + 1 + 0b10l) or None

class SomeClass:
    pass

>>> message = '''interpreter
... prompt'''

**參考博客: **

1. 博客園中實現代碼高亮

————EOF————