hemmet is a CLI-tool, that expands one-line templates to markup blocks in Haskell/HTML/CSS. Template language is similar to Emmet/ZenCoding but has strong BEM flavour :)
$ hemmet -e EXPRESSION
or
$ echo "EXPRESSION" | hemmet
See hemmet --help
for full options list.
Hemmet can expand templates into
react-flux
(react-flux Haskell library eDSL. Default renderer)
$ echo ":foo>.bar" | hemmet
divc_ "foo" $ do
divc_ "foo__bar" $ pure ()
html
$ echo ":foo>.bar" | hemmet html
<div class="foo">
<div class="foo__bar"></div>
</div>
css
$ echo ":foo>.bar" | hemmet css
.foo {
}
.foo__bar {
}
:block1>(.el1>(.el2)+.el3)+:block2
divc_ "block1" $ do
divc_ "block1__el1" $ do
divc_ "block1__el2" $ pure ()
divc_ "block1__el3" $ pure ()
divc_ "block2" $ pure ()
button:submit
buttonc_ "submit" $ pure ()
:foo>.bar~font_small~hidden_t
divc_ "foo" $ do
divc_ "foo__bar foo__bar_font_small foo__bar_hidden_t" $ pure ()
:foo^theme-ocean
divc_ "foo theme-ocean" $ pure ()
:foo$bar^baz
divc_ ("foo baz" <> bar) $ pure ()
Note: at the moment it works only for react-flux
:form>.submit&button>.label
divc_ "form" $ do
divc_ "form__submit button" $ do
divc_ "button__label" $ pure ()
<:foo>.bar+.baz
divc_ "foo__bar" $ pure ()
divc_ "foo__baz" $ pure ()
- put a
hemmet
binary somewhere in$PATH
- add to your
.emacs
(defun hemmet-expand-region ()
(interactive)
(let ((f (lambda (b e)
(shell-command-on-region
b e "hemmet" t t "*hemmet error*" t))))
(if (region-active-p)
(funcall f (region-beginning) (region-end))
(funcall f (line-beginning-position) (line-end-position)))
))
;; bind using a function from "bind-key" package
(bind-key "C-c C-j" 'hemmet-expand-region haskell-mode-map)
;; or just use built-in function
(define-key haskell-mode-map (kbd "C-c C-j") 'hemmet-expand-region)