3

Does emacs have a hide-show code fold-ability for html? I have it when I'm using org mode, but can't seem to find it on the nXML/html side.

user97954
  • 121
  • 5
  • 3
    If you're doing html I highly suggest you use web-mode instead of the built in html mode which does have code folding built in. http://web-mode.org – Jordon Biondo Jan 24 '14 at 21:02
  • 2
    The library hideshow also has hs-special-modes-alist that can be added on to with a custom function that defines begin and end -- e.g. with a regexp. – lawlist Jan 24 '14 at 21:52

1 Answers1

1

I wrote this for mhtml-mode and it works pretty well, it can fold HTML by tag as well as the embedded CSS and JS. Simply add it to your emacs config file and you'll be set to go.

;; When called this automatically detects the submode at the current location.
;; It will then either forward to end of tag(HTML) or end of code block(JS/CSS).
;; This will be passed to hs-minor-mode to properly navigate and fold the code.
(defun mhtml-forward (arg)
  (interactive "P")
  (pcase (get-text-property (point) `mhtml-submode)
    (`nil (sgml-skip-tag-forward 1))
    (submode (forward-sexp))))

;; Adds the tag and curly-brace detection to hs-minor-mode for mhtml.
(add-to-list 'hs-special-modes-alist
             '(mhtml-mode
               "{\\|<[^/>]+?"
               "}\\|</[^/>]*[^/]>"
               "<!--"
               mhtml-forward
               nil))

Regex Breakdown:

  • "{\\|<[^/>]+?": Match either { or any opening HTML tags. It matches up to but doesn't include the closing > in the opening tag. That allows the <script> and <style> tags to be treated as HTML tags instead of JS or CSS.

  • "}\\|</[^/>]*[^/]>": Match either } or a closing tag.

theadorabledev
  • 13
  • 5