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 is a father and 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 Reply to “A Style of pre Tags in WordPress”

Leave a Reply

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