There are two best and easiest ways to Configure emacs for editing HTML Files that contain JavaScript.
- Using multi-web-mode
- Using web-mode-el
Both of these methods are the most suitable ones to Configure emacs for editing HTML files that contain not only JavaScript but can be used for the HTML files which contain CSS, PHP, JSP as well. One just needs to Paste some code Snippets into the main file and the work will be done.
Using multi-web-mode: It is a very easy and simple way to configure emacs. One just needs to configure their preferred modes in their .emac files like this:
(require 'multi-web-mode)
(setq mweb-default-major-mode 'html-mode)
(setq mweb-tags
'((js-mode "<script[^>]*>" "</script>")
(css-mode "<style[^>]*>" "</style>")))
(setq mweb-filename-extensions '("htm" "html" "phtml"))
(multi-web-global-mode 1)
Note: Also if you want to configure emacs for editing HTML files containing other Languages like PHP you can simply include PHP tag description also into the “setq mweb-tags”.
Multi-web-mode: Below is a simple step to Install. Open your .emacs file and add the below code over there.
(require 'multi-web-mode)
(setq mweb-default-major-mode 'html-mode)
(setq mweb-tags
'((php-mode "<\\?php\\|<\\? \\|<\\?=" "\\?>")
(js-mode "<script[^>]*>" "</script>")
(css-mode "<style[^>]*>" "</style>")))
(setq mweb-filename-extensions '("php" "htm" "html" "ctp"
"phtml" "php4" "php5"))
(multi-web-global-mode 1)
Also, if we talk about the Usage of the Multi web mode, then it basically binds the following keystrokes:
- M-<f11>: This stroke prompts the user to override the default major mode.
- M-<f12>: This stroke prompts the user to override the calculated extra indentation.
So this is how we can configure Emacs for editing HTML files that contain JavaScript.
Using web-mode-el: This way of configuring emacs is simplest and easiest. We can use major mode “web-mode.el” for this kind of usage where we want to edit HTML files that have JavaScript, CSS, JAVA(JSP), PHP. “Web-mode.el” makes the syntax highlighted and also makes indentation according to the type of the block.
Web-mode-el: One can use this by:
(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.html$" . web-mode))
Example: Below given example shows the use of web-mode-el. In this code, we have Used HTML, JavaScript, CSS, PHP.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> H1 { } color: #0a @; </style> <script type="text/html"> <span></span> </script> <?php // TODO $s = "a $var in a string": ?> </head> <body readonly class="wrapper" style="width: 100%" data-value="l" ng-init="count=8" > <h1>Hello Geeks!</h1> <core-icon></core-icon> <?php if ($x): ?> <span></span> <?php endif; ?> </body> </html> |
Output: Below is the output for the same.
Simple Output web Page.
So we can see that our code has been Smartly Indented and also Compatible with many languages. So these were the two best and easiest ways to Configure emacs for editing HTML Files that contain JavaScript.
Reference: https://web-mode.org/