Vim Tips Wiki

Preview current HTML file

Revision as of 18:51, March 14, 2013 by (Talk)

1,619pages on
this wiki
Tip 127 Printable Monobook Previous Next

created 2001 · complexity basic · version 6.0

This tip shows how to use Vim to view an html file, or a web page, in a web browser. If wanted, a text-based web browser can be used to read the text from an html page into a scratch buffer in Vim.



<title>Mary Johnson</title>



Mary Johnson's CSC 10 Home Page

My Bio:

I am a Biology major. I am taking this class because... I also would like to study programming languages such as Java, C#, and PHP. The system software I use most are windows operating system ... and the application software I use most are MS word .... I would like to develop software such as database applications, data mining applications, and video games. ...

Favorite website:

This is where I research news on Bioinformatics.

<a href="">This is a link</a>

<a href="">This is my CSC 10 course website</a>


<a href="">Simple Calculator</a>
<a href="">My Improved Calculator</a> </body>


From 256 Opening current Vim file in your Windows browser

  • TODO: Finish cleaning following notes.

On Windows, using <cWORD> to open the link at the cursor in a browser does not work when the URL is in an html tag surrounded by quotes. However, using <cfile> works for both situations: plain URL and URL between html tags.

" On Windows, open URL under cursor.
nnoremap <F8> :!start C:\progra~1\intern~1\iexplore.exe <cfile><CR>
nnoremap <F8> :!start C:\progra~1\mozill~1\firefox.exe <cfile><CR>
" On Windows, open current file in Internet Explorer.
nnoremap <F5> :update<Bar>silent !start c:\progra~1\intern~1\iexplore.exe file://%:p<CR>
" On Linux, open URL under cursor in Firefox.
nnoremap <F8> :silent !firefox <cfile><CR>

In the above, there is no space after ! and the Vim command has the form :!start program file which causes Vim (on Windows) to run the specified program with the file as an argument. If the program is not in a PATH directory, the full path to the program must be specified. If the program path contains spaces, it is necessary to put the path in quotes ("...").

If using <cfile> or <cWORD> does not suit a particular requirement, it is possible to use a pattern to select what is needed. For example, the following takes the first match on the current line which starts with 'http' and continues with non-whitespace characters (it finishes at the first space or tab, or at the end of the line):

nnoremap <F8> :execute 'silent ! start '.matchstr(getline('.'), 'http\S*')<CR>

On Windows 7 this opens the current file in Chrome (fix the path by replacing "MyName" with what it should be on your system).

nnoremap <silent> <F5> :update<Bar>silent !start "C:\Users\MyName\AppData\Local\Google\Chrome\Application\chrome.exe" "file://%:p"<CR>

Or it might be here:

nnoremap <silent> <F5> :update<Bar>silent !start "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" "file://%:p"<CR>

On Linux, use xdg-open to open the file using its default application. The first of the following mappings saves the current file, then opens it; the second opens the file under the cursor:

nnoremap <F5> :update<Bar>silent !xdg-open %:p &<CR>
nnoremap <F8> :silent !xdg-open <cfile> &<CR>

From 587 Preview current file in Mozilla through localhost

When editing an HTML file on Windows, enter the following to save the current file and open it in your default browser:

:update|silent ! start %:p

On Windows, the current file can be opened in its associated application using the start command of the cmd.exe shell. With this mapping, press F5 to save the current file and open it in its associated application:

nnoremap <silent> <F5> :update<Bar>silent ! start %:p<CR>

The space after ! is required (on Windows, a command of the form !start xxx causes Vim to run xxx asynchronously; Vim does not run start, whereas ! start xxx invokes the shell cmd.exe to run its start internal command operating on xxx). In the unlikely case that the associated application runs in a console (command prompt window), it would be better to add the /b option so the application runs in the same console as start. That is, change the command to start /b %:p.

It is convenient to leave the browser window open: switch back to Vim to do any further editing required, save the file, then switch to the browser and tell it to reload the file with a key like Ctrl-R or F5.

A Linux version of the above mapping would use a program like xdg-open:

nnoremap <F5> :update<Bar>silent !xdg-open %:p &<CR>
nnoremap <F5> :silent update<Bar>silent !xdg-open %:p &<CR>

