AkelEmmet - Emmet (ex Zen Coding) wrapper for AkelPad
Posted: Tue Jan 05, 2016 7:33 pm
AkelEmmet
AkelEmmet is an Emmet http://emmet.io (ex Zen Coding) wrapper for AkelPad.
Upgrade to AkelEmmet 1.2!
You need Scripts plugin to run this AkelEmmet wrapper. All other plugins are optional.
1. Installation
1.1 Downloading and unpacking
Download AkelEmmet 1.2 and unzip it to [AkelPad]\AkelFiles\Plugs\Scripts
1.2 Add menu entries for toolbar and context menu (optional)
Note: for menu entries you need ToolBar and ContextMenu plugins.
Call ContextMenu::Main plugin function (Options - Plug-ins...) and add following code at the end of ContextMenu::ShowMenu section:
Now add following code in ContextMenu::Edit menu section:
Click right mouse button on any place inside tool bar and add the following code at place you like most
1.3 Adding hotkey
Add hotkey [Ctrl+Enter] (or any of your choice) for calling AkelEmmet.js script.
Its default action is 'expand_abbreviation' - that is expand abbreviation.
You can do this by calling Scripts::Main (Alt-p, Scripts::Main, [Call]) and assigning key for AkelEmmet.js script.
To make hotkeys for various Emmet actions you need Hotkeys plugin.
To see some Emmet's logs you need to have Log plugin installed.
All plugins mentioned here are official and can be downloaded
from official plugins page at http://akelpad.sourceforge.net/en/plugins.php
2. Usage.
Call AkelEmmet.js with parameter `action` to exec any of supported Emmet actions.
`action` can be # of command from list (see source of AkelEmmet.js for full list of commands)
or name of Emmet action, e.g. 'match_pair_outward' or 'toggle_comment'
Examples:
Call("Scripts::Main", 1, "AkelEmmet.js") - to run default action which is 'expand_abbreviation'
Call("Scripts::Main", 1, "AkelEmmet.js", `-action=4`) - to run 'next_edit_point' action
Call("Scripts::Main", 1, "AkelEmmet.js", `-action='select_next_item'`) - to select next item
and so on.
You can set hotkeys for desired commands through Hotkey plugin.
Recommended hotkeys (its up to you):
[Ctrl+Enter] Expand Abbreviation Call("Scripts::Main", 1, "AkelEmmet.js")
[Ctrl+Shift+Enter] Wrap with Abbreviation Call("Scripts::Main", 1, "AkelEmmet.js", `-action=3`)
[Ctrl+Alt+Right] Emmet next edit point Call("Scripts::Main", 1, "AkelEmmet.js", `-action=4`)
[Ctrl+Alt+Left] Emmet previous edit point Call("Scripts::Main", 1, "AkelEmmet.js", `-action=5`)
[Alt+T] Toggle comment Call("Scripts::Main", 1, "AkelEmmet.js", `-action='toggle_comment'`)
* Note: toggle comment works for HTML/CSS files
3. Test
Type in abbreviation and press [Ctrl+Enter] if you defined it as a hotkey for default Emmet action to expand it.
Open empty document (Ctrl+n), type in following abbreviation and expand it:
Then save it as hi-emmet.html (Ctrl+s) for example and run it in your browser.
To test some CSS snippets open css file and try to expand
Note that same abbreviation for css and html files can expand differently.
4. Extending
You can put Emmet extensions into `Include\Emmet\ext` folder.
Extensions are simple .js files that uses Emmet modules and resources
to create new actions, modify existing ones etc.
When any Emmet action starts, all `*.js` files in `Include\Emmet\ext` folder will be eval'ed,
and all `snippets*.json` files will extend `snippets` Emmet object.
It allows you to extend and rewrite Emmet behaviour and snippets any way you want.
That's all. Good coding.
--
beotiger
P.S.
AkelEmmet is an Emmet http://emmet.io (ex Zen Coding) wrapper for AkelPad.
Upgrade to AkelEmmet 1.2!
You need Scripts plugin to run this AkelEmmet wrapper. All other plugins are optional.
1. Installation
1.1 Downloading and unpacking
Download AkelEmmet 1.2 and unzip it to [AkelPad]\AkelFiles\Plugs\Scripts
1.2 Add menu entries for toolbar and context menu (optional)
Note: for menu entries you need ToolBar and ContextMenu plugins.
Call ContextMenu::Main plugin function (Options - Plug-ins...) and add following code at the end of ContextMenu::ShowMenu section:
Now add following code in ContextMenu::Edit menu section:
Click right mouse button on any place inside tool bar and add the following code at place you like most
1.3 Adding hotkey
Add hotkey [Ctrl+Enter] (or any of your choice) for calling AkelEmmet.js script.
Its default action is 'expand_abbreviation' - that is expand abbreviation.
You can do this by calling Scripts::Main (Alt-p, Scripts::Main, [Call]) and assigning key for AkelEmmet.js script.
To make hotkeys for various Emmet actions you need Hotkeys plugin.
To see some Emmet's logs you need to have Log plugin installed.
All plugins mentioned here are official and can be downloaded
from official plugins page at http://akelpad.sourceforge.net/en/plugins.php
2. Usage.
Call AkelEmmet.js with parameter `action` to exec any of supported Emmet actions.
`action` can be # of command from list (see source of AkelEmmet.js for full list of commands)
or name of Emmet action, e.g. 'match_pair_outward' or 'toggle_comment'
Examples:
Call("Scripts::Main", 1, "AkelEmmet.js") - to run default action which is 'expand_abbreviation'
Call("Scripts::Main", 1, "AkelEmmet.js", `-action=4`) - to run 'next_edit_point' action
Call("Scripts::Main", 1, "AkelEmmet.js", `-action='select_next_item'`) - to select next item
and so on.
You can set hotkeys for desired commands through Hotkey plugin.
Recommended hotkeys (its up to you):
[Ctrl+Enter] Expand Abbreviation Call("Scripts::Main", 1, "AkelEmmet.js")
[Ctrl+Shift+Enter] Wrap with Abbreviation Call("Scripts::Main", 1, "AkelEmmet.js", `-action=3`)
[Ctrl+Alt+Right] Emmet next edit point Call("Scripts::Main", 1, "AkelEmmet.js", `-action=4`)
[Ctrl+Alt+Left] Emmet previous edit point Call("Scripts::Main", 1, "AkelEmmet.js", `-action=5`)
[Alt+T] Toggle comment Call("Scripts::Main", 1, "AkelEmmet.js", `-action='toggle_comment'`)
* Note: toggle comment works for HTML/CSS files
3. Test
Type in abbreviation and press [Ctrl+Enter] if you defined it as a hotkey for default Emmet action to expand it.
Open empty document (Ctrl+n), type in following abbreviation and expand it:
Code: Select all
!(h1{Hello world!}+ul>li*5>lorem50^^h1{Bye-bye})
To test some CSS snippets open css file and try to expand
Note that same abbreviation for css and html files can expand differently.
4. Extending
You can put Emmet extensions into `Include\Emmet\ext` folder.
Extensions are simple .js files that uses Emmet modules and resources
to create new actions, modify existing ones etc.
When any Emmet action starts, all `*.js` files in `Include\Emmet\ext` folder will be eval'ed,
and all `snippets*.json` files will extend `snippets` Emmet object.
It allows you to extend and rewrite Emmet behaviour and snippets any way you want.
That's all. Good coding.
--
beotiger
P.S.