博客園代碼黑色主題高亮設置

Blackjun 發(fā)布于2019-08-29 14:20 / 706人閱讀

摘要：之前做了博客園自定義樣式的相關設置，博客園界面變得順眼一點了。但是代碼塊還是看著比較變扭，習慣黑色主體編輯器的我，顏控的我，不能忍啊。

碎碎念：

貌似現(xiàn)在喜歡寫博客之前先叨叨一下。。。。之前做了《博客園自定義樣式》的相關設置，博客園界面變得順眼一點了。

但是代碼塊還是看著比較變扭，習慣黑色主體編輯器的我，顏控的我，不能忍啊。所以還是改改改。

小提示：
具體的操作實現(xiàn)參考GitHub：https://github.com/RealAndMe/blogs-style

1. highlight.js插件介紹

代碼高亮使用插件highlight.js，官網可以查看各種demo，highlight.js官網：https://highlightjs.org/static/demo/

有很多好看的主題，你可以盡情挑選你喜歡的。

2. 操作步驟 2-1. 下載highlight

先去官網下載highlight.js，下載地址https://highlightjs.org/。

點擊get version按鈕進入語言選擇

勾選你常用的語言，在使用插件時會自動檢測展示的代碼語言，并自動高亮。通常common就足夠了

點擊download下載壓縮包，然后解壓

2-2. 開始修改

小提示：
因為直接將解壓后的樣式引入會存在一些樣式優(yōu)先級的沖突，還需要一些調整
所以，不建議采用引入整個css文件的方式，而是通過頁面定制css功能來實現(xiàn)比較好，而且主題的css 代碼也相對較少

我選用的主題是Monokai Sublime，下面的介紹是基于我選著的主題來的，你也可以選擇其他你喜歡的主題，操作基本都是一樣的。

在你剛下載解壓的highlight.js的styles文件夾里找到你想要的主題文件

然后復制里面的css代碼

粘貼在[ 管理 ] - [ 設置 ] - 頁面定制css

提交之后，可能會有樣式優(yōu)先級沖突，這里我簡單粗暴的采用!important來強制覆蓋

3. 分享我的代碼主題高亮設置

/*
使用了Monokai Sublime的黑色主題皮膚，但是還存在樣式沖突，需要自己修改
這個樣式只適合使用makedown編寫的博客
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
*/

pre {
    /*控制代碼不換行*/
    white-space: pre;
    word-wrap: normal;
}

.cnblogs-markdown .hljs {
    display: block;
    overflow: auto;
    padding: 1.3em 2em !important;
    font-size: 16px !important;
    background: #272822 !important;
    color: #FFF;
    max-height: 700px;
}

.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;
}

/* 黑色主題makedown代碼結束 */

/*makedown行間代碼樣式 */
.cnblogs-markdown code {
    color: #c7254e;
    border: none !important;
    font-size: 1em !important;
    background-color: #f9f2f4 !important;
    font-family: sans-serif !important;
}

參考文章：
小茗同學：http://www.cnblogs.com/liuxianan/p/custom-cnblogs-highlight-theme.html

云服務器 GPU云服務器博客園博客園webrtc wcf博客園 android博客園

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113060.html

前端小白也能快速學會的博客園博客美化全攻略

摘要：前端小白也能快速學會的博客園博客美化全攻略呦，博客園的自我修養(yǎng)是什么第一條，別只顧收藏和偷師呀，記得點推薦或關注本人喔美化方法論簡介一般而言，需要選一個默認的，然后在該基礎上調整。或者也可進博客園園子頁面，發(fā)狀態(tài)博客園團隊，申請開通權限。前端小白也能快速學會的博客園博客美化全攻略 A呦V，博客園er的自我修養(yǎng)是什么？第一條，別只顧收藏和偷師呀，記得點推薦或關注本人喔~ 美化方法論簡...

StonePanda 2019-08-23 15:09 評論0 收藏0
配置一個強大的vim

摘要：我在配置文件的第一行添加上這樣的配置插件改變了原先只能把插件全部扔到目錄下的操作方式，使得各個插件可以以一個獨立的文件夾存在于目錄中，添加和刪除插件都變的非常清爽。首先推薦簡明Vim練級攻略學習Vim的使用。以前我的vim是這樣配置的（參見我在博客園的博客），但是感覺安裝的插件數(shù)量太少，而且將所有的都寫在一個配置文件里面不好管理，所以現(xiàn)在想在一般的配置的基礎上，找一些好的插件...

LeoHsiun 2019-06-28 10:11 評論0 收藏0
我是如何將博客轉成PDF的

摘要：但發(fā)現(xiàn)導出來的沒有高亮語法沒有語法高亮咋看啊，所以到這里我就放棄了，將就用一下博客園生成的吧爬蟲學習上面提供的接口是一個生成一個文件，我是不可能一個一個將鏈接和標題放上去生成的因為博客園上發(fā)的也將近篇了。前言只有光頭才能變強之前有讀者問過我：3y你的博客有沒有電子版的呀？我想要份電子版的。我說：沒有啊，我沒有弄過電子版的，我這邊有個文章導航頁面，你可以去文章導航去找來看呀..然后...

mindwind 2019-08-16 13:58 評論0 收藏0
博客園樣式

摘要：美化博客側邊欄公告博客園側邊欄樣式插入時鐘插入訪客來源插入總訪客數(shù)插入通訊組件網易音樂將生成后的代碼進博客園后臺設置博客側邊欄公告支持代碼支持代碼輸入框中下面的是筆者博客的樣式，不做解釋。博客園側邊欄樣式插入時鐘：http://www.blogclock.cn/插入訪客來源：http://s11.flagcounter.com/more/Fe64/插入總訪客數(shù)：http://www.ama...

番茄西紅柿 2019-04-23 13:40 評論0 收藏0
提高 JavaScript 開發(fā)效率的高級 VSCode 擴展！

摘要：使用高亮類似的擴展更強大的高亮擴展，具有更多功能。為了檢查和檢查響應，使用了之類的工具。在這里獲取這兩個擴展自動閉合標記和自動重命名標記。類似的擴展顯示提交歷史的精美圖表等等。想閱讀更多優(yōu)質文章請猛戳GitHub博客,一年百來篇優(yōu)質文章等著你！ Quokka.js Quokka.js 是一個用于 JavaScript 和 TypeScript 的實時運行代碼平臺。這意味著它會實時運行...

zhigoo 2019-08-23 14:00 評論0 收藏0