96 lines
4.8 KiB
Org Mode
96 lines
4.8 KiB
Org Mode
#+TITLE: HTML layer
|
|
|
|
[[file:img/html.png]]
|
|
|
|
* Table of Contents :TOC_4_gh:noexport:
|
|
- [[#description][Description]]
|
|
- [[#features][Features:]]
|
|
- [[#install][Install]]
|
|
- [[#live-display-in-browser][Live display in browser]]
|
|
- [[#key-bindings][Key Bindings]]
|
|
- [[#web-mode][Web mode]]
|
|
- [[#cssscss][CSS/SCSS]]
|
|
|
|
* Description
|
|
This layer adds support for editing HTML and CSS.
|
|
|
|
** Features:
|
|
- Editing HTML and CSS file using [[http://web-mode.org/][web-mode]]
|
|
- Support for Sass/Scss and Less files
|
|
- Generate HTML and CSS coding using [[https://github.com/smihica/emmet-mode][emmet-mode]]
|
|
- Tags navigation on key ~%~ using [[https://github.com/redguardtoo/evil-matchit][evil-matchit]]
|
|
- Support for editing Slim and Pug templates using [[https://github.com/slim-template/emacs-slim][slim-mode]] and [[https://github.com/hlissner/emacs-pug-mode][pug-mode]]
|
|
- See the effects of typed HTML using [[https://github.com/skeeto/impatient-mode][impatient-mode]]
|
|
- imenu support for CSS and Sass through [[https://github.com/hlissner/emacs-counsel-css][counsel-css]]
|
|
|
|
* Install
|
|
To use this configuration layer, add it to your =~/.spacemacs=. You will need to
|
|
add =html= to the existing =dotspacemacs-configuration-layers= list in this
|
|
file.
|
|
|
|
SCSS linting requires SCSS-Lint version >= 0.43.0. You can get it from GitHub:
|
|
|
|
#+BEGIN_SRC command-line
|
|
gem install specific_install
|
|
gem specific_install https://github.com/brigade/scss-lint.git
|
|
gem specific_install https://github.com/Sweetchuck/scss_lint_reporter_checkstyle.git
|
|
#+END_SRC
|
|
|
|
* Live display in browser
|
|
Use ~SPC m i~ to enable impatient mode, opening a live view of a HTML file in
|
|
your browser. You may wish to enable impatient mode in referenced CSS or JS
|
|
files, too.
|
|
|
|
When the underlying file is an HTML file, ~SPC m i~ automatically opens the page
|
|
in the browser. For other buffers, a list of available views can be found on
|
|
http://localhost:8080/imp.
|
|
|
|
For more information visit the [[https://github.com/skeeto/impatient-mode/blob/master/README.md][help page on GitHub.]]
|
|
|
|
* Key Bindings
|
|
** Web mode
|
|
|
|
| Key Binding | Description |
|
|
|-------------+-----------------------------------------------------------|
|
|
| ~SPC m g p~ | quickly navigate CSS rules using =helm= |
|
|
| ~SPC m e h~ | highlight DOM errors |
|
|
| ~SPC m i~ | open live view in browser |
|
|
| ~SPC m g b~ | go to the beginning of current element |
|
|
| ~SPC m g c~ | go to the first child element |
|
|
| ~SPC m g p~ | go to the parent element |
|
|
| ~SPC m g s~ | go to next sibling |
|
|
| ~SPC m h p~ | show xpath of the current element |
|
|
| ~SPC m r c~ | clone the current element |
|
|
| ~SPC m r d~ | delete the current element (does not delete the children) |
|
|
| ~SPC m r r~ | rename current element |
|
|
| ~SPC m r w~ | wrap current element |
|
|
| ~SPC m z~ | fold/unfold current element |
|
|
| ~%~ | evil-matchit keybinding to jump to closing tag |
|
|
|
|
A transient-state is also defined, start it with ~SPC m .~ or ~, .~
|
|
|
|
| Key Binding | Description |
|
|
|-------------+----------------------------------------------------------------|
|
|
| ~?~ | Toggle full help |
|
|
| ~c~ | clone current element |
|
|
| ~d~ | delete (vanish) current element (does not delete the children) |
|
|
| ~D~ | delete current element and children |
|
|
| ~j~ | next element |
|
|
| ~J~ / ~gj~ | next sibling element |
|
|
| ~h~ | parent element |
|
|
| ~k~ | previous element |
|
|
| ~K~ / ~gk~ | previous sibling element |
|
|
| ~l~ | first child element |
|
|
| ~p~ | show xpath of current element |
|
|
| ~q~ | leave the transient-state |
|
|
| ~r~ | rename current element |
|
|
| ~w~ | wrap current element |
|
|
|
|
** CSS/SCSS
|
|
|
|
| Key Binding | Description |
|
|
|-------------+----------------------------------|
|
|
| ~SPC m g h~ | quickly navigate CSS rules |
|
|
| ~SPC m z c~ | fold css statement to one line |
|
|
| ~SPC m z o~ | unfold css statement to one line |
|