1

I'm working on email templates using web-mode, which – alas – requires inline styling galore… many of my opening tags won't fit on a single line even on a 4K-Display due to the massive amount of Attributes.

In order to reduce the clutter when editing the content I would like to fold only the attributes of all HTML-tags. This could be achieved if there was a way to fold all strings matching the following regex: "[[:alnum:]]+=[^>]+" or the first group of this one (probably safer): "<[[:alnum:]]+ +\\([^>]+\\)>".

By folding I basically mean hiding the text, possibly having it replaced by a clickable placeholder revealing it when clicked. AucTex does it like that.The replacement part is not necessary htough. Basically all I need is to temporarily get the clutter out of sight, e.g.:

<div class="someclass"> foo </div> → <div …> foo </div>

I've tried hs-mode, but it seems to only operate on blocks, which won't work in my case since the Attributes are on the same line as the possible START and END regexes supposed to surround a block.

It should be possible to fold a regex, given the way e.g. AucTeX folds the content of certain macros etc. Any suggestions?

Many thanks in advance

Oliver

Improve this question
3
  • 1
    Could you give a concrete example of what you mean by "folding a regexp" or folding all strings that match a given regexp. To me the question isn't too clear, but I'm guessing that a simple example would make it quite clear.
    – Drew
    Commented Oct 19, 2019 at 16:38
  • Sure, by folding I basically mean hiding the text, possibly having it replaced by a clickable placeholder revealing it when clicked. AucTex does it like that.The replacement part is not necessary htough. Basically all I need is to temporarily get the clutter out of sight, e.g.: <div class="someclass"> foo </div> → <div …> foo </div>
    – Phylax
    Commented Oct 19, 2019 at 21:17
  • Please put all such info in the question. Comments can be deleted at any time. Thx.
    – Drew
    Commented Oct 19, 2019 at 22:45

1 Answer 1

Reset to default
2

The following elisp code defines a new minor mode web-hide-attr-mode. It is hooked to web-mode. So it is already active if you open a document in web-mode.

You can toggle it by M-x web-hide-attr-mode.

It works by adding an entry to font-lock-keywords that puts the invisible property web-hide-attr on the html attributes and by adding web-hide-attr to the buffer-invisibility-spec. It actually puts (web-hide-attr . t) there to generate the ellipses.

(defconst web-hide-attr-font-lock-keywords
  '(("<[[:alnum:]]+ +\\([^>]+\\)>"
     1
     '(face default invisible web-hide-attr)
     'append t
     ))
  "Keywords for hiding attributes in `web-mode'.")

(define-minor-mode web-hide-attr-mode
  "Hide tag attributes in `web-mode'."
  :lighter " H"
  (font-lock-add-keywords nil web-hide-attr-font-lock-keywords)
  (if web-hide-attr-mode
      (add-to-invisibility-spec '(web-hide-attr . t))
    (remove-from-invisibility-spec '(web-hide-attr . t)))
  (font-lock-flush)
  (font-lock-ensure))

(add-hook 'web-mode-hook #'web-hide-attr-mode)
Improve this answer
1
  • Awesome… wouldn't have thought one had to go as far as to define a mode (have only done so twice in my Emacs life and without any font-stuff) Many thanks for the trouble! It works perfectly.
    – Phylax
    Commented Oct 20, 2019 at 19:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.