如何为包含JavaScript的HTML文件配置Emacs

有两种最好且最简单的方法可以配置Emacs以编辑包含JavaScript的HTML文件。

使用multi-web-mode
使用web-mode-el

这两种方法都是最适合的方法，不仅可以配置Emacs以编辑包含JavaScript的HTML文件，还可以用于包含CSS、PHP和JSP的HTML文件。只需将一些代码片段粘贴到主文件中即可完成工作。

使用multi-web-mode： 这是一种非常简单易用的配置Emacs的方法。只需将首选模式配置到.emac文件中，如下所示：

(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)

注意： 如果你想为编辑包含其他语言（如PHP）的HTML文件配置emacs，你可以将PHP标签描述也包含在“setq mweb-tags”中。

多Web模式： 以下是安装的简单步骤。打开你的.emacs文件，并在代码中加入下面的代码。

(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)

另外，如果我们谈论多网页模式的用法，那么它基本上绑定了以下按键：

M- ：该按键提示用户覆盖默认的主模式。
M- ：该按键提示用户覆盖计算出的额外缩进。

因此，这就是我们如何配置Emacs以编辑包含JavaScript的HTML文件。

使用web-mode-el： 这种配置Emacs的方式是最简单和最容易的。我们可以使用主模式”web-mode.el”来编辑包含JavaScript、CSS、JAVA(JSP)和PHP的HTML文件。”web-mode.el”将会对语法进行高亮并根据块的类型进行缩进。

Web-mode-el： 可以通过以下方式使用：

(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.html$" . web-mode))

示例：

下面给出的示例展示了web-mode-el的使用。在这段代码中，我们使用了HTML、JavaScript、CSS和PHP。

<!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>

输出：

如何为包含JavaScript的HTML文件配置Emacs