Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

I have been searching for a minor inconvenience experienced while reading some programming blogs that post the source code within the articles in the same font as the regular text. The only exception to this problem is when the whole article is using a monospaced font.

Clipped screenshot of one such programming blog article:

code

I found some relief by viewing the article via Google's web cache in text only mode and it shows the article in a monospaced font, as I already have the browser's default font set to a monospaced font.

What I would actually prefer is the ability to select the source code from the web article and change the font through an extension, just like in a word processor program.

By using Google Chrome's Inspect element, I change:

<span class="code">
    <p>&nbsp;&nbsp;&nbsp; try<br minmax_bound="true">&nbsp;&nbsp;&nbsp; ...</p>
</span>

to:

<span class="code" style="font-family:monospaced;">
    <p>&nbsp;&nbsp;&nbsp; try<br minmax_bound="true">&nbsp;&nbsp;&nbsp; ...</p>
</span>

if it is a huge section of code. But repeating the above is a bit of stretch if there are multiple snippets of code in the article, and I find it not viable. I tried a lot looking for Chrome browser extensions that would let the user select some text and change its font, with no luck.

Are you aware of such an extension or an alternate/easier solution? Thanks in advance.

P.S. I do not know much about developing browser extensions for Chrome, and also whether the browser exposes such a functionality. In my free time I would like to explore that route too. It can become a nice opportunity for getting myself introduced to programming extensions. Meanwhile, any new ideas/thoughts from the community will be greatly appreciated.

Edit #1: I am looking for a solution that can allow the font to be changed without having to reload the page. As there might be cases where the content can change after a page-refresh. Viewing source code in programming blogs is just a scenario that I encounter most often. For example, a web article might contain some ASCII art design, but the original author presented in the article's main variable-width font. I know that, I could just simply copy the ASCII art part (or even the source code in a programming blog) and view it in a notepad. I am beginning to wonder if I am just worrying too much about a trivial requirement.

share|improve this question
    
Either my eyes are really bleary, or the two spans are exactly the same. Anyway, a custom userscript might help. –  Karan Mar 25 '13 at 16:29
    
Thanks @Karan for pointing out. Inserted the missing style attribute. –  Barn Monkey Mar 25 '13 at 16:49
add comment

2 Answers

Why don't you just use Google's Custom.css, it's in the "default" folder > User Stylesheets > Custom.css.

Google's custom.css file will override any css on a webpage, and it allows you to specify anything you can with CSS.

share|improve this answer
1  
For readers who don't know what custom.css is, where it's to be found, what changes are required and so on, how about expanding your answer to spell things out? As it stands it's not worth much more than a comment. –  Karan Mar 25 '13 at 16:26
    
Won't modifying Custom.css cause a global change? If yes, then it will not be much different from what I get through Google cache's text-only mode. I just tried it anyway and the font didn't change after a page-refresh. I didn't try relaunching the browser after Custom.css was modified. –  Barn Monkey Mar 25 '13 at 17:10
    
Yes, it will cause a global change, there is an extension for Chrome called Stylish, maybe that's more what you're looking for? –  MarcusJ Mar 25 '13 at 19:42
1  
@MarcusJ I tried Stylish, which worked. I also found the extension Stylebot, which I liked instantly for its ease of use. –  Barn Monkey Mar 26 '13 at 20:00
add comment
up vote 0 down vote accepted

Based on MarcusJ's suggestion in a comment in response, I tried the Stylish extension for Chrome. It did the job. It required me to manually type the CSS code and assign a URL match pattern. But, I found the extension Stylebot more convenient to use. Stylebot provides an easy to use interface to select the HTML element and for making style changes. Stylebot applies the style rule to all pages in that subdomain. I liked the fact that Stylebot does the job behind the scenes for you.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.