larlet-fr-david-cache/cache/215fec2d12bf7793ce6fb55ee7989968/index.md

title: Coding in color
url: https://medium.com/@evnbr/coding-in-color-3a6db2743a1e
hash_url: 215fec2d12bf7793ce6fb55ee7989968

<h4 name="subtitle" id="subtitle" class="graf--h4">How to make syntax highlighting  more useful</h4><p class="graf--p graf--empty"><br/></p><p name="6fcb" id="6fcb" class="graf--p">This is what syntax highlighting looks like for most of us.</p><figure name="6d71" id="6d71" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*CTbkJuYm0JUcHFTAgovAsg.png" data-width="563" data-height="440" src="https://cdn-images-1.medium.com/max/800/1*CTbkJuYm0JUcHFTAgovAsg.png"/></div><figcaption class="imageCaption">This is javascript for the Fisher-Yates shuffle, which I took from this <a href="http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array" data-href="http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array" class="markup--anchor markup--figure-anchor" rel="nofollow">StackOverflow question</a>. Screenshot from Sublime Text 2 with the Dawn theme.</figcaption></figure><p name="4399" id="4399" class="graf--p">We think syntax highlighting makes the structure of code easier to understand. But as it stands, we highlight the obvious (like the word <em class="markup--em markup--p-em">function</em>) and leave most of the content in black. Rather than highlighting the differences between <em class="markup--em markup--p-em">currentIndex </em>and the keyword <em class="markup--em markup--p-em">function</em>, we could highlight the difference between <em class="markup--em markup--p-em">currentIndex</em> and <em class="markup--em markup--p-em">randomIndex</em>. Here’s what that might look like:</p><figure name="1b7e" id="1b7e" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*TVSPOYO1z8GOVs3tuxNRqA.png" data-width="563" data-height="440" src="https://cdn-images-1.medium.com/max/800/1*TVSPOYO1z8GOVs3tuxNRqA.png"/></div></figure><p name="589d" id="589d" class="graf--p">Notice that instead of the built-in keywords being highlighted, everything else is. Each variable has its own color, so I can see where it’s used at a glance. Even when skimming the code, I can see how data flows through the function.</p><p name="4164" id="4164" class="graf--p">By using only muted colors and bolder type for variable names, we can still reserve a brighter red to highlight strings and a lighter green for comments without causing confusion. Also, because any new or custom function will get a color, I’ll be able to catch the typo in <em class="markup--em markup--p-em">querySelector</em> below.</p><figure name="eb27" id="eb27" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*BxDY65qb-9LmvocCNvrLVg.png" data-width="422" data-height="106" src="https://cdn-images-1.medium.com/max/800/1*BxDY65qb-9LmvocCNvrLVg.png"/></div></figure><p name="08bb" id="08bb" class="graf--p">Variable names with similar prefixes will be assigned similar colors. We collect all the custom names and order them alphabetically, then distributing them evenly along a spectrum. This way we make sure we use as distinct colors as possible.</p><figure name="7da8" id="7da8" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*_eIcZ4gHFBrb5LycNrSI6g.png" data-width="979" data-height="226" data-action="zoom" data-action-value="1*_eIcZ4gHFBrb5LycNrSI6g.png" src="https://cdn-images-1.medium.com/max/800/1*_eIcZ4gHFBrb5LycNrSI6g.png"/></div><figcaption class="imageCaption">Across files, all variable that start with $ or _ will probably be in the red/orange spectrum.</figcaption></figure><p name="cb41" id="cb41" class="graf--p">Not sure if anyone has done work on this idea before, but I’m curious what it would be like to live with this implemented in a code editor. It might not scale to extremely large and/or complex files as is. But if you want to help, feel free to start with my code (or, even better, implement it in a smarter way!).</p><p name="4561" id="4561" class="graf--p">—</p><p name="6544" id="6544" class="graf--p"><em class="markup--em markup--p-em">Updated June 12 2014</em></p><p name="8595" id="8595" class="graf--p">—</p><p name="19d3" id="19d3" class="graf--p"><em class="markup--em markup--p-em">Update:</em></p><p name="7f6a" id="7f6a" class="graf--p graf--last">Thanks to <a href="http://www.reddit.com/r/programming/comments/1w76um/coding_in_color/" data-href="http://www.reddit.com/r/programming/comments/1w76um/coding_in_color/" class="markup--anchor markup--p-anchor" rel="nofollow">r/programming</a> for pointing out that <a href="http://zwabel.wordpress.com/2009/01/08/c-ide-evolution-from-syntax-highlighting-to-semantic-highlighting/" data-href="http://zwabel.wordpress.com/2009/01/08/c-ide-evolution-from-syntax-highlighting-to-semantic-highlighting/" class="markup--anchor markup--p-anchor" rel="nofollow">semantic highlighting</a> in KDevelop already does exactly this! I’ll have to give it a try.</p>