Web Mode
You can code websites with web-mode
or org-mode
, or web-mode
and org-mode
, or neither.
Here's some code:
(use-package web-mode
:commands (web-mode)
:mode (("\\.html" . web-mode)
("\\.htm" . web-mode)
; ("\\.tsx$" . web-mode)
; ("\\.mustache\\'" . web-mode)
; ("\\.phtml\\'" . web-mode)
; ("\\.as[cp]x\\'" . web-mode)
; ("\\.erb\\'" . web-mode)
("\\.sgml\\'" . web-mode))
:config
(setq web-mode-markup-indent-offset 2)
(setq web-mode-css-indent-offset 2)
(setq web-mode-code-indent-offset 2)
(setq web-mode-comment-style 2)
(setq web-mode-enable-auto-indentation nil)
(setq web-mode-enable-css-colorization t)
(setq web-mode-enable-block-face t)
(setq web-mode-enable-comment-keywords t)
(setq web-mode-enable-heredoc-fontification t)
;;lots of attribute styles available at web-mode.org
(set-face-attribute 'web-mode-css-at-rule-face nil :foreground "Pink3")
;Part face: can be used to set parts background and default foreground
;(see web-mode-script-face and web-mode-style-face which inheritate fromweb-mode-part-face)
(setq web-mode-enable-part-face t)
;; make these variables local
(make-local-variable 'web-mode-code-indent-offset)
(make-local-variable 'web-mode-markup-indent-offset)
(make-local-variable 'web-mode-css-indent-offset)
(setq web-mode-enable-html-entities-fontification t
web-mode-auto-close-style 2)
;start use smartparens to complete tags not webmode
(defun +web-is-auto-close-style-3 (_id action _context)
(and (eq action 'insert)
(eq web-mode-auto-close-style 3)))
;initialize smartparens mode to ensure sp-local-pair defined
(smartparens-mode t)
(sp-local-pair 'web-mode "<" nil :unless '(:add +web-is-auto-close-style-3));end with eval after load
;; let smartparens handle these
(setq web-mode-enable-auto-quoting nil
web-mode-enable-auto-pairing t)
(setq web-mode-engine "php")
;set some auto-pairs
(setq web-mode-extra-auto-pairs
'(("erb" . (("beg" "end")))
("php" . (("beg" "end")
("beg" "end")))
));end autopairing
(setq web-mode-engines-alist '(
("php" . "\\.html\\'")
("php" . "\\.php\\'")))
;; 1. Remove web-mode auto pairs whose end pair starts with a latter
;; (truncated autopairs like <?p and hp ?>). Smartparens handles these
;; better.
;; 2. Strips out extra closing pairs to prevent redundant characters
;; inserted by smartparens.
(dolist (alist web-mode-engines-auto-pairs)
(setcdr alist
(cl-loop for pair in (cdr alist)
unless (string-match-p "^[a-z-]" (cdr pair))
collect (cons (car pair)
(string-trim-right (cdr pair) "\\(?:>\\|]\\|}\\)+")))))
(setf (alist-get nil web-mode-engines-auto-pairs) nil)
;end use smartparens not webmode to complete autopairs
;; highlight matching tag
(setq web-mode-enable-current-element-highlight t)
(setq web-mode-enable-current-column-highlight t)
(setq html2text t)
;For <style> parts
(setq web-mode-style-padding 1)
;For <script> parts
(setq web-mode-script-padding 1)
;For multi-line blocks
(setq web-mode-block-padding 0)
;; colorize colors in buffers
(setq web-mode-enable-css-colorization t)
Company-Web
(use-package company-web
:commands (web-mode company-web-html)
:load-path company-web-p
:config
;(unless (assoc "Bootstrap" web-completion-data-sources)
;; (setq web-completion-data-sources
;; (cons (cons "Bootstrap" "/path/to/complete/data")
;; web-completion-data-sources)))
(add-to-list 'load-path company-web-completion-data-p)
;(describe-variable 'company-web-completion-data-p)
(require 'company)
(require 'company-web)
(require 'company-web-html)
);end company-web
;etags
(setq tags-table-list
'("~/.emacs.d/ctags2019"))
(setq company-etags-everywhere t)
(setq company-etags-ignore-case t)
;company bootstrap
(use-package company-bootstrap
:load-path company-bootstrap-p
:config
(require 'company-bootstrap)
);end ac-html-bootstrap
;require company-css
(require 'company-css)
(defun company-web-mode-hook ()
(set (make-local-variable 'company-backends) '(company-web-html company-bootstrap company-etags company-yasnippet company-css company-dabbrev-code company-dabbrev )))
;hook
:hook
(web-mode . (lambda ()
(progn
(highlight-indent-guides-mode -1)
(emmet-mode 1)
(company-mode 1)
(company-web-mode-hook))));end hook
(web-mode . (lambda ()
;; Make `emmet-expand-yas' not conflict with yas/mode
(setq emmet-preview-default t)
(emmet-mode)
));end hook
:bind (:map web-mode-map(
("<f4>" . php-mode)
("C-c C-v" . buffer-to-browser)
("C-t" . company-complete)
("C-v" . company-web-html)
("C-h" . helm-emmet)
("C-c C-p" . web-mode-element-beginning)
("C-c C-n" . web-mode-element-end)
("C-c C-c" . web-mode-element-content-select)
("TAB" . web-mode-fold-or-unfold)
("C-c C-i" . web-mode-element-child-fold-or-unfold)
("C-c C-s" . yas/insert-snippet)
))
);end use package web-mode
Skip Lines
(defun skip-to-next-blank-line ()
(interactive)
(let ((inhibit-changing-match-data t))
(skip-syntax-forward " >")
(unless (search-forward-regexp "^\\s *$" nil t)
(goto-char (point-max)))))
(defun skip-to-previous-blank-line ()
(interactive)
(let ((inhibit-changing-match-data t))
(skip-syntax-backward " >")
(unless (search-backward-regexp "^\\s *$" nil t)
(goto-char (point-min)))))
; web-beautify
(add-to-list 'load-path "path/to/web-beautify-20161115.2247/")
(require 'web-beautify)
Web Beautify
; web-beautify
(add-to-list 'load-path "path/to/web-beautify-20161115.2247/")
(require 'web-beautify)
Web-Mode Hydra:
;web-mode hydra
(defvar web-mode-title (with-octicon "globe" "Web Mode Control"))
;generate hydra
(pretty-hydra-define Web-Mode (:title web-mode-title :quit-key "q" :color blue )
("Mode"
(
("1" beginning-of-buffer "Go To Top Of Page")
("0" end-of-buffer "Go To Bottom Of Page")
("n" web-mode-element-end "Go Element End")
("p" web-mode-element-beginning "Go Element Beginning")
("F" web-mode-element-children-fold-or-unfold "Fold/Unfold Element Children")
("f" web-mode-fold-or-unfold "Fold/Unfold")
("&" web-mode-whitespaces-show "Toggle Show Whitespace" :toggle t)
("s" web-mode-element-content-select "Select Content")
("k" web-mode-element-clone "Clone Element" :color red)
);end mode
"Action"
(
("r" web-mode-element-wrap "Wrap Element In Tag" )
("m" web-mode-mark-and-expand "Mark/Expand Region" :color red )
("E" web-mode-dom-errors-show "Show Errors" )
("N" web-mode-dom-normalize "Normalize HTML" )
("B" web-beautify-html "Beautify HTML")
; ("I" highlight-indent-guides-mode "Show Indent Guides" :toggle t )
);end action
"Other"
(
("i" yas-insert-snippet "Insert Snippet" )
("e" helm-emmet "Insert Emmet Snippet")
("T" company-try-hard "Cycle Completion Backends")
("t" indent-for-tab-command "Style Html Region Indent")
("c" Css-Mode/body "Css-Mode Interface" :color blue)
( "R" Javascripts/body "Javascript Interface" :color blue)
( "w" Web-Development/body "Web Dev Interface" :color blue)
("h" hydra-helm/body "Return To Helm" :color blue )
("<SPC>" nil "Quit" :color blue)
);end other
);end hydra body
);end pretty-hydra-web-development
(bind-key "<C-m> v" 'Web-Mode/body)
Here's a screen shot: