Emily Newsom

As Development Director, Emily oversees all of Brightflock's development projects. Prior to co-launching Brightflock in 2008, Emily developed enterprise Java systems for the biotechnology industry. Emily is an avid proponent of open source software (but without the beard!) and has contributed to a number of OSS projects including Firefox, Ubuntu, WordPress and Drupal. Emily holds an honors BSc in Computer Science from the University of Victoria.

My personal site can be found here

Emily Newsom's blog »
Posted on Thursday, November 1, 2012 in Design, Drupal

Are you one of those people like me that can only use dark themed IDEs these days? Ever since I switched to Aptana (with its default dark layout) from Eclipse for most of my dev work, I can no longer look at light-colored code windows.

So how does one get GeSHI filter to go along with the dark trend? Well, here's some css that I use to do just that:

/* Geshi */
.geshifilter {
        color: #ddd !important;
        background-color: #222 !important;
        border: none !important;
        padding: 1em !important;
        margin: 0.8em 0 !important;
        font-size: 1.2em;
}
 
/* Line highlights */
.geshifilter .li1 { background: #202021 !important; }

/* comments */
.geshifilter .co1,
.geshifilter .coMULTI { color: #7a7a75 !important; font-style: italic; }
/* methods */
.geshifilter .me1 { color: #ffffff !important; }
.geshifilter .me0 { }
.geshifilter .me2 { color: #ffcc66 !important; }

/* brackets */
.geshifilter .br0 { color:#fff !important; }

/* strings */
.geshifilter .st0 { color: #99ff00 !important; }

/* keywords */
.geshifilter .kw1 { color: #ff8400 !important; }
.geshifilter .kw2 { color: #ffcc66 !important; }

.geshifilter .kw3 { color: #07dffc !important; }

/* numbers */
.geshifilter .nu0 { color: #66cc66 !important; }

/* vars */
.geshifilter .re0 { color: #ffffff !important; }

/* CSS selectors */
 
/* classnames */
.geshifilter [lang=css] .kw2,
.geshifilter .css .kw2 { color: #f9ee7e !important; }
.geshifilter .re1 { color: #96703d !important; }

/* px values */
.geshifilter [lang=css] .re3,
.geshifilter .css .re3 { color: #ca7840 !important; }

/* Javascript */
.geshifilter [lang=javascript] .me1,
.geshifilter .javascript .me1 { color: #505e80 !important; }

.geshifilter .text .de1, .geshifilter .text .de2 { font-family: monospace, Courier; }

Looks a little boring for CSS but it works great for most other syntaxes like PHP. Just pop these into your theme's style.css and enjoy GeSHI darkness :)

These were originally inspired by this blog post here and adapted to work with GeSHI filter for Drupal by Brightflock.