emacs.d/lisp/init-html.org

This file sets up most of my webmode configurations. Webmode, in my opinion, is probably the best way to write html documents.

web-mode

use package-definition

  (use-package web-mode
    :config
    ;;I'm not sure what this does
    (setq web-mode-extra-constants '(("php" . ("CONS1" "CONS2"))))
    ;; <?php expands to <?php ?>
    (setq web-mode-enable-auto-pairing t)
    ;; Example - you may want to add hooks for your own modes.
    ;; when I open a css file use css-mode that way I can set up flychech with it!
    (setq web-mode-extra-auto-pairs
          '(("erb"  . (("beg" "end")))
            ("php"  . (("beg" "end")
                       ("beg" "end")))
            ))
    (setq web-mode-engines-alist
          '(("php"  . "\\.php\\.")
            ("django"  . "\\.djhtml\\.")))

    :mode
    (("\\.html?\\'" . web-mode)
      ("\\.php?\\'"  . web-mode)
      ("\\.phtml?\\'" . web-mode))
    )

web-mode hook

(add-hook 'web-mode-hook '(lambda ()
                            ;;(use-package emmet-mode )
                            ;; I've installed http://phpmd.org/ to check my php code using flycheck
                            ;; BUT flycheck mode does NOT support web-mode
                            ;; I can't get ggtags mode to workwell.
                            ;; (ggtags-mode 1)
                            ;; (diminish 'ggtags-mode)
                            ;; I have abbrev turned on for all prog-modes and all text modes.
                            ;; (abbrev-mode 1)
                            ;;emmet mode for html % css related things
                            (emmet-mode)
                            ;; turn urls into clickable links.
                            (goto-address-mode)
                            (local-unset-key (kbd "C-<return>"))
                            (define-key web-mode-map (kbd "C-<return>") '(lambda ()
                                                                           (interactive)
                                                                           (newline)
                                                                           (evil-open-above 0)))
                            ;;(push '("function" . ?𝆑) prettify-symbols-alist)
                            ;; I should not enable aggressive indent mode for soihub files.
                            ;; There's no need to have lots of git diffs with files.
                            ;; unset web mode's C-c C-h command, because I want to use that for 'help
                            (local-unset-key (kbd "C-c C-h"))
                            (global-set-key (kbd "C-c C-h") 'help)))

Emmet mode is awesome! You can specify complex html structures like so:

:PROPERTIES: :ID: 29e58b30-1f2a-477f-96ba-10dc97754364 :END:

#+BEGIN_SRC emacs-lisp (use-package emmet-mode :defer t :bind (("C-c j" . emmet-expand-line) ("C-j" . emmet-expand-line))) #+END_SRC

div>.col-sm-3*4>a[href="www.google.com"]>img

The above can be expanded into

#+BEGIN_SRC html

#+END_SRC

Trying to get web-mode to add italics to

:PROPERTIES: :ID: e350f24c-5e32-42a8-aa43-0885599f2475 :END: I want "some italic text" to be italic. I can apparently do this with font-lock mode, via searching. some italic text

  (add-hook 'web-mode-hook 'my/add-web-mode-richtext)

  (defun my/add-web-mode-richtext ()
    "Add bold and italic text with <b> and <em> tags."
    (interactive)
    (highlight-regexp "<em>\\([-_a-zA-Z0-9@!?$&*:#%, ]+\\)</em>" 'web-mode-italic-face)
    (highlight-regexp "<b>\\([-_a-zA-Z0-9@!?$&*:#%, ]+\\)</b>" 'web-mode-bold-face))

I'm supposed to use regexp-opt function to help me design a regexp, but this function doesn't help too much. It just says, if you see this string, or this string, or this string, ...

I've tried to get it to make an optimized regexp, but no such luck.

 (regexp-opt '(
               "<em>Hello how are you</em>"
               "<em>What are you doing today?</em>"
               "<em>My name is Earl.</em>"
               "<em>stnh satneuh staeoh ntshaoe sntaheu </em>"
               "<em>James bond is awesome </em>"
               "<em>lorum ipsum this can't keep going on.</em>"
               "<em> WHAT!? Come on! </em>"
               "<em> anything sing silly text .*<em>"
               ))

(regexp-opt '("<em>\\([a-zA-Z0-9 ]+\\)</em>"))

(regexp-opt '("<em></em>"))

I accomplish highlighting comments with this bit of

Probably the best way to do is to use font-lock-add-keywords and specify the mode I want.

(font-lock-add-keywords MODE KEYWORDS & optional HOW)

MODE has to be a symbol like 'web-mode, but KEYWORDS has several options.

MATCHER (MATCHER . SUBEXP) (MATCHER . FACENAME) (MATCHER . HIGHLIGHT) (MATCHER HIGHTLIGHT ...) (eval . FORM)

List faces display, lists all of the faces that one can use.

  (font-lock-add-keywords 'web-mode
                          '(("<em>\\([a-zA-Z0-9 ]+\\)</em>" . 'web-mode-italic-face)
                            ("<b>\\([a-zA-Z0-9 ]+\\)</b>"   . 'web-mode-bold-face)))

Css Settings

  (defun my-css-minify-function ()
    "Minifying my css files."
    (interactive)
    (when (eq major-mode 'css-mode)
      (async-shell-command (concat (format "yuicompressor --type css  %s -o "
                                           (buffer-file-name))
                                   (s-replace ".css" ".min.css" buffer-file-name)) "*css minifying*")))

  (add-to-list 'display-buffer-alist (cons "\\\*css minifying\\\*" (cons #'display-buffer-no-window nil)))

  (add-hook 'css-mode-hook '(lambda ()
                              (add-hook 'after-save-hook 'my-css-minify-function nil t)))

setting up default indent styles

This will probably come in handy some day.

(defun my-setup-indent (n)
  ;; web development
  (setq coffee-tab-width n) ; coffeescript
  (setq javascript-indent-level n) ; javascript-mode
  (setq js-indent-level n) ; js-mode
  (setq js2-basic-offset n) ; js2-mode
  (setq web-mode-markup-indent-offset n) ; web-mode, html tag in html file
  (setq web-mode-css-indent-offset n) ; web-mode, css in html file
  (setq web-mode-code-indent-offset n) ; web-mode, js code in html file
  (setq css-indent-offset n) ; css-mode
  )

(defun my-coding-style ()
  (interactive)
  (message "My coding style!")
  (setq indent-tabs-mode t) ; use tab instead of space
  (my-setup-indent 2) ; indent 4 spaces width
  )

COMMENT things I don't use

COMMENT php-mode

I don't use php-mode. php-mode cannot indent html and js code embedded in the buffer.

If you are doing something like wordpress hacking, where your buffer contains only php code, then php-mode is probably the most that you want to use.

COMMENT spell checking

;; use flycheck in php buffers as well. it's a real shame that flycheck doesn't support web-mode ;; (add-hook 'php-mode-hook (lambda () ;; ;; I have abbrev mode turned on for all prog-modes and all text-modes ;; ;; (abbrev-mode 1) ;; (define-key php-mode-map (kbd "C-") '(lambda () ;; (interactive) ;; (newline) ;; (evil-open-above 0))) ;; ;;(push '("function" . ?𝆑) prettify-symbols-alist) ;; (push '(">=" . ?≥) prettify-symbols-alist) ;; (push '("<=" . ?≤) prettify-symbols-alist) ;; (push '("->" . ?⟶) prettify-symbols-alist) ;; (push '("=>" . ?⟹) prettify-symbols-alist) ;; (push '("\\geq" . ?≥) prettify-symbols-alist) ;; (push '("\\leq" . ?≤) prettify-symbols-alist) ;; (push '("\\neg" . ?¬) prettify-symbols-alist) ;; (push '("\\rightarrow" . ?→) prettify-symbols-alist) ;; (push '("\\leftarrow" . ?←) prettify-symbols-alist) ;; (push '("\\infty" . ?∞) prettify-symbols-alist) ;; ;; this would make a comment look really weird <-- right-arrow ;; ;;(push '("-->" . ?→) prettify-symbols-alist) ;; (push '("<--" . ?←) prettify-symbols-alist) ;; (push '("\\exists" . ?∃) prettify-symbols-alist) ;; (push '("\\nexists" . ?∄) prettify-symbols-alist) ;; (push '("\\forall" . ?∀) prettify-symbols-alist) ;; (push '("\\or" . ?∨) prettify-symbols-alist) ;; (push '("\\and" . ?∧) prettify-symbols-alist) ;; (push '(":)" . ?☺) prettify-symbols-alist) ;; ;;(push '("):" . ?☹) prettify-symbols-alist) ;; (push '(":D" . ?☺) prettify-symbols-alist) ;; (push '("^_^" . ?☻) prettify-symbols-alist) ;; ;;(setq ac-sources '(ac-source-filename ac-source-words-in-buffer)) ;; ))

http://blog.binchen.org/posts/effective-spell-check-in-emacs.html

COMMENT php-eldoc ?

COMMENT some ac complete stuff that I don't really use

Do some spell checking in web-mode. I suppose it's possible. (use-package php-eldoc )

;; (setq web-mode-ac-sources-alist '(("css" . (ac-source-css-property ac-source-html-bootstrap+)) ("html" . (ac-source-words-in-buffer ac-source-abbrev ac-source-emmet-html-aliases ac-source-emmet-html-snippets ac-source-html-tag ac-source-html-attribute ac-source-html-attribute-2 ac-source-files-in-current-dir))))

;;("php" . (ac-source-words-in-buffer ac-source-filename))

provide this file

;; DO NOT SET ac-source yasnippet. autocomplete does NOT play nicely with ac-source yasnippet ;; ac-source-yasnippet ;; Here are some pages that talk about getting yas and autocomplete to play nicely together ;; http://sethlakowske.com/why-i-use-emacs/fix-yasnippet-and-autocomplete-tab-key-collision/ ;; https://stackoverflow.com/questions/19900949/how-to-make-auto-complete-work-with-yasnippet-and-abbrev ;; https://github.com/capitaomorte/yasnippet/issues/336 ;; https://emacs.stackexchange.com/questions/9670/yasnippet-not-working-with-auto-complete-mode ;;I'm being more and more annoyed with ac-php ;; https://github.com/xcwen/ac-php/ ;;ac-source-php

(provide 'init-html)