Function: mhtml-ts-mode

mhtml-ts-mode is an autoloaded, interactive and byte-compiled function defined in mhtml-ts-mode.el.gz.

Signature

(mhtml-ts-mode)

Documentation

Major mode for editing HTML with embedded JavaScript and CSS.

Powered by tree-sitter.

In addition to any hooks its parent mode html-ts-mode might have run, this mode runs the hook mhtml-ts-mode-hook, as the final or penultimate step during initialization.

/ sgml-slash
C-c / sgml-close-tag
C-c 1 html-headline-1
C-c 2 html-headline-2
C-c 3 html-headline-3
C-c 4 html-headline-4
C-c 5 html-headline-5
C-c 6 html-headline-6
C-c 8 sgml-name-8bit-mode(var)/sgml-name-8bit-mode(fun)
C-c <left> sgml-skip-tag-backward
C-c <right> sgml-skip-tag-forward
C-c ? sgml-tag-help(var)/sgml-tag-help(fun)
C-c C-a sgml-attributes
C-c C-b sgml-skip-tag-backward
C-c C-c # html-id-anchor
C-c C-c - html-horizontal-rule
C-c C-c c html-checkboxes
C-c C-c f html-href-anchor-file
C-c C-c h html-href-anchor
C-c C-c i html-image
C-c C-c l html-list-item
C-c C-c n html-name-anchor
C-c C-c o html-ordered-list
C-c C-c r html-radio-buttons
C-c C-c u html-unordered-list
C-c C-d sgml-delete-tag
C-c C-e sgml-close-tag
C-c C-f css-cycle-color-format
C-c C-f sgml-skip-tag-forward
C-c C-j html-line
C-c C-n sgml-name-char
C-c C-o sgml-tag
C-c C-s html-autoview-mode(var)/html-autoview-mode(fun)
C-c C-t sgml-tag
C-c C-v browse-url-of-buffer
C-c C-v sgml-validate
C-c DEL sgml-delete-tag
C-c RET html-paragraph
C-c TAB sgml-tags-invisible(var)/sgml-tags-invisible(fun)
C-c ] sgml-close-tag
M-o M-o font-lock-fontify-block
M-o b facemenu-set-bold
M-o d facemenu-set-default
M-o i facemenu-set-italic
M-o l facemenu-set-bold-italic
M-o m enriched-toggle-markup
M-o o facemenu-set-face
M-o u facemenu-set-underline
M-q mhtml-ts-mode--switch-fill-defun
Ā..\x3FFFFF sgml-maybe-name-self

Probably introduced at or before Emacs version 31.1.

Key Bindings

Source Code

