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

最新推荐文章于 2025-05-16 19:43:42 发布

yufeitong

最新推荐文章于 2025-05-16 19:43:42 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： css文档文章标签： css

本文链接：https://blog.youkuaiyun.com/yufeitong/article/details/51554013

css文档专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了如何仅通过CSS操作，不修改原有代码，来美化百度编辑器显示的内容。作者提供了一个实例链接展示效果，并给出了主要的CSS代码，可以将其添加到文章前端或CSS文件中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提声明，不修改原有的代码，单纯的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
    }
}