Take the 2-minute tour ×
Ask Different is a question and answer site for power users of Apple hardware and software. It's 100% free, no registration required.

As a new convert to Safari, I am astonished by how unbearably ugly default page source view is.
The font is miserably small and unaliased, leave alone color highlighting.

Is there a way to enhance Safari's View Source feature or seamlessly replace it?

I'm looking for:

  • reasonable default font, customizable is better;
  • basic HTML/JS syntax highlighting;
  • working on Lion.

Please refrain from suggesting viewing source with Web Inspector: it is nice but isn't convenient for quick source browsing.

share|improve this question
1  
In fact, I just noticed Cmd + works in this window so it's not that bad. Once you zoom in, antialiasing turns on. –  Dan Sep 28 '11 at 15:38
    
+1 Great question! –  daviesgeek Sep 28 '11 at 16:30
    
+1 @Dan Thanks for the Cmd+ tip! (useful especially on 13"...) –  Martin S. Stoller Oct 4 '11 at 20:20

4 Answers 4

up vote 9 down vote accepted

BetterSource

It's similar to the view source in Chrome in a lot of ways:

  • It has syntax highlighting and line numbers
  • It's opened in a tab instead of a window
  • Uses the default monospace font specified in preferences instead of Monaco 12

Limitations:

  • Line numbers are included in selections
  • The source view cannot be opened with a shortcut
  • Takes slightly longer to appear than the normal source window

Setting a default zoom level in a custom style sheet

The custom style sheet you can specify in the Advanced tab of the preferences also affects the view source window. I don't know how to target it specifically, but this would apply a default zoom level to both it and website content:

body { zoom: 125%; }

view source in TextMate.scpt

tell application "Safari" to tell document 1
    repeat 100 times
        if (do JavaScript "document.readyState") is "complete" then exit repeat
        delay 0.05
    end repeat
    set src to source
    set u to URL
end tell

try
    tell application "TextMate"
        open POSIX file u
        activate
    end tell
on error
    set f to do shell script "f=`echo " & quoted form of u & " |
    sed 's|.*://||;s|/$||;s|:|-|g;s|/|-|g'`; echo \"/tmp/view-source-$f.html\""
    do shell script "/bin/echo " & quoted form of src & " > " & quoted form of f
    set f to POSIX file f
    tell application "TextMate"
        activate
        open f
    end tell
end try
share|improve this answer
    
This is one hell of an answer! Thanks. –  Dan Sep 28 '11 at 16:26

Take a look at this Safari extension:

enter image description here

BetterSource Safari 5 Extension

BetterSource shows the document source in a new tab, with line numbers, and colour syntax highlighting.

share|improve this answer
    
Thanks. This is slightly confusing because the old View Source menu is still there and I keep choosing it. But I guess it's certainly a nice option. –  Dan Sep 28 '11 at 16:05

You need to go to System Preferences - General and at the bottom set the minimum font size for antialiasing to 4 pixels. That way you'll get antialiasing for small fonts.

(I never understood why they have to let you select that - under 8px fonts are just not readable without antialiasing)

share|improve this answer
    
For some reason, even after ensuring it's set to 4 pixels, I still get the source unaliased unless I zoom in. And I had 4 pixel by default on my 17' MBP. –  Dan Oct 4 '11 at 21:30
1  
You're right... The culprit seems to be the Monaco font which doesn't antialias even at point size 10. Nothing about that font seems to be out of the ordinary. Some sleuthing in the .nib files seems to show that Safari might use WebKitFixedFont as a preference key - but it also has Monaco hardcoded. See strings /Applications/Safari.app/Contents//Resources/English.lproj/HTMLSource.nib/object‌​s.nib and opensource.apple.com/source/WebKit/WebKit-7534.48.3/win/… –  w00t Oct 5 '11 at 16:44

If you go to Safari's preferences > Advanced and set "Never use font sizes smaller than" to 11, it should fix the anti aliasing problem.

For color highlighting you can use a SIMBL plugin called Safari Source that will do that for you.

UPDATE: Actually, in the Safari Source settings page (Safari>Preferences>Safari Source) you can set the font size for the view source page. So set it to anything above 11 and it'll antialias.

share|improve this answer

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.