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; }
Additionally…
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.
CSS
.polaroid-caption { padding-top: 5px; text-align: center; }
PHP
$dna = '*'; echo str_replace(chr(42), $dna, base64_decode($dna));
C++
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!
Discussion - No comments yet…6 comments
Nice! Is it possible to modify the CSS for other styles of code block (e.g. "cpp" for C++) ? I will try testing to see if this code works with those a bit later on today…
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
It works for all code types supported by the PEAR::text_highlighter, which, according to Wikidot Syntax Docs includes php, html, cpp, css, diff, dtd, java, javascript, perl, python, ruby and xml. In fact, it will use many of the same colours for the different codes - I'll add this to the blog post soon.
BMC Creative | RoaringApps | @brycecammo
Okay, so I assume things like .code .hl-number will work for that, but .code .hl-identifier only works on CSS blocks?
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
Actually, I think that most of the selectors overlap some or all of the codes - see my addition to the blog post above. I'll do some more research and make a more definitive list sometime soon.
BMC Creative | RoaringApps | @brycecammo
Wikidot maintains a series of "rainbow themes", all derived from a rainbow base theme.
I posted this question on the community site:
Rob gave a straightforward answer, but this seems to suggest an alternative. Is there a way to allow users to call a base theme and simply modify those three colors by defining three variables?
My grasp of CSS is vague (can you tell?), so I'm probably mixing up concepts.
Nevermind. You're talking about colors for code text, not theme colors. Sorry…
Post preview:
Close preview