[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
Tree sitter: issue embedding HTML, CSS, JavaScript within a new php-ts-m
|
From: |
Simon Pugnet |
|
Subject: |
Tree sitter: issue embedding HTML, CSS, JavaScript within a new php-ts-mode |
|
Date: |
Thu, 09 Feb 2023 12:45:19 +0000 |
Dear Emacs maintainers,
I have recently started work on a PHP tree sitter major mode. Things
are going well so far, however I'm having trouble with embedding
multiple languages in the PHP buffer.
In case you're not familiar with PHP, here's a quick example (I'm
using org-mode mark-up in this message which hopefully will help): -
#+begin_src php
<html lang="en-gb">
<head>
<style type="text/css">
body {
background: url("/background.png");
color: #ff0000;
}
</style>
</head>
<body>
<?php
$a = [1, 2, "3", 4.5];
if (is_array($a)) {
echo "$a is an array";
} else {
echo "$a is not an array";
}
?>
<div id="my-div">
<h1>This is a test</h1>
</div>
<script type="text/javascript">
const div = document.getElementById('my-div');
// This is a JS comment
/* This too */
console.log("my-div is:", div);
</script>
<?php // Some more PHP here ?>
</body>
</html>
#+end_src
As you can see, PHP code is usually encapsulated within a HTML
document, with PHP code enclosed within ~<?php ... ?>~ blocks.
The first block of HTML from the beginning of the buffer to the first
~<?php~ is enclosed within a ~(program (text))~ node. The second
(after ~?>~ and before the second ~<?php~) is enclosed within a
~(text_interpolation (text))~ node. I have therefore defined the
following ~treesit-range-settings~ in my major mode: -
#+begin_src emacs-lisp
(setq-local treesit-range-settings
(treesit-range-rules
:embed 'html
:host 'php
'((program (text) @capture)
(text_interpolation (text) @capture))))
#+end_src
This seems to work however when I evaluate ~(treesit-language-at
(point))~ anywhere in this buffer I get ='html= in response. This is
of course expected within a HTML region, but not within a PHP region.
Despite this, the font-locking I have defined for PHP appears to work
correctly. I have also defined a custom face and applied it via
font-locking to the above two nodes to confirm that those regions are
indeed enclosed as expected and they are.
My hope eventually is to use the following ~treesit-range-settings~: -
#+begin_src emacs-lisp
(setq-local treesit-range-settings
(treesit-range-rules
:embed 'html
:host 'php
'((program (text) @capture)
(text_interpolation (text) @capture))
:embed 'css
:host 'html
'((style_element (raw_text) @capture))
:embed 'typescript
:host 'html
'((script_element (raw_text) @capture))))
#+end_src
As well as defining these rules, I require =css-mode= and
=typescript-ts-mode= and append their own font-locking rules to my
own. My hope is that this will allow CSS and JavaScript embedded
within HTML regions to be font-locked according to those separate
major modes too. This appears to work for simple files but does not
work reliably for more complex files. Also when using the above I get
='typescript= whenever I evaluate ~(treesit-language-at (point))~. I'm
not sure if this is just a bug with the language grammars that I'm
using or if perhaps because I'm not using the treesit library
correctly. Because of the issue with ~treesit-language-at~ above I'm
concerned that it's the latter.
So my questions are: -
1. Based on my rules for embedding ='html= within ='php= above, should
I expect ~(treesit-language-at (point))~ to return ='php= when the
point is within a PHP region?
2. Is my goal of embedding HTML within PHP, then embedding CSS and
JavaScript/TypeScript within HTML feasible and if so am I going about
this in the right way?
Thank you in advance for your help and thank you for all of your work
on Emacs and the tree sitter integration.
Kind regards,
--
Simon Pugnet
https://www.polaris64.net/
signature.asc
Description: PGP signature
- Tree sitter: issue embedding HTML, CSS, JavaScript within a new php-ts-mode,
Simon Pugnet <=