StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>As of Chrome 32.0.1700.76 the custom.css doesn't work as outlined below.</p> <p>Please see an updated answer here: <a href="https://stackoverflow.com/questions/21207474/custom-css-stop-to-work-in-32-0-1700-76-m-google-chrome-update">Custom.css has stopped working in 32.0.1700.76 m Google Chrome update</a></p> <p>The old way is as follows:</p> <p>Go to the following directory:</p> <pre><code>%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\ </code></pre> <p>Mac: </p> <pre><code>~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css </code></pre> <p>and open the <code>Custom.css</code> file. If it doesn't exist, create one.</p> <p>Add the following lines:</p> <pre><code>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; } </code></pre> <p>All you're doing is customizing classes used internally by Chrome. The <code>.monospace</code> class is pretty self evident. The <code>.source-code</code> class affects items in your developer tools (F12). The one that you are looking for is the <code>td.webkit-line-content</code>, it's the one that applies style to the line items when you choose to <code>View page source</code>.</p> <p>You can also edit the line numbers as well by adding styles for <code>td.webkit-line-number</code> and can also edit the line number background by adjusting the style for <code>div.webkit-line-gutter-backdrop</code>.</p> <p>Cheers.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload