rainbow icon indicating copy to clipboard operation
rainbow copied to clipboard

What might be conflicting with tab indents?

Open DhatesCode opened this issue 9 years ago • 1 comments

I've been trying to narrow down a problem with tab indenting when using Rainbow with WordPress. Been digging for 2 days and I can't reproduce it in a fiddle.

There's no conflict with plug-ins because I disabled them all, so it's either something in the core or the theme. It's also not rainbow.linebumbers.js because I made a fiddle with it and the tab indenting worked fine with identical code that I have in a WordPress post.

Basically if I have code with multiple indents with regular tabs, the farthest the code will indent is one tab. The only way to get around this is to convert the tabs to spaces—ok for now, but if anyone wants to copy the code they might not be pleased with spaces for indents.

I just wanted to post on here to see if anyone has run into this issue with Rainbow and WordPress so I can work out where the conflict is happening before I lose my sanity.

Here's an examples of what I see:

<?php
// Typical Rainbow Output
function open_sesame(){
    if (is_page('door')) {
        ring('bell');
    }
    else if (is_search()) {
        echo 'some text' . $a_variable;
    }
    else {
        print "yawn";
    }
}
?>
<?php
// Rainbow in WordPress Post
function open_sesame(){
    if (is_page('door')) {
    ring('bell');
    }
    else if (is_search()) {
    echo 'some text' . $a_variable;
    }
    else {
    print "yawn";
    }
}
?>

DhatesCode avatar Aug 05 '16 18:08 DhatesCode

After much toil I finally found the problem, so I'm posting it in case anyone ever runs into it.

If you have CSS letter-spacing applied to anything that affects your code that Rainbow is styling, it seems to collapse the tab indents if there is more than one tab used. Not sure why, but it does. This fiddle shows it broken.

in my case, I had letter-spacing set on body to apply a small negative, kerning to all text on the site. I managed to fix it with a simple line:

pre *, code * { letter-spacing:initial; }

anyway, if you use WordPress (or anything) and Rainbow, be mindful of this or you'll be in the same hell I was the past week, as many apply global letter-spacing to themes.

DhatesCode avatar Aug 12 '16 00:08 DhatesCode