Skip to content

Conversation

@fedcho
Copy link
Contributor

@fedcho fedcho commented Dec 15, 2024

Add syntax highlight support for JavaScript and CSS code inside of <script> and <style> tags.
It doesn't fix the grammar.
See: #37

((tag
(start_tag
(tag_name) @tag_name (#eq? @tag_name "script"))
(text)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe you can capture the (text) node here as (text) @injection.content instead and then you can drop the #offset! property below

(and same for the style tag below)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried that but it stops the capture right before the next { character inside the script tag

((tag
  (start_tag
      (tag_name) @tag_name (#eq? @tag_name "script"))
  (text) @injection.content
  (end_tag)
) 
 (#set! injection.language "javascript")
 (#set! injection.include-children)
 (#set! injection.combined)
)
image

and results something like this when you have several functions:

image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah yeah I see, we need to parse the entire inner contents of the tag because otherwise {/} are recognized as non-(text) nodes 👍

See: phoenixframework#37
This commit doesn't fix the grammar but add syntax highlight support for
JavaScript and CSS code inside of <script> and <style> tags.
@fedcho fedcho force-pushed the feat/js-injections branch from b9dbfbe to 1bd5ada Compare May 25, 2025 10:03
@the-mikedavis the-mikedavis merged commit 6603380 into phoenixframework:main Jun 20, 2025
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants