使用 xhEditor 发布代码 代码高亮显示

使用 xhEditor  插入需要的代码段

 

在前台添加样式

/* 代码高亮 */

pre{font-family:'Courier New' , Monospace; font-size:12px; width:99%; overflow:auto; margin:0 0 1em 0; background:#F7F7F7; word-break: break-all; word-wrap:break-word;}

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:#F7F7F7; margin:0px 0px 1px 3em !important; padding:5px 0; color:#5C5C5C; border-left:3px 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:black; 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:blue}

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}

 

效果如果：