;; Defined in /usr/src/emacs/lisp/textmodes/mhtml-ts-mode.el.gz
;;;###autoload
(define-derived-mode mhtml-ts-mode html-ts-mode
  '("HTML+" (:eval (let ((lang (treesit-language-at (point))))
                     (cond ((eq lang 'html) "")
                           ((eq lang 'javascript) "JS")
                           ((eq lang 'css) "CSS")))))
  "Major mode for editing HTML with embedded JavaScript and CSS.
Powered by tree-sitter."
  (if (not (and
            (treesit-ensure-installed 'html)
            (treesit-ensure-installed 'javascript)
            (treesit-ensure-installed 'css)))
      (error "Tree-sitter parsers for HTML isn't available.  You can
    install the parsers with M-x `mhtml-ts-mode-install-parsers'")

    ;; When an language is embedded, you should initialize some variable
    ;; just like it's done in the original mode.

    ;; Comment.
    (setq-local comment-multi-line t)
    (setq-local comment-setup-function #'mhtml-ts-mode--comment-setup)

    ;; Font-lock.

    ;; There are two ways to handle embedded code:
    ;; 1. Use a single parser for all the embedded code in the buffer. In
    ;; this case, the embedded code blocks are concatenated together and are
    ;; seen as a single continuous document to the parser.
    ;; 2. Each embedded code block gets its own parser. Each parser only sees
    ;; that particular code block.

    ;; If you go with 2 for a language, the local parsers are created and
    ;; destroyed automatically by Emacs. So don't create a global parser for
    ;; that embedded language here.

    ;; Create the parsers, only the global ones.
    ;; jsdoc is a local parser, don't create a parser for it.
    (treesit-parser-create 'css)
    (treesit-parser-create 'javascript)

    ;; Multi-language modes must set the  primary parser.
    (setq-local treesit-primary-parser (treesit-parser-create 'html))

    (setq-local treesit-range-settings mhtml-ts-mode--range-settings)

    ;; jsdoc is not mandatory for js-ts-mode, so we respect this by
    ;; adding jsdoc range rules only when jsdoc is available.
    (when (treesit-ensure-installed 'jsdoc)
      (setq-local c-ts-common--comment-regexp
                  js--treesit-jsdoc-comment-regexp))

    (setq-local prettify-symbols-alist mhtml-ts-mode--prettify-symbols-alist)

    ;; Indent.

    ;; Since `mhtml-ts-mode' inherits indentation rules from `html-ts-mode', `js-ts-mode'
    ;; and `css-ts-mode', if you want to change the offset you have to act on the
    ;; *-offset variables defined for those languages.

    ;; JavaScript and CSS must be indented relative to their code block.
    ;; This is done by inserting a special rule before the normal
    ;; indentation rules of these languages.
    ;; The value of `mhtml-ts-mode--js-css-indent-offset' changes based on
    ;; `mhtml-ts-mode-tag-relative-indent' and can be used to indent
    ;; JavaScript and CSS code relative to the HTML that contains them,
    ;; just like in mhtml-mode.
    (setq-local treesit-simple-indent-rules
                (mhtml-ts-mode--treesit-indent-rules))

    ;; Navigation.

    ;; This is for which-function-mode.
    ;; Since mhtml-ts-mode is derived from html-ts-mode, which sets
    ;; the value of `treesit-defun-type-regexp', you have to reset it to nil
    ;; otherwise `imenu' and `which-function-mode' will not work.
    (setq-local treesit-defun-type-regexp nil)

    ;; This is for finding defun name, it's used by IMenu as default
    ;; function no specific functions are defined.
    (setq-local treesit-defun-name-function #'mhtml-ts-mode--defun-name)

    ;; Define what are 'thing' for treesit.
    ;; 'Thing' is a symbol representing the thing, like `defun', `sexp', or
    ;; `sentence'.
    ;; As an alternative, if you want just defun, you can define a `treesit-defun-type-regexp'.
    (setq-local treesit-thing-settings mhtml-ts-mode--treesit-thing-settings)

    ;; Font-lock.

    ;; In a multi-language scenario, font lock settings are usually a
    ;; concatenation of language rules. As you can see, it is possible
    ;; to extend/modify the default rule or use a different set of
    ;; rules. See `php-ts-mode--custom-html-font-lock-settings' for more
    ;; advanced usage.
    (setq-local treesit-font-lock-settings (mhtml-ts-mode--treesit-font-lock-settings))

    ;; Tells treesit the list of features to fontify.
    (setq-local treesit-font-lock-feature-list mhtml-ts-mode--treesit-font-lock-feature-list)

    ;; Imenu

    ;; Setup Imenu: if no function is specified, try to find an object
    ;; using `treesit-defun-name-function'.
    (setq-local treesit-aggregated-simple-imenu-settings
                mhtml-ts-mode--treesit-aggregated-simple-imenu-settings)

    (setq-local treesit-aggregated-outline-predicate
		mhtml-ts-mode--treesit-aggregated-outline-predicate)

    (treesit-major-mode-setup)

    ;; This is sort of a prog-mode as well as a text mode.
    (run-mode-hooks 'prog-mode-hook)

    ;; Flymake
    (add-hook 'flymake-diagnostic-functions #'mhtml-ts-mode-flymake-mhtml nil 'local)))