封尘网

让学习成为一种习惯!

通过CSS控制把网页上的代码美化

博客发布文章时,如果文章里有代码块的,通过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}

提醒:本文最后更新于 1476 天前,文中所描述的信息可能已发生改变,请谨慎使用。