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