A Set of HTML Snippets for Sublime Text 2-阿里云开发者社区

开发者社区> 开发与运维> 正文

A Set of HTML Snippets for Sublime Text 2

简介: <p style=""><img src="http://joshnh.com/wp-content/uploads/2012/11/A-Set-of-HTML-Snippets-for-Sublime-Text-2.png" alt="A Set of HTML Snippets for Sublime Text 2" style="border:0px; max-width:100%;

A Set of HTML Snippets for Sublime Text 2

DOWNLOAD

Considering how pop­u­lar my CSS snip­pets for Sublime Text have been, I thought I’d bet­ter col­late and release some of the HTML snip­pets I use reg­u­larly. Put simply, they allow you to turn this:

doctype

Into this:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="$1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>$2</title>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        $3
        <script src="js/main.js"></script>
    </body>
</html>

Note: the dol­lar signs indic­ate tab markers.

Further details can be found on the GitHub repos­it­ory. If you have any sug­ges­tions, send a pull request, or let me know in the com­ments below.

Installation instruc­tions

The easi­est way to install these snip­pets is through Package Control; simply search for ‘HTML snip­pets’. If you don’t use Package Control (you really should, it’s awe­some) then you can copy the set into the Sublime Text pack­ages folder. On a Mac this can be found in:

Library > Application Support > Sublime Text 2 > Packages

For Windows, it can be found in:

C: > Users > {username} > AppData > Roaming > Sublime Text 2 > Packages.

Stay tuned for a more in-depth art­icle on Sublime Text, includ­ing why I use it, a few hid­den tricks, some of my favour­ite pack­ages, and other work flow enhancements!

Update

If you are also using Emmet then you need to add the fol­low­ing to Emmet’s user set­tings file to avoid conflicts:

"disabled_single_snippets": "fig meta nav ol script style ul"

TWEET THIS

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章