Sublime Plug-in Introduction

发表于 更新于 分类于 ，

Sublime Plug-in Introduction

  • MarkdownPreview
  • Emment

MarkdownPreview

将markdown转为HTML文档，并在浏览器中预览。可在markdown最前面添加[TOC],自动生成目录。

  • 生成HTML文档

ctrl+B,生成HTML文档。

  • 浏览器预览

ctrl+shift+P 打开 Package Control: ,输入markdownPreview，依次选择markdownPreview->markdown,在浏览器预览。

Emment

  • **简介:**Emmet是一个网络开发者工具包，缩写语法具有快速编写HTML、CSS的功能，可以极大地简化开发者的HTML＆CSS工作流程，提高前端开发效率。
  • **Emmet插件:**Emmet因其强大的功能，有多种编辑器支持。本文主要介绍sublime中的Emmet插件。
  • 注释:ctrl+/注释掉当前整行；c+tab生成 <!-- -->。

1. 文档初始化

HTML文档的四个基本标签<html>、<head>、<title>、<body>可以通过快捷键快速生成。

HTML5

ctrl+N 新建文件,另存为HTML格式。在文档内输入!或html:5, 按tab键，自动生成HTML5文档的四个基本标签如下：

![sublimetext-markdown-emment](http://p5tqakq50.bkt.clouddn.com/images/sublime/emment1.png)

XHTML

输入html:xt,按tab键,生成XHTML文档标签。

HTML4

输入html:4s,按tab键,生成HTML4文档标签。

2. 语法

下一级

> nav>ul>li

1
2
3
4
5
<nav>
    <ul>
        <li></li>
    </ul>
</nav>

同级

+ div+p+bq

1
2
3
<div></div>
<p></p>
<blockquote></blockquote>

上级

^ div>p>span+em^bq

1
2
3
4
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

分组

  • 分组1:() div>(header>ul>li*2>a)+footer>p

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div>
        <header>
            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </header>
        <footer>
            <p></p>
        </footer>
    </div>

  • 分组2:() (div>dl>(dt+dd)*3)+footer>p

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div>
        <dl>
            <dt></dt>
            <dd></dd>
            <dt></dt>
            <dd></dd>
            <dt></dt>
            <dd></dd>
        </dl>
    </div>
    <footer>
        <p></p>
    </footer>

乘法

* ul>li*5

1
2
3
4
5
6
7
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

嵌套

h$[title=item$]{Header $}*3

1
2
3
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

倒序

ul>li.item$@-*5

1
2
3
4
5
6
7
<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>
- **从n开始:** `ul>li.item$@3*5`

1
2
3
4
5
6
7
<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

3. 标签属性

# -> id

<div id="header"></div>

.title

. -> class

<div class="title"></div>

form#search.wide

<form action="" id="search" class="wide"></form>

内部属性

[] p[title="段落标题"]

<p title="段落标题"></p>

内容

{} b{加粗文本}
<b>加粗文本</b>

-------------文章结束啦 ฅ●ω●ฅ 感谢您的阅读-------------