Sublime Forum

How to view in browser

#1

Hello, I’m just starting to learn writing HTML & CSS. But I cannot find a way of viewing my work in a browser.
I downloaded the trial version to Windows Vista which is using I.E.9 as its default browser.
(I also have Safari and Chrome available)
Assistance much appreciated.

0 Likes
How do I 'view in browser'
Creating someway to run my code in a browser
#2

To to Tools > New Plugin. Copy and paste this in the the plugin: [code]import sublime, sublime_plugin
import webbrowser

class OpenBrowserCommand(sublime_plugin.TextCommand):
def run(self,edit):
url = self.view.file_name()
webbrowser.open_new(url)[/code]

Save this in your User folder of Sublime’s packages.

Open up your User Keybindings. (Tools > Command Palette > “User Key bindings”)
Add this somewhere to the list: { "keys": "ctrl+shift+b"], "command": "open_browser" }

You can make the “keys” anything you want. Now when you’re in a HTML file, just press that command.

0 Likes
#3

Thanks, I’ve carried out your instruction and it still doesn’t work. I would expect viewing in browser command an essential item in a text editor. Looks like I might have to go back to Textpad. I’m still not getting the full tool bar that shows on top of the ST2 window in the PSD Tuts tutorial. I wonder if this is specifically a Windows problem?

0 Likes
#4

Do you mean Net Tuts? Because the “full tool bar” is called the command palette. To open it, press “ctrl+shift+p.” They type in what you want. To test if the plugin worked, though, do you mind opening ST2 and loading a HTML file. Then open the python terminal by pressing (control+`). Something should pop up at the bottom of the screen. Type or copy and paste the following: view.run_command("open_browser"). The html file should be opened in the browser. Let me know if it worked. If it did, you just need to fix your keybinding.

0 Likes
#5

[quote=“C0D312”]To to Tools > New Plugin. Copy and paste this in the the plugin: [code]import sublime, sublime_plugin
import webbrowser

class OpenBrowserCommand(sublime_plugin.TextCommand):
def run(self,edit):
url = self.view.file_name()
webbrowser.open_new(url)[/code]

Save this in your User folder of Sublime’s packages.

Open up your User Keybindings. (Tools > Command Palette > “User Key bindings”)
Add this somewhere to the list: { "keys": "ctrl+shift+b"], "command": "open_browser" }

You can make the “keys” anything you want. Now when you’re in a HTML file, just press that command.[/quote]

is possible to make this open in a particular browser?

0 Likes
#6

The webbrowser module opens in the default browser. However, you can change the plugin to: [code]import sublime, sublime_plugin
import webbrowser

class OpenBrowserCommand(sublime_plugin.TextCommand):
def run(self,edit):
url = self.view.file_name()
firefox = webbrowser.get(‘mozilla’)
firefox.open_new(url)[/code]

to always open in firefox. Thats about it…

0 Likes
#7

Hi I am trying to do something very similar, I am trying to make a plugin that will open a file in the browser just like the code you posted here except I need to do 2 things differently first.

  1. I need to make it open ANY file type in the browser

  2. I need to change the path before it is sent to the browser…

I need to replace E:\Server\htdocs\ in the file path with http://localhost/ and then open the corrected path in the browser

I would appreciate any help

0 Likes
#8

not the best solution (im not familiar with python and regex (have to learn it :wink:) but here is my solution for opening in browser, if executed from the “htdocs” directory it runs in browser with "http://localhost/, not the best but it works

import sublime, sublime_plugin
import webbrowser

class OpenBrowserCommand(sublime_plugin.TextCommand):
   def run(self,edit):
      url = self.view.file_name()
      print url
      url = url.replace('\\', '/')
      # replace with your own paths
      url = url.replace('D:/xampp-win32-1.7.4-VC6/xampp/htdocs', 'http://localhost')
      webbrowser.open_new(url)

if anybody have a better solution i would love to see it

0 Likes
#9

Hello!
Thanks for the little script, C0D312: D

It has helped, I even extended a little more to make it more customizable. I do not know Python but I needed to open the files in different browsers and not just one, I began to investigate …

Here is the script somewhat improved:

To to Tools > New Plugin. Copy and paste this in the the plugin:

[code]
import sublime, sublime_plugin
import webbrowser

class OpenBrowserCommand(sublime_plugin.TextCommand):
def run(self,edit,keyPressed):
url = self.view.file_name()
if keyPressed == “1”:
navegator = webbrowser.get(“open -a /Applications/Google\ Chrome.app %s”)
if keyPressed == “2”:
navegator = webbrowser.get(“open -a /Applications/Firefox.app %s”)
if keyPressed == “3”:
navegator = webbrowser.get(“open -a /Applications/Safari.app %s”)
navegator.open_new(url)[/code]

Save this in your User folder of Sublime’s packages.

Open up your User Keybindings. (Tools > Command Palette > “User Key bindings”)
Add this somewhere to the list:

[code]{ "keys": "alt+1"], "command": "open_browser", "args": {"keyPressed": "1"}},
{ "keys": "alt+2"], "command": "open_browser", "args": {"keyPressed": "2"}},
{ "keys": "alt+3"], "command": "open_browser", "args": {"keyPressed": "3"}}[/code]

You can add more or remove browsers. You just have to add or modify the browser path to the key that is pressed and ready!

I hope you will help. Sorry for my English, I’m Spanish …

P.D: The paths to the browsers in the example are for the Mac version.

Greetings! : D

0 Likes
#10

Hey CanarySpa,

Thanks for your script, pretty impressive for someone who doesn’t know Python!
Your script works, but in each case Safari, Chrome, Firefox etc. my file either shows up as text in the browser or just downloads…

I am using this method https://forum.sublimetext.com/t/preview-in-browser-on-local-test-server-with-localhost/5059/6&hilit=localhost#p29879

But it falls short cause you only get one default browser to preview, and you can’t set another browser with it…

Is there any conflict going on because of MAMP PRO??

Thanks so much!!!

0 Likes
#11

I’m sorry … But not knowing Python I do not know what methods or functions would be to do what you ask …

Web files that you open the browser as text or the download is because they are server-side languages​​. You can configure MAMP PRO, and have the root folder (documentRoot en MAMP PRO) of the server as “/”. Then in the plugin that we created in ST2 located in “YourUser / Library / Application Support / Users / filenameplugin.py, and modify the variable” url ":

[quote]import sublime, sublime_plugin
import webbrowser

class OpenBrowserCommand(sublime_plugin.TextCommand):
def run(self,edit,keyPressed):
url = “http://localhost:8888”
url += self.view.file_name()
if keyPressed == “1”:
navegator = webbrowser.get(“open -a /Applications/Google\ Chrome.app %s”)
if keyPressed == “2”:
navegator = webbrowser.get(“open -a /Applications/Firefox.app %s”)
if keyPressed == “3”:
navegator = webbrowser.get(“open -a /Applications/Safari.app %s”)
navegator.open_new(url)[/quote]

Hope you good! If so, tell me what’s wrong and help you again.
Again, sorry for my English …

0 Likes