博客發布文章時，如果文章里有代碼塊的，通過pre或者code可以讓代碼塊更好美觀；有效提升閱讀感受。它就像是IDE工具里的主題一樣，看著眼睛舒服；

這個問題困擾了我很久，由于時間的問題，一直沒解決。今天利用CSS代碼把這些代碼進行了一些簡單的美化。效果好看多了。

以下是美化用到的CSS代碼：

/* 代碼高亮 */

pre{font-family:"Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;

font-size:14px; width:92%; overflow:auto; margin:0 0 1em 0;

background:#423E3E;border-radius: 10px 10px; }

pre ol, pre ol li, pre ol li span{margin:0 0; padding:0; border:none}

pre a, pre a:hover{background:none; border:none; padding:0; margin:0}

pre ol{list-style:decimal; background:#423E3E; margin:0px 0px 1px 3em !important; padding:5px 0; color:#5C5C5C; border-left:2px solid #146B00;}

pre ol li{list-style:decimal-leading-zero; list-style-position:outside !important; color:#5C5C5C; padding:0 3px 0 10px !important; margin:0 !important; line-height:1.3em}

pre ol li.alt{color:inherit}

pre ol li span{color:#E5E0E0; background-color:inherit}

pre .comment, pre .comments{color:#008200; background-color:inherit}

pre .string{color:blue; background-color:inherit}

pre .keyword{color:#069; font-weight:bold; background-color:inherit}

pre .preprocessor{color:gray; background-color:inherit}

pre .dp-xml .cdata{color:#ff1493}

pre .dp-xml .tag, pre .dp-xml .tag-name{color:#069; font-weight:bold}

pre .dp-xml .attribute{color:red}

pre .dp-xml .attribute-value{color:#1169AD}

pre .dp-sql .func{color:#ff1493}

pre .dp-sql .op{color:#808080}

pre .dp-rb .symbol{color:#a70}

pre .dp-rb .variable{color:#a70; font-weight:bold}

pre .dp-py .builtins{color:#ff1493}

pre .dp-py .magicmethods{color:#808080}

pre .dp-py .exceptions{color:brown}

pre .dp-py .types{color:brown; font-style:italic}

pre .dp-py .commonlibs{color:#8A2BE2; font-style:italic}

pre .dp-j .annotation{color:#646464}

pre .dp-j .number{color:#C00000}

pre .dp-delphi .number{color:blue}

pre .dp-delphi .directive{color:#008284}

pre .dp-delphi .vars{color:#000}

pre .dp-css .value{color:black}

pre .dp-css .important{color:red}

pre .dp-c .vars{color:#d00}

pre .dp-cpp .datatypes{color:#2E8B57; font-weight:bold}

總結

以上是生活随笔為你收集整理的css控制的代码,通过CSS控制把网页上的代码美化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。