Emacs `gql` template literals highlighting

This code is copied form emacs stack-exchange and adopted to work with web-mode for future reference.

Following is the link to the original stack exchange post:

https://emacs.stackexchange.com/questions/37918/how-to-highlight-graphql-template-literals-gql-in-jsx-files

step1: Install the packages

M-x package-install RET graphql-mode
M-x package-install RET mmm-mode

step2 : Put this in your config

;; Graphql
(require 'graphql-mode)
(require 'mmm-mode)

(mmm-add-classes
    '((js-graphql
          :submode graphql-mode
          :face mmm-declaration-submode-face
          :front "[^a-zA-Z]gql`" ;; regex to find the opening tag
          :back "`"))) ;; regex to find the closing tag
;; mode in the next line can be any major mode that you use for the particular file
;; The original answer from stackexchanged had js-mode,
;; I have replaced it with web-mode is that's what I use
(mmm-add-mode-ext-class 'web-mode nil 'js-graphql) 
(setq mmm-global-mode 'maybe)
;; Optional configuration that hides the background color for a highlighted block
;; I find it useful for debugging emacs, but when actually coding I dont want so much emphasis on submodes
(setq mmm-submode-decoration-level 0)