Comments on: Rebol source color-coding (syntax highlighting)
REBOL Technologies

Comments on: Rebol source color-coding (syntax highlighting)

Carl Sassenrath, CTO
REBOL Technologies
14-Dec-2012 6:05 GMT

Article #0524
Main page || Index || Prior Article [0523] || Next Article [0525] || 11 Comments || Send feedback

It must have been 10 years ago that I published a short note about the standard for Rebol source color coding. (This is sometimes called syntax highlighting, but that term isn't really correct. It's actually more like lexicon highlighting.)

The colors I picked were based on an early study from IBM about the eye and how colors relate to importance.

For example, shades of red are strong. Since function are one of the most powerful concepts in programming, it makes sense that they'd be colored red.

Similarly, blue is a cool color, and accounts for only 10% of color seen by they eye. (An important factor in creating color television.) So, comments in blue make sense because they are not actually a functional part your program.

Seven years ago I wrote this colorizor script to help support the Rebol colorizing standard. It's pretty close to what I use. (But, I've not mentioned the effect inverse video has on this scheme. Guess that's the next blog topic.)

It could use a little refinement. For example, bold is handy in places.

Here's an example of a refinement, but it's still pretty close to the stanard: color-code.r on Christopher has an artistic sense and spruced it up a bit more. Looks good.

Of course, all this only really matters for code that's posted on the net. This came to my attention when I saw Rebol color coding used on github. For your own editor, you can color code however you want.



Carl Read
14-Dec-2012 23:43:19
I don't like the bold, but otherwise I notice it's the same colouring as in Crimson Editor, which I'm happy enough with. It seems slightly blurry on the webpage though, which is either the result of the background colour used or the font. (Or my browser settings...)
Brian Hawley
15-Dec-2012 2:23:46
Comments are hard to read with the second script; not enough color contrast with the background. Otherwise, looks nice.

I'm curious what scheme you'd use with a darker background, like charcoal grey. Been preferring that lately, saves my eyesight when doing long bouts in front of a computer.

16-Dec-2012 11:53:42
Carl, thanks for the kind comments : )

I'd made my refinements so that code could be coloured using CSS hooks, this makes it extremely easy to adapt to custom color schemes or embed within a larger design.

As an example—on any of my script pages (including the color-code script) you can press 'D' to switch style to my dark colour scheme (based on the TextMate 'Blackboard' scheme, browser dependent, 'L' to switch back to light). Brian: this is an option for both a charcoal background and more prominent comments.

18-Dec-2012 4:24:38
The problem is just the CSS to use.

I adopted the following modified Carl colorizer:(code and example)

Since I didn't find any CSS ready to use, but I'm open to use a common CSS.

Carl Sassenrath
22-Dec-2012 15:45:33
Chris, that's great that you include dark/light schemes. Can you explain "press D" comment? I'm not sure what you mean. (I tried a few ideas, but no changes happened.)

On CSS: what if we put a common CSS into a new github repository? (Once github comes back online... it seems to be down today.)

22-Dec-2012 21:39:59
Carl, dependent on the browser, you can press 'D' and it'll go dark–I tested on Firefox, Safari and Chrome. Not exactly bulletproof JavaScript, I'm afraid (if there's such a thing). This bookmarklet should work too (can be pasted into the address bar–tested on iPad):


On CSS, I think this is a good idea. It'd be useful to have a consistent way of marking up Rebol source: I wrap source with <pre class="code rebol"> and values with <var class="dt-integer"> as appropriate, but ever open to suggestion.

22-Dec-2012 21:48:19
Looks like this:

3-Jan-2013 8:43:41
I'm still waiting the CSS... :-)
26-Jan-2013 8:51:11

initially I used the color scheme of colorize.r as it since it is not a secret that area-tc is based on that Carl's script. But at use I found that it was too much of red in my view and that I lost coherence and meaning in what I was seeing.

so I proposed the image above. Not the best but identifying the data more than the code. The data are in my view what means to be noticed at first glace since it has to be flawless. the code is what is most seen and have to be colored smoothly . coloring the word! of the rebol dialect is important since it allows you to see directly when a word! is miss typed ! it is like a live basic implicit bug correcting effect! But if the color is too strong then the only thing you will notice in your code is the code and not the data. plus too much of a strong color will eyestrain you!

try the same color matching patern but instead of red for rebol world us a light yellow or a light pink or a light blue. and then try with a marron, or a dark-orange or a dark-blue (not as dark a a navy blue byt darker than a normal blue)

the other thing to take in consideration is the background if the background is white you have to use dark colors for text match if the background is black you have to use light colors for the text match.

27-Jan-2014 22:40:41
I updated (at)draegtun's script for Google Code Prettify:

Can be used to colour plain PRE blocks, as in this example:

27-Jan-2014 22:43:44
Though it does have some flaws--it is JavaScript, after all! Fairly cheap-and-cheerful nonetheless.

Post a Comment:

You can post a comment here. Keep it on-topic.


Blog id:



 Note: HTML tags allowed for: b i u li ol ul font p br pre tt blockquote

This is a technical blog related to the above topic. We reserve the right to remove comments that are off-topic, irrelevant links, advertisements, spams, personal attacks, politics, religion, etc.

Updated 9-Dec-2023   -   Copyright Carl Sassenrath   -   WWW.REBOL.COM   -   Edit   -   Blogger Source Code