CodeMirror plus Emmet Editor

CodeMirror plus Emmet Editor
Create html/css code faster with CodeMirror plus Emmet Editor!

CodeMirror plus Emmet Editor is a developer’s tool representing a combination of a text editor and a script for a quick and efficient HTML/CSS code creation.

With Emmet already embedded into CodeMirror you are not only able to enter and alter code but extend snippets, improve workflow and save time!

CodeMirror is one of default Joomla! text editors allowing to edit html/css code. However its main shortcoming is a necessity to type each code attribute, quotation and bracket separately instead of using hot keys.

But now, thanks to CodeMirror and Emmet integration, the process of coding is considerably simplified and speeded up! With CodeMirror plus Emmet Editor HTML tags are instantly transferred into structured code blocks.

CodeMirror plus Emmet Editor is an ideal tool for people who value time and efforts they invest into the projects they develop!

Check out how to use CodeMirror plus Emmet Editor description on the HOW TO USE tab above.

Let’s look at examples:

Initializators

If you enter CodeMirror plus Emmet Editor, type ! or html:5 and click Tab you will get your HTML5 doctype starting point!

  • html:5 or ! for HTML5 doctype;
  • html:xt for XHTML transitional doctype;
  • html:4s for HTML4 strict doctype. 

IDs, Text and Attributes Input

Emmet syntax is similar to CSS selectors so it will be rather easy to get used to it!
For example, if you want to indicate content for HTML elements use curly brackets and h1{foo} will transform into <h1>foo<h1>.
If attributes - square brackets: a[href=#] will transform into <a href="#"></a>etc.

Nesting

Nesting abbreviations allow building a new page by using just one line code:

  • < allows nesting elements inside each other;
  • + allows nesting elements near each other;
  • ^ allows climbing up the elements’ tree; 

Grouping

Grouping allows using nesting without turning the code into a complex set of operators.
For example, brackets use will transform (.foo>h1)+(.bar>h2) into

 
<div class="foo">
  <h1></h1>
</div>
<div class="bar">
  <h2></h2>
</div>
 

Implicit Tag Names

Each time you expand abbreviation a parent context is picked up and you don’t need to type the tag name.
For example, if you declare .item inside <ul> it will transform into <li class="item"></li>.
Implicit tag titles list:

  • Li for ul and ol;
  • tr for table, tbody, thead and ol;
  • td for tr;
  • option for select and optgroup.

Multiplication

By using * operator you can set amount of times the element needs to appear. For example, ul>li*3 will transform into:

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

Numbering

With $ operator you can easily numerate your elements.
For example, ul>li.item$*3 will transform into:

 
<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>
 

Emmet Shortcuts

  • Ctrl-E or Tab: Expand abbreviation
  • Ctrl-D: Balance Tag (matches opening and closing tag pair)
  • Shift-Ctrl-D: Balance Tag Inward
  • Shift-Ctrl-A: Wrap With Abbreviation
  • Ctrl-Alt-Right: Next Edit Point
  • Ctrl-Alt-Left: Previous Edit Point
  • Ctrl-L: Select line
  • Ctrl-Shift-M: Merge Lines
  • Ctrl-/: Toggle Comment
  • Ctrl-J: Split/Join Tag
  • Ctrl-K: Remove Tag
  • Shift-Ctrl-Y: Evaluate Math Expression
  • Ctrl-Up: Increment Number by 1
  • Ctrl-Down: Decrement Number by 1
  • Alt-Up: Increment Number by 0.1
  • Alt-Down: Decrement Number by 0.1
  • Ctrl-Alt-Up: Increment Number by 10
  • Ctrl-Alt-Down: Decrement Number by 10
  • Ctrl-.: Select Next Item
  • Ctrl-,: Select Previous Item
  • Ctrl-B: Reflect CSS Value

Press F11 when cursor is inside the editor to toggle full screen editing.
Esc can also be used to exit full screen editing.

Feel free to play with DEMO 3.x.

Login Information:

Front end:
Username: demo
Password: demo
Administrator:
Username: demoadmin
Password: demoadmin


Note: Due to security reason some component doesn't have full functionality there
Demo site resets every 3 hours.

Testimonials
Henrik Bundgaard, Senior Lecturer
“At last a concept with a content that can be easily edited. My students really like the use of sound, video and images and - they use it a lot in their daily activities. Even the text can be read alo...
Dedicated software development team
VISA, VISA Electron, Maestro, MasterCard, PayPal, American Express and others