Search code examples
htmlsublimetext2markup

Sublime Text 2 HTML default markups?

Sorry for asking such basic question but I can't seem to find the answer anywhere.

How can I get ST2 to write the basic html markup structure in new files?

Solution

  • You can use the Emmet package.

    Installation

    The simplest method of installing Emmet (and any other package) is via the Package Control package. To install that, follow the instructions from the project's home page:

    The simplest method of installation is through the Sublime Text console. The console is accessed via the ctrl+` shortcut or the View > Show Console menu. Once open, paste the appropriate Python code for your version of Sublime Text into the console.

    import urllib2,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

    Next, open the command palette using the shortcut: CTRL + SHIFT + P and type: "install package" and press Enter.

    Type "Emmet" and select: Emmet (ex-Zen coding) for Sublime Text package.

    And that’s it. After selecting the package, Emmet will install. You'll get a notification once it's done.

    Use

    Emmet allows you to type CSS-like expressions that can be dynamically parsed to produce (amongst other things) HTML.

    For example, open a new file, type html:5, then press Ctrl + E. This will expand into:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>

    Emmet can do a lot more though, for example ul>li*3 will expand to:

    <ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

    I would recommend that you watch the getting started video and check out the docs. Integrating Emmet into your workflow is a real time saver.