关闭

美化百度编辑器内容显示样式

标签: css
140人阅读 评论(0) 收藏 举报
分类:

前提声明,不修改原有的代码,单纯的css操作,方法比较简单,只要有点基础的都会。
这里写图片描述
效果请看http://tool.52miui.com/rjjc/wyzz/1504.html
主要代码如下:

/*editor*/
.syntaxhighlighter a,.syntaxhighlighter code,.syntaxhighlighter div,.syntaxhighlighter table,.syntaxhighlighter table caption,.syntaxhighlighter table tbody,.syntaxhighlighter table td,.syntaxhighlighter table thead,.syntaxhighlighter table tr,.syntaxhighlighter textarea{-moz-border-radius:0;-webkit-border-radius:0;border:0;bottom:auto;float:none;height:auto;left:auto;margin:0;outline:0;overflow:visible;padding:0;position:static;right:auto;text-align:left;top:auto;vertical-align:baseline;width:auto;box-sizing:content-box;font-family:'Source Code Pro','Courier New',Courier,monospace;font-weight:600;font-style:normal;letter-spacing:0;background:0 0!important;min-height:0}
.syntaxhighlighter,.syntaxhighlighter table,.syntaxhighlighter table td.code {
    width: 100%
}
.syntaxhighlighter {
    margin: 20px 0;
    position: relative;
    overflow: auto;
    font-size: .85em;
    overflow-y: hidden;
    padding: 1em 0;
    background-color: #edf0f3
}
.syntaxhighlighter code.plain,.syntaxhighlighter code.value {
    color: #34495e
}
.syntaxhighlighter code.keyword {
    color: #2980b9
}
.syntaxhighlighter code.string {
    color: #ef6e7e
}
.syntaxhighlighter code.comments {
    color: #b1bbc5
}

.syntaxhighlighter.source {
    overflow: hidden
}
.syntaxhighlighter .bold {
    font-weight: 700
}
.syntaxhighlighter .italic {
    font-style: italic
}
.syntaxhighlighter .line {
    white-space: pre
}
.syntaxhighlighter caption {
    text-align: left;
    padding: .5em 0 .5em 1em
}
.syntaxhighlighter td.code .container {
    position: relative
}
.syntaxhighlighter td.code .container textarea {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
    padding-left: 1em;
    overflow: hidden;
    white-space: pre
}
.syntaxhighlighter td.gutter {
    background: rgba(0,0,0,.05);
    display: none

}
.syntaxhighlighter td.code .line {
    padding: 0 1.5em
}
.syntaxhighlighter.show {
    display: block
}

.syntaxhighlighter.collapsed table {
    display: none
}
.syntaxhighlighter.collapsed .toolbar {
    padding: .1em .8em 0;
    font-size: 1em;
    position: static;
    width: auto;
    height: auto
}
.syntaxhighlighter.collapsed .toolbar span {
    display: inline;
    margin-right: 1em
}
.syntaxhighlighter.collapsed .toolbar span a {
    padding: 0;
    display: none
}
.syntaxhighlighter .toolbar span.title,.syntaxhighlighter.collapsed .toolbar span a.expandSource {
    display: inline
}
.syntaxhighlighter .toolbar {
    position: absolute;
    right: 1px;
    top: 1px;
    width: 11px;
    height: 11px;
    font-size: 10px;
    z-index: 10
}
.syntaxhighlighter .toolbar a {
    display: block;
    text-align: center;
    text-decoration: none;
    padding-top: 1px
}
.syntaxhighlighter .toolbar a.expandSource,.syntaxhighlighter.printing .toolbar {
    display: none
}
.syntaxhighlighter.ie {
    font-size: .9em;
    padding: 1px 0
}
.syntaxhighlighter.ie .toolbar {
    line-height: 8px
}
.syntaxhighlighter.ie .toolbar a {
    padding-top: 0
}
.syntaxhighlighter.printing .line.alt1 .content,.syntaxhighlighter.printing .line.alt2 .content,.syntaxhighlighter.printing .line.highlighted .number,.syntaxhighlighter.printing .line.highlighted.alt1 .content,.syntaxhighlighter.printing .line.highlighted.alt2 .content {
    background: 0 0
}
.syntaxhighlighter.printing .line .number {
    color: #bbb
}
.syntaxhighlighter.printing .line .content {
    color: #000
}
.syntaxhighlighter.printing a {
    text-decoration: none
}
@media print {
    .syntaxhighlighter .line {
        white-space: pre-line
    }
    .syntaxhighlighter .gutter {
        display: none
    }
}

将此段css代码放在前端显示的文章里,或者放在css文件里都可以。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:12186次
    • 积分:205
    • 等级:
    • 排名:千里之外
    • 原创:6篇
    • 转载:16篇
    • 译文:0篇
    • 评论:1条
    最新评论