Css Selector | |
Tag | |
Input Type | |
ID | |
Class | |
+ Text | |
<!-- Add your HTML Here -->
<h2 class="mainTitle">Features</h2><br>
<h3 class="mainTitle2">Syntax highlighting </h3><br>
<br>
<p >Displays HTML , CSS, Javascript in different colors according to the category of terms.<br>
HTML:<img style="position:relative;top:9px;margin:3px"src="help/images/syntaxHiglightingHtml.jpg"/><br>
<br>
CSS:<img style="position:relative;top:9px;margin:3px"src="help/images/syntaxHiglightingCss.jpg"/><br>
<br>
Javascript<img style="position:relative;top:9px;margin:3px"src="help/images/syntaxHiglightingJs.jpg"/><br>
</p><br>
<br>
<img width="250px" src="help/images/helloworld.jpg" style="margin:15px;float:right;clear:right"><h3 class="mainTitle2">Live Preview </h3><br>
<p >Real Time HTML CSS Preview.<br>
As you type, it will show the CSS & HTML updates you Edit in the code.<br>
No More switching between editor and browser again.<br>
<br>
* javascript is updated when html code is changed .<br>
</p><br>
<br>
<img width="250px" src="help/images/CodeFolding.jpg" style="margin:15px;float:right;clear:right"><h3 class="mainTitle2">Code Folding </h3><br>
<p >feature that allows the user to collapse (fold) code blocks(Html, Css, Javascript).<br>
Code Folding is available For HTML Tag ,Css statement ,Javascript Functions,Objects,Arrays .<br>
<br>
* click on the gutter to fold a block, again to unfold.<br>
</p><br>
<br>
<img width="250px" src="help/images/FullScreen.jpg" style="margin:15px;float:right;clear:right"><h3 class="mainTitle2">Fullscreen Mode </h3><br>
<p >To switch One Of the Code Editor (HTML - CSS - Javascript ) to full screen, select it then press F11.<br>
<br>
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>
<br>
* To return to normal view , press Esc or F11 again.<br>
</p><br>
<br>
<img width="250px" src="help/images/Themes.jpg" style="margin:15px;float:right;clear:right"><h3 class="mainTitle2">Themes </h3><br>
<p >Change The Look Of the Code Editor with More than 25 theme.<br>
<br>
* From Settings tab select the theme that suit with your. <br>
</p><br>
<br>
<img width="250px" src="help/images/Match.jpg" style="margin:15px;float:right;clear:right"><h3 class="mainTitle2">Matching tags </h3><br>
<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>
<br>
* not only tags but Brackets too. <br>
</p><br>
<br>
<img width="250px" src="help/images/AutoCompletion.jpg" style="margin:15px;float:right;clear:right"><h3 class="mainTitle2">Auto Completion </h3><br>
<p >showing suggestions while you type into the Editor,Code completion speed up the editing.<br>
<br>
* click Ctr+space to activate autocompletion anywhere.<br>
</p><br>
<br>
<img width="250px" src="help/images/FindingTag.jpg" style="margin:15px;float:right;clear:right"><h3 class="mainTitle2">Finding Tags </h3><br>
<p >Click an item on the preview panel, will scroll and highlight their own tag in the code area.<br>
<br>
* Still in beta not always working fine.<br>
</p><br>
<br>
<img width="250px" src="help/images/FrameWork.jpg" style="margin:15px;float:right;clear:right"><h3 class="mainTitle2">FrameWork</h3><br>
<p >Easily Add any frameWork (angularjs, jquery, Dojo, Ext Core, Mootools, jqueryui, prototypes,...).<br>
<br>
* you can also add any other frameWork if you know their URL .<br>
</p><br>
<br>
<h3 class="mainTitle2">Closing Tags</h3><br>
<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>
</p><br>
<br>
x
x