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

Answer 1

You could assign your favorite editor to view the source from IE and FireFox.

View Webpage Source Code in Your Favorite Text Editor – Firefox

Use an Alternate Source Viewer with IE

Answer 2

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

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

Answer 3

On linux platform (Ubuntu) the Custom.css file is in folder:

~/.config/google-chrome/Profile #/User Stylesheets/Custom.css

Answer 4

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.