Code injector Plugin: Inject JS, CSS classes in HTML elements

Writing custom CSS is painful sometimes, especially when you know JS better or just want to Inject class names or IDs in HTML elements ( hint: bootstrap framework ).

I wish there was a plugin with which:

  • I could create new html elements.
  • Inject JS and CSS classes, ID to existing elements.
  • Even delete elements?

This level of manipulation, will even help users to easily write plugins.
Who wants to learn typescript and do that hardcode programming like Obsidian developers, we are users not developers. Let that be easier for users.

Note: I am working on this post. I will update when I get time.

3 Likes

Not exactly what you wanted, but similar:

I’m was in the need to add CSS classes to query blocks to make them lighter, and to achieve “fragments” in slides.


The most difficult has been to handle the preview mode correctly, but now it’s done and I better understand it, it should be possible to add style and JS quite easily. The only two things are:

  • I don’t know what syntax to use, and if I should do something special to relate to particular nodes or not. Perhaps a simple code block would be sufficient.
  • For JS, I’d probably restrict to event listeners, because otherwise it’s too easy for the user to mess up in preview mode. That being said, shouldn’t we define event handlers at a higher level? (like within the plugin settings rather than in the document itself?)

Any thought?

This might be useless - but I was quickly trying to read up on your issue and this article seemed to touch on what you were saying but it may be way to simple for your level - the site is a good resource nonetheless

Yes, basically, we could have some events hooked to toplevel elements that would only trigger a function when the event bubbles and it comes from a given type of element (having a certain class for instance).

By the way, I finally implemented custom styles in pretty much the same way as I implemented classes.

image