Wikia

Vim Tips Wiki

Changes: Automatically refresh display of html on saving file

Edit

Back to page

m (Changed mouse to tabbing over.)
(Format.)
 
(7 intermediate revisions by 2 users not shown)
Line 33: Line 33:
   
 
===Requires===
 
===Requires===
#MozRepl must be installed and running in Firefox
+
#MozRepl must be installed and running in Firefox. After installation, start it in Tools > MozRepl > Start.
 
#[http://netcat.sourceforge.net/ Netcat] (nc) must be on your path.
 
#[http://netcat.sourceforge.net/ Netcat] (nc) must be on your path.
 
#Firefox and Vim are both on the same machine (localhost).
 
#Firefox and Vim are both on the same machine (localhost).
Line 83: Line 83:
   
 
Now, when working on local html files, if you switch files often then just press <leader>ml and the file is shown in Firefox. Also, <leader>mh will bring you to ex mode where you can type in a URL and go there in Firefox etc.
 
Now, when working on local html files, if you switch files often then just press <leader>ml and the file is shown in Firefox. Also, <leader>mh will bring you to ex mode where you can type in a URL and go there in Firefox etc.
  +
  +
==Scrolling==
  +
I use these commands to scroll up and down:
  +
<pre>
  +
nnoremap <silent> <c-f><c-d> :call Firefox_scroll_down()<cr><br>
  +
function! Firefox_scroll_down()<br>
  +
silent call system("echo 'content.window.scrollByPages(1); repl.quit();' | nc -w 1 localhost 4242")<br>
  +
endfunction
  +
  +
nnoremap <silent> <c-f><c-u> :call Firefox_scroll_up()<cr><br>
  +
function! Firefox_scroll_up()<br>
  +
silent call system("echo 'content.window.scrollByPages(-1); repl.quit();' | nc -w 1 localhost 4242")<br>
  +
endfunction
  +
</pre>
  +
  +
==Next and previous tab==
  +
Here are commands for next and previous tab in Firefox.
  +
<pre>
  +
nnoremap <c-f><c-l> :call Firefox_next_tab()<cr><br>
  +
function! Firefox_next_tab()<br>
  +
call system("echo 'var tabc = window.getBrowser().tabContainer; var tabs = tabc.childNodes; var index = tabc.selectedIndex; if (index !== tabs.length -1) { tabc.selectedItem = tabs[index + 1]; } else { tabc.selectedItem = tabs[0]; } repl.quit()' | nc -w 1 localhost 4242")<br>
  +
endfunction
  +
  +
nnoremap <c-f><c-h> :call Firefox_prev_tab()<cr><br>
  +
function! Firefox_prev_tab()<br>
  +
call system("echo 'var tabc = window.getBrowser().tabContainer; var tabs = tabc.childNodes; var index = tabc.selectedIndex; if (index === 0) { tabc.selectedItem = tabs[tabs.length - 1]; } else { tabc.selectedItem = tabs[index - 1]; } repl.quit()' | nc -w 1 localhost 4242")<br>
  +
endfunction
  +
</pre>
   
 
==See also==
 
==See also==
Line 88: Line 116:
   
 
==Comments==
 
==Comments==
  +
Excellent! Needed something to replace LiveReload on my Linux workstation at work. This did the trick. Thanks.
  +
----
  +
Maybe need to add <code>:redraw</code> or <code>:redraw!</code> after reload if web page. --July 22, 2014

Latest revision as of 05:49, July 28, 2014

Tip 1656 Printable Monobook Previous Next

created June 15, 2010 · complexity basic · author A generic person · version 7.0


Editing HTML in Vim is a lot nicer if you can see updates in Firefox without needing to remove your hands from the keyboard. With MozRepl and a little vimrc script, you can do just that!

The bad old wayEdit

You are probably all too familiar with this annoying mini-workflow:

  • Edit your HTML/CSS file.
  • Hit save in Vim.
  • CMD/CNTRL/ALT + TAB over to Firefox.
  • Press Ctrl-R in Firefox to refresh.
  • CMD/CNTRL/ALT + TAB back to Vim.
  • Do it again and again, wincing a little bit each time.

The joyful new Vim + MozRepl wayEdit

