Customise the colour of CSS code

Customise the colour of CSS code

Change the way you look at CSS codes on your site by customising the colour of selectors, declarations, numbers and more.

#selector {
      property: value;
      property2: #fff;
      property3: 120px;

Through the magic of the internet, when you put some CSS on your wikidot site wrapped between [[code type="css"]] and [[/code]] (ie. in a code block), the code is automatically coloured, to help differentiate between different code items. But did you know that you can change the colour of those items? Just use the CSS selectors outlined in the table below in your custom theme to add some style to code blocks on your wikidot site.

Selector Changes colour of Example (bold)
.code .hl-default Default text If no other colour is specified
.code .hl-code Default text If no other colour is specified
.code .hl-brackets Curly Brackets #top-bar {
.code .hl-identifier Selectors #side-bar {
.code .hl-reserved Declaration Property border-top: none
.code .hl-special Pseudo Classes a:hover
.code .hl-string Declaration Value background: none
.code .hl-number Numbers width: 100%
.code .hl-var Variables color: #d5d5d5

There are more selectors than displayed above that are currently supported at wikidot, but I'm still trying to work out what some of them do. Once I've worked it out, I'll let you know.

And finally, displayed below is a CSS code block to show you the sort of colour combinations that can be achieved by simply altering the colour of the above selectors.

/* Polaroid Images */
.polaroid-image  {
    width: 200px;
    border: 10px solid #fff;
    border-bottom: 20px solid #fff;
    background-color: white;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    margin: 20px;
.polaroid-caption {
    padding-top: 5px;
    text-align: center;


The above selectors are also used to highlight text in other codes supported by the PEAR::text_highlighter (which is used by wikidot). For example, displayed below are different codes, each with the .hl-identifier coloured in yellow.


.polaroid-caption {
    padding-top: 5px;
    text-align: center;


$dna = '*';
echo str_replace(chr(42), $dna, base64_decode($dna));


Area of rectangle
#include <iostream> 
using namespace std; 
const double pi = 3.14159; 
int main() 
float length, width, area; 
cout << "Enter The Length Of The Rectangle: "; 
cin >> length; 
cout << "Enter The Width Of Rectangle: "; 
cin >> width; 
area = length*width; 
cout <<"The area of the rectangle is : "<< area << endl;
return 0; 

Enjoy the article? Tweet it!

tags — code css custom-theme

Discussion - No comments yet…6 comments

Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.