Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

HTML support #8

Open
ema2159 opened this issue Oct 31, 2022 · 3 comments
Open

HTML support #8

ema2159 opened this issue Oct 31, 2022 · 3 comments

Comments

@ema2159
Copy link

ema2159 commented Oct 31, 2022

Hello! Long time no see. Awesome contribution to the community as usual.

I tried to use it with an html file, expecting the most recent opened tag to be displayed in the header line, however, it is not the case. It would be an awesome feature to have. Do you think it would be possible to implement it?

Thanks a lot for your work!
@alphapapa
Copy link
Owner

Hi,

Thanks for the kind words. I'm glad you like it.

Could you be more specific about what you're looking for, like with an example?

Anyway, please see the variable topsy-mode-functions. If you can find an appropriate function that already does what is needed, it should be a simple addition.

@ema2159
Copy link
Author

ema2159 commented Nov 1, 2022

Sure! This is a plugin similar to yours but in VS Code. It would be nice if yours did something similar. Maybe not stacking the different tags/indentation levels, although that would be nice too.

@Dima-369
Copy link

Maybe not stacking the different tags/indentation levels, although that would be nice too.

If you use treesitter, this is quite easy to do like this:

(defun dima-treesit-html-breadcrumbs ()
  "Return a string of breadcrumbs."
  (let ((node (treesit-node-at (point) 'html))
        result)
    (while node
      (when (string= "element" (treesit-node-type node))
        (push (treesit-node-text (treesit-node-child
                                  (treesit-node-child node 0) 1))
              result))
      (setq node (treesit-node-parent node)))
    (s-join " > " result)))

The functions returns "html > body > ul > li > div > div > div > h1" if the point is on <h1> on the HTML below. You can use this in topsy-mode-functions.

<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Titleeez</title>

    <style>
      a {
        height: 123px;
      }
    </style>
  </head>

  <body>
    <p>123</p>

    <h1 id="oeu" class="yoyo">oeu</h1>

    <ul>
      <li>
        <h2>oeuoeu
        </h2>
        <div>
          <div>
            <div>
              <h1>yo</h1>

This is a plugin similar to yours but in VS Code.

This can also be done via treesitter and then placing a posframe at the top of the window. Topsy won't help here since the header line can't have newlines in it (from what I see).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@alphapapa @Dima-369 @ema2159