如何让sublime Text 2支持在浏览器中预览

PS:sublime无法使用快捷键使HTML文件在浏览器中预览为前提

为快速在浏览器中预览网页,需通过如下步骤对配置文件进行修改:

步骤1.找到设置快捷键的文件Default(Windows).sublime-keymap和open_in_browser.py,如下图所示文件(我的文件路径为:C:\Users\Administrator\AppData\Roaming\Sublime Text 2\Packages\Default):

  • 注意:可根据自己电脑系统版本选择快捷键配置文件,后缀名为.sublime-keymap(我的版本为Windows)。

如何让sublime Text 2支持在浏览器中预览_第1张图片

这里写图片描述

步骤2.也可通过如下图方式找到设置文件(在Preferences中选择Browse Packages…)

如何让sublime Text 2支持在浏览器中预览_第2张图片

步骤3.在Default.sublime-keymap文件中添加如下语句,如下图所示:
{ “keys”: [“f12”], “command”: “open_in_browser” }

如何让sublime Text 2支持在浏览器中预览_第3张图片

f12为预览网页的快捷键,可根据自身喜好修改为其他,但不可与已有设置相同,避免发生冲突。open_in_browser为“设置使用浏览器文件”的文件名,同步骤1 open_in_browser.py文件。
  • 注意:sublime Text 2 使用的快捷键不支持大写字母。如,若上图中的“f12”设置为“F12”,则无法使用该键正确打开浏览器进行网页预览。

步骤4.可在任意HTML文件页面中使用快捷键F12打开浏览器预览该网页。

至此,完成设置。


另外:若,Packages中不存在open_in_browser.py文件,可自己添加。添加步骤如下:

步骤5.在sublime中选择工具,添加新的插件,如下图所示:

如何让sublime Text 2支持在浏览器中预览_第4张图片

步骤6.将新建插件文件中内容删除:

如何让sublime Text 2支持在浏览器中预览_第5张图片

步骤7.添加如下内容(使用的浏览器为系统默认浏览器):

import sublime, sublime_plugin
import webbrowser

class OpenInBrowserCommand(sublime_plugin.TextCommand):
    def run(self, edit):
        if self.view.file_name():
            webbrowser.open_new_tab("file://" + self.view.file_name())

    def is_visible(self):
        return self.view.file_name() and (self.view.file_name()[-5:] == ".html" or
            self.view.file_name()[-5:] == ".HTML" or
            self.view.file_name()[-4:] == ".htm" or
            self.view.file_name()[-4:] == ".HTM")

如何让sublime Text 2支持在浏览器中预览_第6张图片

步骤8.保存该文件为Python文件,如下图所示:

如何让sublime Text 2支持在浏览器中预览_第7张图片

后续步骤同步骤2至步骤4。

补充:若想要指定浏览器,可参考http://www.jianshu.com/p/39de5de5ad87 进行配置。

你可能感兴趣的:(sublime工具)