1
<!-- Add your HTML Here  -->
2
 
3
<h2 class="mainTitle">Features</h2><br>
4
<h3 class="mainTitle2">Syntax highlighting </h3><br>
5
<br>
6
 <p >Displays HTML , CSS, Javascript in different colors according to the category of terms.<br>
7
HTML:<img style="position:relative;top:9px;margin:3px"src="help/images/syntaxHiglightingHtml.jpg"/><br>
8
<br>
9
CSS:<img style="position:relative;top:9px;margin:3px"src="help/images/syntaxHiglightingCss.jpg"/><br>
10
<br>
11
Javascript<img style="position:relative;top:9px;margin:3px"src="help/images/syntaxHiglightingJs.jpg"/><br>
12
</p><br>
13
<br>
14
<img width="250px" src="help/images/helloworld.jpg" style="margin:15px;float:right;clear:right"><h3 class="mainTitle2">Live Preview </h3><br>
15
 <p >Real Time HTML CSS Preview.<br>
16
As you type, it will show the CSS & HTML updates you Edit in the code.<br>
17
No More switching between editor and browser again.<br>
18
<br>
19
* javascript is updated when html code is changed .<br>
20
</p><br>
21
<br>
22
<img width="250px" src="help/images/CodeFolding.jpg" style="margin:15px;float:right;clear:right"><h3 class="mainTitle2">Code Folding </h3><br>
23
 <p >feature that allows the user to collapse (fold) code blocks(Html, Css, Javascript).<br>
24
Code Folding is available For HTML Tag ,Css statement ,Javascript Functions,Objects,Arrays .<br>
25
<br>
26
* click on the gutter to fold a block, again to unfold.<br>
27
</p><br>
28
<br>
29
<img width="250px" src="help/images/FullScreen.jpg" style="margin:15px;float:right;clear:right"><h3 class="mainTitle2">Fullscreen Mode </h3><br>
30
 <p >To switch One Of the Code Editor (HTML - CSS - Javascript ) to full screen, select it then press F11.<br>
31
<br>
32
Fullscreen Mode Will hide The preview panel and settings panel and keep only the active Editor.it will look like a simple code editor without preview.<br>
33
<br>
34
* To return to normal view , press Esc or F11 again.<br>
35
</p><br>
36
<br>
37
<img width="250px" src="help/images/Themes.jpg" style="margin:15px;float:right;clear:right"><h3 class="mainTitle2">Themes </h3><br>
38
 <p >Change The Look Of the Code Editor with More than 25 theme.<br>
39
<br>
40
* From Settings tab select the theme that suit with your. <br>
41
</p><br>
42
<br>
43
<img width="250px" src="help/images/Match.jpg" style="margin:15px;float:right;clear:right"><h3 class="mainTitle2">Matching tags </h3><br>
44
 <p >Highlight the start tag & end tag when clicking on one of them, so you can easily find out the start and end of specific Tag.<br>
45
<br>
46
* not only tags but Brackets too. <br>
47
</p><br>
48
<br>
49
<img width="250px" src="help/images/AutoCompletion.jpg" style="margin:15px;float:right;clear:right"><h3 class="mainTitle2">Auto Completion </h3><br>
50
 <p >showing suggestions while you type into the Editor,Code completion speed up the editing.<br>
51
<br>
52
* click Ctr+space to activate autocompletion anywhere.<br>
53
</p><br>
54
<br>
55
<img width="250px" src="help/images/FindingTag.jpg" style="margin:15px;float:right;clear:right"><h3 class="mainTitle2">Finding Tags </h3><br>
56
 <p >Click an item on the preview panel, will scroll and highlight their own tag in the code area.<br>
57
<br>
58
* Still in beta not always working fine.<br>
59
</p><br>
60
<br>
61
<img width="250px" src="help/images/FrameWork.jpg" style="margin:15px;float:right;clear:right"><h3 class="mainTitle2">FrameWork</h3><br>
62
 <p >Easily Add any frameWork (angularjs, jquery, Dojo, Ext Core, Mootools, jqueryui, prototypes,...).<br>
63
<br>
64
* you can also add any other frameWork if you know their URL .<br>
65
</p><br>
66
<br>
67
<h3 class="mainTitle2">Closing Tags</h3><br>
68
 <p >To easily write your code, LiveGap auto add the end tag when you close the start tag and its also know what tag is need to close. if your write <span style="color:red"> <</span><span style="color:red"> </span>, it will complete the right tag.<br>
69
</p><br>
70
<br>
71