1. 程式人生 > 其它 >修改部落格園預設的程式碼字型大小

修改部落格園預設的程式碼字型大小

修改部落格園預設的程式碼字型大小

通常我們插入程式碼後,部落格園的網頁模板就會提供預設的樣式進行顯示,那麼如果我們想要程式碼變大些該怎麼辦呢?幸好部落格園在部落格設定中提供了自定義的css設定,讓我們可以最大限度的設定部落格風格。

一、尋找樣式名稱

如果你僅僅希望知道如何修改,那麼可以調過本節,直接進入修改一節。

要修改程式碼樣式就必須找到原本的樣式,進入到一篇文章中,在chrome中點F12,然後通過點選元素就介面,慢慢找到程式碼段。需要注意的是這裡面的程式碼都進行了摺疊,你需要根據位置來展開。

可以看見我們已經選擇到了程式碼段的部分,然後我們從右邊的syle介面就可以看到樣式了,這裡我們想要定義的是程式碼的字型大小,所以我找到了如下的兩個樣式:

.cnblogs_code pre {
font-family: Courier New!important;
font-size: 12px!important;
word-wrap: break-word;
white-space: pre-wrap;
}

.cnblogs_code span {
font-family: Courier New!important;
font-size: 12px!important;
line-height: 1.5!important;
}

這兩個樣式中font-size的大小都是12px,我們一下就知道該修改什麼了。

二、自定義樣式

通過上面的分析,我現在把預設的樣式進行了修改,僅僅把原來12px變為了18px。

.cnblogs_code pre {
font-family: Courier New!important;
font-size: 18px!important;
word-wrap: break-word;
white-space: pre-wrap;
}

.cnblogs_code span {
font-family: Courier New!important;
font-size: 18px!important;
line-height: 1.5!important;
}

然後進入部落格設定,新增自定義css樣式。最後儲存即可!

我自己的style:

.cnblogs_code pre {
font
-family: Courier New!important; font-size: 17px!important; word-wrap: break-word; white-space: pre-wrap; } .cnblogs_code span { font-family: Courier New!important; font-size: 17px!important; line-height: 1.5!important; } #home { margin: 0 auto; width: 1330px; } #main { min-width: 1330px; text-align: left; clear: both; background: #fff; } #mainContent { min-height: 200px; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; word-break: break-all; float: left; width: 1100px; background: #fff; } #sideBar { min-height: 200px; padding: 0 5px 0 5px; margin-left: 700px; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; word-break: break-all; _margin-left: 0; _width: 300px; padding-bottom: 20px; } .dayTitle { color: #666; font-weight: bold; line-height: 1.5em; font-size: 150%; margin-top: 3px; margin-bottom: 10px; float: right; position: relative; top: 40px; } .postTitle { font-size: 18px; font-weight: bold; padding: 0 100px 10px 20px; border-bottom: 1px solid #e0e0e0; line-height: 1.5em; clear: both; border-left: 5px solid #1fa6e6; } #blogTitle h1 { font-size: 200%; font-weight: bold; line-height: 1.5em; margin-left: 1em; margin-top: 10px; width: 50%; float: left; display: inline; letter-spacing: 1px; } #topics .postTitle { font-size: 150%; font-weight: bold; border-bottom: 1px solid #999; line-height: 1.5em; padding-left: 5px; }

轉自:https://www.cnblogs.com/tianzhijiexian/p/4248585.html