8

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

drbunsen
  • 10,139
  • 21
  • 66
  • 94
  • Do you know how to do this in TM? I can't recall the original source. – drbunsen Sep 10 '11 at 13:50
  • A possible solution on a Mac is [marked](http://markedapp.com/), which can work with a variety of editors. Unfortunately, it does not update dynamically. – drbunsen Sep 10 '11 at 13:58
  • Well, I'm not a TextMate user :-) What I'm trying to say dr.bunsen, is that Vim was not designed for TextMate users. Vim comes from another background, so if you really want to learn how to use it, learn the Vim way. After you become a fluent user, these things will be easily done. I see many users saying "How can I do this in Vim? TextMate did this way …" day by day. This makes me nervous. I know, it's a kind of religious war. – sidyll Sep 10 '11 at 14:02
  • Thanks sidyll, no worries though - I've been using Vim for a while. I'm not looking to duplicate a TM feature; rather, I'm simply looking for a way to render html dynamically using any text editor of choice. In my particular use case this happens to be Vim. I hope that makes sense. Thanks. – drbunsen Sep 10 '11 at 14:13
  • Certainly makes. I posted an answer with some things to help you with it. I had this already, it's quite useful, but didn't want to resemble TM in any way :-) – sidyll Sep 10 '11 at 14:18

3 Answers3

6

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.

sidyll
  • 57,726
  • 14
  • 108
  • 151
  • @dr.bunsen, the video says about Markdown, but all my answer is based on html files… that's you initial question, right? – sidyll Sep 10 '11 at 14:33
  • wow, this looks awesome! yes, i only care about html but, the video i linked to is in markdown. i will give your script a try and report back. thanks! – drbunsen Sep 10 '11 at 14:45
  • thanks, this worked perfectly. it isn't a dynamic solution, but i think given the available options, this will work the best. – drbunsen Sep 10 '11 at 22:11
  • Glad to help @dr.bunsen . This is very flexible, so you'll end up finding the best use of it. Check the documentation for auto commands and play with the event, like changing the BufWrite to a inserted text event. – sidyll Sep 11 '11 at 00:32
3

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

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.

romainl
  • 186,200
  • 21
  • 280
  • 313
  • thanks romainl, this is very clever! i think it would be perfect except the added overhead of remembering to remove the meta tag before publishing. – drbunsen Sep 11 '11 at 21:05
0

I use the (osx) kicker ruby gem which automatically runs on file changes:

kicker -e "osascript -e 'tell application \"WebKit\" to do JavaScript \"window.location.reload()\" in first document'"

Or stick it in a .kick file for more control over which files should trigger it and/or more actions:

process do |files|
  unless files.grep(/\.(html|css|js)$/).empty?
    execute("osascript -e 'tell application \"WebKit\"
      do JavaScript \"window.location.reload()\" in first document
    end tell'")
  end
end
alloy
  • 20,908
  • 2
  • 30
  • 40