Emacs作为一款高度可定制的编辑器，支持通过配置实现不同编程语言的语法高亮，HTML模式的高亮设置可以通过原生功能和扩展插件两种方式完成，适配不同用户的使用需求。
基础HTML模式启用与默认高亮
Emacs自带了html-mode，默认情况下打开.html后缀的文件会自动进入该模式，同时启用基础的语法高亮。如果需要手动为当前缓冲区启用HTML模式，可以执行以下操作：
按下M-x（即Alt+x组合键），输入html-mode后回车，即可切换到HTML模式，此时标签、属性名、属性值、注释等内容会按照默认规则显示不同颜色。
如果默认高亮没有生效，可能是全局字体锁定模式没有开启，可以在配置文件中添加如下代码开启：
;; 开启全局字体锁定，确保各模式语法高亮生效 (global-font-lock-mode t) ;; 设置字体锁定的最大装饰级别，让高亮更丰富 (setq font-lock-maximum-decoration t)
自定义HTML高亮规则
如果默认的高亮规则不符合个人习惯，可以通过font-lock-add-keywords函数自定义HTML模式的高亮规则，比如单独高亮自定义标签或者特定属性。
高亮自定义HTML标签
假设我们需要高亮所有以app-开头的自定义组件标签，可以在配置中添加如下代码：
(defun my-html-custom-highlight ()
"为HTML模式添加自定义高亮规则"
(font-lock-add-keywords nil
'(("<\(/?app-[a-zA-Z0-9-]+\)" ;; 匹配app-开头的标签
1 '(:foreground "orange" :weight bold) t)))) ;; 标签名显示为橙色加粗
;; 将自定义高亮函数添加到html-mode的钩子中
(add-hook 'html-mode-hook #'my-html-custom-highlight)
高亮HTML特定属性
如果需要高亮data-开头的自定义属性，可以添加如下规则：
(defun my-html-attr-highlight ()
"高亮HTML中的data-属性"
(font-lock-add-keywords nil
'(("data-[a-zA-Z0-9-]+=" ;; 匹配data-开头的属性
0 '(:foreground "purple") t)))) ;; 属性显示为紫色
(add-hook 'html-mode-hook #'my-html-attr-highlight)
使用扩展增强HTML高亮
如果需要更完善的HTML高亮效果，比如支持HTML5新标签、内嵌CSS和JavaScript的高亮，可以安装web-mode扩展，它是一款专门用于编辑网页相关文件的Emacs模式，高亮功能比原生html-mode更强大。
安装web-mode
如果使用package.el管理Emacs插件，可以按下M-x输入package-install回车，再输入web-mode回车完成安装。
配置web-mode作为HTML默认模式
安装完成后，在配置文件中添加如下代码，让.html文件自动使用web-mode打开：
(require 'web-mode)
(add-to-list 'auto-mode-alist '("\.html\'" . web-mode))
;; 设置web-mode中HTML内容的缩进为2空格
(setq web-mode-markup-indent-offset 2)
;; 设置web-mode中CSS内容的缩进为2空格
(setq web-mode-css-indent-offset 2)
;; 设置web-mode中JS内容的缩进为2空格
(setq web-mode-code-indent-offset 2)
启用web-mode后，HTML标签、属性、CSS样式、JavaScript代码会被自动区分高亮，还支持不同区块的折叠功能，大幅提升网页代码编辑效率。
常见问题排查
- 如果高亮没有生效，先检查是否开启了
global-font-lock-mode，可以通过M-x global-font-lock-mode切换状态。 - 自定义高亮规则不生效，需要确认规则是否添加到了
html-mode-hook或者web-mode-hook中，避免添加到了错误的模式钩子。 - 颜色显示异常可能是当前主题不支持对应的face设置，可以更换Emacs主题或者手动指定face的前景色和背景色。
通过以上方法，就可以根据自己的需求灵活设置Emacs中HTML模式的高亮显示，让代码编辑过程更顺畅。
EmacsHTML_modesyntax_highlightingEmacs_configuration修改时间：2026-06-26 15:12:34