From 684 Preview current HTML in browser on Mac OS X

  • TODO: Clean following.

There are a few tips on previewing current HTML documents in a Windows browser, but none I could find for Mac OS X. By studying the others, though, I stumbled on a mapping that works. The <CR> at the end anticipates the "Hit ENTER or type command to continue" message.

nnoremap <F5> :!open -a Safari %<CR><CR>

To expand on this:

general -- "open x" will open "x" with the default application ... "open -a applicationName x" will open "x" with application "applicationName"

general -- "<D-aKey>" creates a shortcut using the Command (Apple) key

improved(?) -- "nnoremap <silent> <D-p>f :exe ':silent !open -a /Applications/Path/To/ %'<CR>"

(prevents remapping, runs quietly, shortcut is now [Command+p,f] for "preview, firefox" ... helpful if you preview in multiple browsers)

improved(?) -- "nnoremap <silent> <D-p>p :exe ':silent !open %'<CR>"

(same, but creates a generic "preview" using default applications ... helpful if you only preview in that browser, or can use it on other file types)

other (open directory in Finder) -- "nnoremap <silent> <D-p>d :exe ':silent !open -a finder %:p:h'<CR>"

(%:p:h completely expands the file path and removes the file name so only directory is left)

other (apply same to netrw browser, ie, :Ex command) -- add to .vimrc/.gvimrc: "let g:netrw_browsex_viewer = 'open'" (this is not necessary starting with 7.2, netrw now uses "open" as the default for "x").

(when using netrw browser, hit "x" while cursor is on file name to open that file with the default application ... if the cursor is over a directory, it will open in Finder)

Also, for Mac users, here is a way to save the current PHP file then preview it through localhost (TODO see %:p:s?pat?sub? below for Vim procedure):

nnoremap <F5> :update<Bar>!open -a Google\ Chrome `echo http://localhost/${PWD\#*/*/*/*/*/}/%`<CR>

From 1015 Preview file on localhost

Using this mapping will save the current file (if changed), then preview it on localhost. For example, if you are editing file /var/www/html/one/two/my.html, pressing F5 will use Firefox to open http://localhost/one/two/my.html.

nnoremap <F5> :silent update<Bar>silent !firefox %:p:s?\(.\{-}/\)\{4}?http://localhost/?<CR>

The core command has the form !firefox %:p:s?pat?sub? which uses the shell to start Firefox to open the current file (%) with its name modified by forming the full path (:p) then substituting the pattern pat with sub.

The pattern is \(.\{-}/\)\{4} which finds exactly four occurrences of any character (.) repeated as few times as possible (\{-}) up to and including the next slash (/). If the file being edited is my.html in directory /var/www/html/one/two, the pattern matches /var/www/html/ (the first occurrence of four slashes, with any characters between).

From 201110 Preview current HTML in browser on Linux

This mapping allows you to use a browser to preview the HTML file currently being edited.

nnoremap <F5> :silent update<Bar>silent !firefox %:p &<CR>

If necessary, the current file is saved, then Firefox is used to open the file. Replace "firefox" with the name of another browser if wanted, such as "chromium-browser".

Open an HTML file in a browser

TODO: Put a link somewhere in this tip to the result of merging all the stuff on opening HTML files.

See also

Open web browser to display URL under cursor

Display information for word under cursor in a web browser

Configure so "view source" opens in Vim



I have removed the "Related plugins" section as the only plugin listed is obsolete and relies on Perl to do what can be done in plain Vim. JohnBeckett 10:16, April 18, 2012 (UTC)

I am working on merging a lot of tips related to opening HTML files in browsers, and documents in associated applications. I don't think anything more will be merged in to here. I will soon clean all this up and see how large the result is (some of it might then be moved elsewhere). JohnBeckett 11:21, April 26, 2012 (UTC)

In mappings, I am using F5 to open the current file and F8 to open the file under the cursor. Might rethink that after all merging complete. JohnBeckett 23:56, April 26, 2012 (UTC)

TODO: Probably need shellescape() or at least quotes in some of the mappings to handle embedded spaces. I think the Linux mappings also need & appended. JohnBeckett 05:01, April 27, 2012 (UTC)

Around Wikia's network

Random Wiki