Can I change the size or font in the view page source section from a browser?

Question

There is a small problem that might annoy me from time to time (idk if there are other people feel the same). Every time I use view page source from any browser, the text always turn out to be ugly and small (my computer's resolution is 1920x1080 with 17 inches in particular, which makes the letter extremely small and hard to see). Is there a way to change the font and the size in the view page source section from any browser? (Chrome, for example)

I know I could zoom in the page by mouse scrolling or by "ctrl" + "+", but that's not really the way I want to solve it.

Thanks

Answer 1

As of Chrome 32.0.1700.76 the custom.css doesn't work as outlined below.

Please see an updated answer here: Custom.css has stopped working in 32.0.1700.76 m Google Chrome update

The old way is as follows:

Go to the following directory:

%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\

Mac:

~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

and open the Custom.css file. If it doesn't exist, create one.

Add the following lines:

body.platform-windows .monospace, 
body.platform-windows .source-code, 
td.webkit-line-content {
  font-size: 15px !important;
  font-family: Consolas, Lucida Console, monospace !important;
  tab-size: 2;
}

All you're doing is customizing classes used internally by Chrome. The .monospace class is pretty self evident. The .source-code class affects items in your developer tools (F12). The one that you are looking for is the td.webkit-line-content, it's the one that applies style to the line items when you choose to View page source.

You can also edit the line numbers as well by adding styles for td.webkit-line-number and can also edit the line number background by adjusting the style for div.webkit-line-gutter-backdrop.

Cheers.

Answer 2

As Jeff Johnson said - for Mac the Stylesheet is under:

~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css