With the little vimrc + MozRepl hack shown below, all you need to do is:

  • Edit your HTML/css file.
  • Hit save in Vim – Firefox will refresh automatically, preserving its scroll offsets!

This integration is no where near as fancy as the Emacs MozRepl binding, but this one feature makes it super useful.

Vim + MozReplEdit

When editing an .html,.css, or .gtpl file, make Firefox refresh after the buffer is saved, preserving the current scroll offset.

RequiresEdit

  1. MozRepl must be installed and running in Firefox. After installation, start it in Tools > MozRepl > Start.
  2. Netcat (nc) must be on your path.
  3. Firefox and Vim are both on the same machine (localhost).

How it worksEdit

I use echo + netcat (nc) to send a dopey little MosRepl script (see below) to Firefox. All the output is tossed away (2>&1 > /dev/null) because MozRepl is chatty.

Global variables are used (vimXo, vimYo) to capture the X,Y offset of the web page for Vim. Maybe there's a way to not use a global, but I don't know what that might be. After saving the buffer and reloading the browser, scroll to the X,Y offset.

See also:

Code for vimrcEdit

autocmd BufWriteCmd *.html,*.css,*.gtpl :call Refresh_firefox()
function! Refresh_firefox()
  if &modified
    write
    silent !echo  'vimYo = content.window.pageYOffset;
          \ vimXo = content.window.pageXOffset;
          \ BrowserReload();
          \ content.window.scrollTo(vimXo,vimYo);
          \ repl.quit();'  |
          \ nc -w 1 localhost 4242 2>&1 > /dev/null
  endif
endfunction

- added "-w 1" flag to netcat to solve occasional hung connections

A few additionsEdit

To put in vimrc:

command! -nargs=1 Repl silent !echo
      \ "repl.home();
      \ content.location.href = '<args>';
      \ repl.enter(content);
      \ repl.quit();" |
      \ nc localhost 4242

nmap <leader>mh :Repl http://
" mnemonic is MozRepl Http
nmap <silent> <leader>ml :Repl file:///%:p<CR>
" mnemonic is MozRepl Local
nmap <silent> <leader>md :Repl http://localhost/
" mnemonic is MozRepl Development

Now, when working on local html files, if you switch files often then just press <leader>ml and the file is shown in Firefox. Also, <leader>mh will bring you to ex mode where you can type in a URL and go there in Firefox etc.

ScrollingEdit

I use these commands to scroll up and down:

nnoremap <silent> <c-f><c-d> :call Firefox_scroll_down()<cr><br>
function! Firefox_scroll_down()<br>
  silent call system("echo 'content.window.scrollByPages(1); repl.quit();' | nc -w 1 localhost 4242")<br>
endfunction

nnoremap <silent> <c-f><c-u> :call Firefox_scroll_up()<cr><br>
function! Firefox_scroll_up()<br>
  silent call system("echo 'content.window.scrollByPages(-1); repl.quit();' | nc -w 1 localhost 4242")<br>
endfunction

Next and previous tabEdit

Here are commands for next and previous tab in Firefox.

nnoremap <c-f><c-l> :call Firefox_next_tab()<cr><br>
function! Firefox_next_tab()<br>
  call system("echo 'var tabc = window.getBrowser().tabContainer; var tabs = tabc.childNodes; var index = tabc.selectedIndex; if (index !== tabs.length -1) { tabc.selectedItem = tabs[index + 1]; } else { tabc.selectedItem = tabs[0]; } repl.quit()' | nc -w 1 localhost 4242")<br>
endfunction

nnoremap <c-f><c-h> :call Firefox_prev_tab()<cr><br>
function! Firefox_prev_tab()<br>
  call system("echo 'var tabc = window.getBrowser().tabContainer; var tabs = tabc.childNodes; var index = tabc.selectedIndex; if (index === 0) { tabc.selectedItem = tabs[tabs.length - 1]; } else { tabc.selectedItem = tabs[index - 1]; } repl.quit()' | nc -w 1 localhost 4242")<br>
endfunction

See alsoEdit

CommentsEdit

Excellent! Needed something to replace LiveReload on my Linux workstation at work. This did the trick. Thanks.


Maybe need to add :redraw or :redraw! after reload if web page. --July 22, 2014

Around Wikia's network

Random Wiki