5

This is a followup on my recent question Search for two tags (OR, not AND).

I like searching for multiple tags at once, since I'll then get one view containing all the questions I might be interested in.

However, many times, the results might contain questions that do not interest me. For example: if I search for questions tagged with either jQuery or javascript, I'm not interested in a question tagged with both javascript and mootools, since that question will 99% of the time be about mootools. So, it would be nice to highlight those tags that I have searched for, so that I can quickly scan the questions to see why any one of them has been included in my results.

Additionally, after clicking on one of the questions, I'd like for the tags in that post to also be highlighted according to what I had searched for. This is especially useful when searching for jQuery and javascript, since then I could immediately see whether my answer should be using jQuery or native javascript.

This is such a simple feature, that I'm baffled that it hasn't been coded this way by the proficient SO programmers.

I then decided that I'll just write my own user stylesheet for it, but could not find any classes to hook myself onto.

Am I missing something?

Improve this question

2 Answers 2

Reset to default
3

This has been bugging me so much, that I decided I'll have to create my own solution.

Since I couldn't find a way to do it with user stylesheets, I had to create a Chrome Extension.

Here's the code:

manifest.json:

{
    "name": "Stack Overflow Tag Highlighter",
    "version": "1.0.1",
    "description": "When searching by tag on stackoverflow.com, this extension will highlight the tags that have been searched for.",
    "content_scripts": [
        {
            "matches": [
                "http://stackoverflow.com/questions/tagged/*",
                "http://stackoverflow.com/questions/*"
            ],
            "css": ["highlighter.css"],
            "js": ["jquery.min.js", "highlighter.js"]
        }
    ]
}

highlighter.css:

.highlighter-highlighted {
    border-color: #4980A7 !important;
    background: #A3C1D7 !important;
    font-weight: bold !important;
    color: #3B6787 !important;
    text-shadow: 0 1px 0 #DFEAF1;
}
.highlighter-highlighted:hover {
    background: #91B5CF !important;
    color: #335A75 !important;
}

highlighter.js:

(function()
{
    var tagsToHighlight = [],
        tags;

    if (window.location.href.indexOf('questions/tagged') != -1)
    {
        tagsToHighlight = window.location.href.split('/').pop().split('+');

        localStorage.setItem( 'tagsToHighlight', JSON.stringify(tagsToHighlight) );

        tags = $('.tags .post-tag');
    }
    else
    {
        tagsToHighlight = JSON.parse( localStorage.getItem('tagsToHighlight') ) || [];

        tags = $('.post-taglist .post-tag');
    }

    tags.each(function()
    {
        if ( $.inArray($(this).text(), tagsToHighlight) != -1 )
        {
            $(this).addClass('highlighter-highlighted');
        }
    });

})();

Here it is, all "packaged up": http://dl.dropbox.com/u/6484839/chrome%20extension.crx

Improve this answer
2

I think a yellow highlighting of both words and tags searched for would be great. Especially since the SO search engine returns so many false positives. For the tags, just a border of yellow would be fine.

Improve this answer
3
  • I tried it with various styles. Then I decided to make them orange, which is SO's natural highlight color. But that gave it too much contrast, and kept on distracting me from the questions themselves. In the end I settled on a more neutral shade of blue, a bit darker than the regular tags.
    – Joseph Silber
    Aug 18, 2011 at 23:41
  • @Joseph, that should work fine also. Too bad I use Firefox and IE for most of my SO work.
    – Lance Roberts
    Aug 18, 2011 at 23:43
  • Well, you can always port it to Firefox ;)
    – Joseph Silber
    Aug 19, 2011 at 0:04

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .