Dark CSS theme for TYPO3 extension syntaxhighlight
I was very impatient of the default CSS styles which comes shipped with the syntax highlight extension tx_syntaxhighlight. There is already a console style but I felt uncomfortable with it.
So I searched the web for some dark GeSHi styles and stumbled upon the Geshi CSS Pack created by Mark Story. I took it as a base and mixed in some colors I was used to see in the symfony project documentation.
I came up with the following CSS which is global for all GeSHi supported language syntaxes.
/* Line highlights */
.tx-syntaxhighlight .li1 { background: #202021; }
/* comments */
.tx-syntaxhighlight .co1,
.tx-syntaxhighlight .coMULTI { color: #7a7a75; font-style: italic; }
/* methods */
.tx-syntaxhighlight .me1 { color: #ffffff; }
.tx-syntaxhighlight .me0 { }
.tx-syntaxhighlight .me2 { color: #ffcc66; }
/* brackets */
.tx-syntaxhighlight .br0 { color:#fff; }
/* strings */
.tx-syntaxhighlight .st0 { color: #99ff00; }
/* keywords */
.tx-syntaxhighlight .kw1 { color: #ff8400; }
.tx-syntaxhighlight .kw2 { color: #ffcc66; }
.tx-syntaxhighlight .kw3 { color: #07dffc; }
/* numbers */
.tx-syntaxhighlight .nu0 { color: #66cc66; }
/* vars */
.tx-syntaxhighlight .re0 { color: #ffffff; }
/* CSS selectors */
/* classnames */
.tx-syntaxhighlight [lang=css] .kw2,
.tx-syntaxhighlight .css .kw2 { color: #f9ee7e; }
.tx-syntaxhighlight .re1 { color: #96703d; }
/* px values */
.tx-syntaxhighlight [lang=css] .re3,
.tx-syntaxhighlight .css .re3 { color: #ca7840; }
/* Javascript */
.tx-syntaxhighlight [lang=javascript] .me1,
.tx-syntaxhighlight .javascript .me1 { color: #505e80; }
.tx-syntaxhighlight .text .de1, .tx-syntaxhighlight .text .de2 { font-family: monospace, 'Courier New', Courier; }
/* CODEBOX CLASSES */
.tx-syntaxhighlight {
}
.tx-syntaxhighlight div.title {
background-color: #808080;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
color: #ffffff;
line-height: 2em;
padding: 0 0 0 1em;
}
.tx-syntaxhighlight div.text {
background-color: #202021;
color: #f8f8f8;
overflow: auto;
padding: 8px 0 8px 12px;
white-space: nowrap;
font-size: 1.4em;
line-height: 1em;
}
.tx-syntaxhighlight div.text ol { margin: 0 0 0 2em; }
.tx-syntaxhighlight .clippy-copy {
background: transparent url(/fileadmin/templates/{$site.template_path}/img/disk_multiple.png) left center no-repeat;
padding: 0 0 0 20px;
}
Note, that for TypoScript syntax I figured out that comments starting with "#" doesn't work properly. Instead use the "//" for single line comments.
The extension template of tx_syntaxhighlight has to be adjusted like the following. Note the deletion of the TypoScript overall style setting, as this comes shipped with tx_syntaxhighlighting default extension setup and sets some inline styles which are difficult to override from CSS (if you want to avoid "!important").
plugin.tx_syntaxhighlight_controller {
useGeshiCSS = 0
typoscript.style.overall >
_CSS_DEFAULT_STYLE (
// insert CSS from above here
)
}
Comments
No comments