Highlight (and increase font) for specific words in the buffer when it's opened

Question

I'm looking for functionality that will allow me to highlight specific words of text when I open the buffer in specific mode, like it should work if you're in

• js2-mode
• web-mode
• vue-mode

and the words I'm looking for are

• props
• data
• computed etc

I have found highlight-phrase function, but I would like to change the font size of the found word. Any ideas?

Where do I start?

Answer 1

: hi-lock (the package highlight-phrase is from) can take any pattern and face. You can make your own face that has a larger font size; in this example I also made it blue bold:

(defface my/highlight
  '((t :foreground "blue" :weight bold :height 1.2))
  "My highlighting")

(defun my/highlight-words ()
  "Use hi-lock to highlight specific words"
  (hi-lock-face-buffer "\\b\\(props\\|data\\|computed\\|methods\\)\\b" 'my/highlight))

(add-hook 'js2-mode-hook #'my/highlight-words)
(add-hook 'web-mode-hook #'my/highlight-words)
(add-hook 'vue-mode-hook #'my/highlight-words)