Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to dynamically examine html output with vim?

When I write html in MacVim I keep the same file open in a web browser so that I can examine the html output. One of the things I dislike about this method is that I constantly have to leave vim, go to the browser, and reload the html to see the updates. Is there a more elegant solution with vim that will dynamically update html ouput as it is typed in vim? I seem to recall that Textmate could do this? Thanks.

UPDATE: I found the video I was trying to remember. You can find it here:

http://files.fletcherpenney.net/TextMate-Preview.mov

like image 710
drbunsen Avatar asked Sep 10 '11 12:09

drbunsen


2 Answers

Add this to your .vimrc:

" Refresh WebKit
nnoremap \r :Refresh<CR>

command! Refresh call RefreshWebKit() 

function! RefreshWebKit()
    silent !osascript -e 'tell application "WebKit"'
                    \ -e '  set p_url to URL of current tab of front window'
                    \ -e '  set URL of current tab of front window to p_url'
                    \ -e 'end tell'
endfunction

This will create a map, a command and a function. I could have joined them, but this way it it's more clear and I can reuse the function in other places.

The function calls a little AppleScript to set the URL of frontmost tab again, thus refreshing it. This will work under Safari and WebKit, but I can't guarantee that it works with other browsers. If not, google "refresh {browser} applescript" and use a different script.

The map just calls the command, which calls the function. So you can write your file and use it to refresh the browser without leaving Vim. Equally, use :Refresh to do the same.

Note that you may want to change some things:

  • The map itself, I used \r, use whatever you feel comfortable with.
  • The name of the function, if you want to avoid collisions with other existing functions
  • The browser. Here I used WebKit, which is not Safari. It's the nightly build of WebKit itself. Use Chrome, Firefox, or any other name (with the respective changes)

A quick note: the extra -e options passed to the program are just for the sake of readability. Do it in the fashion you want.


Take a look also in auto-commands (check :h autocmd.txt). This will let you do it in a more automatized way like:

:autocmd BufWrite *.html Refresh

This will call :Refresh every time you write a buffer for .html files. There are also events for inserted text and so on.

like image 77
sidyll Avatar answered Oct 14 '22 15:10

sidyll


I've seen a bunch of ways to do that:

  • a cross-platform ruby script
  • a cross-platform firefox extension
  • a beta Mac-only solution (new to me)

or a simple meta tag:

<meta http-equiv="refresh" content="15" />

I like lo-tech solutions to hi-tech problems so I actually use the meta tag but sidyll's solution seems excellent.

like image 41
romainl Avatar answered Oct 14 '22 15:10

romainl