In a (lsp & web-mode) buffer; "function", "if", "async" are all the same color, I tried to change "if" face with the following:

(defface xxx-font-lock-face
  '((t (:foreground "yellow" :weight bold))))

(font-lock-add-keywords 'web-mode
  '(("\\<\\(if\\)" . xxx-font-lock-face)))

But this doesn't work. When I M-x describe-face it describes "web-mode-keyword-face".

I tried diving in the web-mode.el file, defining a new face "web-mode-xxx-face" :

(defface web-mode-xxx-face
   '((t (:foreground "red" :weight bold)))
   :group 'web-mode-faces)

And then I tried to apply this to the "function" keyword by replacing web-mode-keywords-face at line 2016 in the file where it seemed to bind "function" to "web-mode-keyword-face". But it didn't had any effect and function is still described as "web-mode-keyword-face" in a js file.


EDIT: As stated by @roomworoof the solution was the following (you need to eval some parts of the code after 'web-mode has loaded like this:)

(defvar xxx-mode-js-keywords                                                                                       
  (regexp-opt '("if")))                                                                                           
(defvar xxx-mode-js-font-lock-keywords                                                                             
  (cons (concat "\\([ \t}{(]\\|^\\)\\(" xxx-mode-js-keywords "\\)\\_>") '(2 'xxx-mode-keyword-face)))               
(with-eval-after-load 'web-mode                                                                                   
(add-to-list 'web-mode-javascript-font-lock-keywords xxx-mode-js-font-lock-keywords)                               

1 Answer 1


I hope my unskilled code will help.

;; new face to separate from original `web-mode-keyword-face`.
(defface my-web-mode-keyword-face
  '((t :inherit font-lock-keyword-face))
  "My face."
  :group 'web-mode-faces)

;; keywords to overwrite with new face.
(defvar my-web-mode-javascript-keywords
  (regexp-opt '("if")))

;; map the keywords to new face.
(defvar my-web-mode-javascript-font-lock-keywords
  (cons (concat "\\([ \t}{(]\\|^\\)\\(" my-web-mode-javascript-keywords "\\)\\_>") '(2 'my-web-mode-keyword-face)))

;; add to `web-mode-javascript-font-lock-keywords`.
(add-to-list 'web-mode-javascript-font-lock-keywords my-web-mode-javascript-font-lock-keywords)
  • It seems that it suppresses all the fontification of my .js buffers. Every keyword is described as "default" face. Maybe an error in the esoteric part which I never understood (\([][{[\"[}{}) ?
    Commented Mar 11, 2023 at 16:44
  • My bad, I just had to wrap (add-to-list ...) inside an (with-eval-after-load 'web-mode) block. Thanks a lot for your answer.
    Commented Mar 11, 2023 at 16:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.