A Style of pre Tags in WordPress

I use <pre> tag a lot in the html. I believe the guys that usually past codes into the pages will like it too.

I use the pre tag to list programming code such as C/C++, php, Linux shell output and some other content that is suitable for Monospace font.

The effect is like that it has a scroll bar and it has a solid frame which will make it clear.

In WordPress, you can simply change the style.css or use some plugins to add styles to your site.

The style of pre tag I like most is this one:

    pre {
        border: 1px dashed #888;
        padding: 5px 10px;
        margin: 0 0 1em 0;
        overflow: auto;
    /* no vertical scrollbars for standards-compliant browsers */
    /* no vertical scrollbars for IE 7 */
    *:first-child+html pre:hover {
        padding-bottom: 20px;
        overflow-y: hidden;
        overflow: visible;
        overflow-x: auto;
    /* no vertical scrollbars for IE 6 */
    * html pre:hover {
        padding-bottom: 20px;
        overflow: visible;
        overflow-x: auto;

Eric Ma

Eric is a systems guy. Eric is interested in building high-performance and scalable distributed systems and related technologies. The views or opinions expressed here are solely Eric's own and do not necessarily represent those of any third parties.

One comment:

Leave a Reply

Your email address will not be published. Required fields are marked *