2016-05-10 30 评论

Crayon Syntax Highlighter代码框修改为圆角阴影

Crayon Syntax Highlighter是一个很好的代码高亮的插件，本站也用到很多。

默认的代码框是直角的，如何改成圆角的，再加上阴影呢。

首先我们要知道圆角和阴影的css代码


圆角
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
阴影
box-shadow:0 5px 5px 0 #CCC;

圆角

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

阴影

box-shadow:0 5px 5px 0 #CCC;

然后到Crayon Syntax Highlighter相应主题CSS样式下面修改，譬如github

位于plugins/crayon-syntax-highlighter/themes/github/github.css

修改里面的.crayon-theme-github添加上面样式即可


.crayon-theme-github {
	margin-bottom: 25px !important;
	border: 1px solid #dedede !important;
	background-color: #f8f8ff !important;
	font-size: 100% !important;
	line-height: 130% !important;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow:0 5px 5px 0 #CCC;  
}