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

原创 2016年06月01日 10:24:18

前提声明,不修改原有的代码,单纯的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文件里都可以。

版权声明:本文为博主原创文章,转载请注明。

相关文章推荐

编辑器生成的html代码再显示的样式冲突问题

网页编辑器是个不错的东西,在很多时候都需要使用到,用来编辑各种文本。然而使用网页编辑器却会存在一些各种各样的问题,解决这些问题总会让人头疼。 最近使用编辑器编写正文,在需要再在前台展示的时候发现样式冲...

【EasyUI-加载完Html内容样式渲染完成后显示】

等待页面的css样式加载完毕,Html内容加载完毕,样式生成后再进行展示,避免一开始加载内容后,逐渐渲染样式造成的不良视觉效果,增强用户体验。 新增base-loading.js文件,代码如下 //获...

IOS中设置UINavigationBar的各种样式(图片/透明效果/下方内容显示情况)

IOS中设置UINavigationBar的各种样式(背景图片/全透明效果/下方内容是否显示,不显示滚动内容), 导航栏的item,返回按钮,title字体颜色设置。...

类似于百度搜索,搜索关键字,下拉框显示,以及jQuery中添加删除class类,并给class类添加样式

script> function getContent(obj){        $( "#a").hide();            $( "#b").hide();            $( ...

IE下a标签中内容为空,在页面中无法显示其hover样式的解决方法

最近做一个活动页面,页面中有一个按钮,如果抠图处理单独作为按钮图片的话,效果不是很好,于是想将整个图作为背景,然后在设置一个标签作为按钮通过绝对定位使其与图片中的按钮重合,从而达到点击按钮的效果。一切...

开发小坑--百度地图Marker和bootsharp样式冲突导致显示错乱

最新在开发一个弹框的百度地图控件,在开发过程中,遇到了一个比较坑的问题。 marker样式错乱,然后网上各种找资料(官方API和各个技术博客)。不过网上资料都比较少,都是教你怎么自定义创建mark...

百度站内搜索框 自己定义样式、显示方式...(瓜头酱油的发现) 供 站内搜索入门 者围观

这次需要做一个百度的站内搜索, 刚开始做这个东西什么都不知道,心里急了, 公司的人 看我比较急也给我指定了一下,但是全公司就我一个PHP程序员, 还是我自己摸索吧, 哈哈哈哈 刚好现在找到了资料......
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:美化百度编辑器内容显示样式
举报原因:
原因补充:

(最多只允许输入30个字)