I'm wondering if there is any syntax highlighting for Alpine within astro. Currently any alpine data gets interpreted as a string which makes it difficult to work with.
#Is there any syntax highlighting for Alpine.js when used in a astro component?
manic prism
dense bisonBOT
Hi @manic prism. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Hmm, I don't know enough to give you a confident answer yet. The extracts provided do not mention syntax highlighting specifically for Alpine.js within Astro. However, Astro does support syntax highlighting for code blocks using Shiki and Prism.
For Alpine.js, once the integration is installed, you can use Alpine.js directives and syntax inside any Astro component. The Alpine.js script is automatically added and enabled on every page of your website. But there is a known bug where the @astrojs/alpinejs integration lacks TypeScript support for Alpine shorthand directives.
For more information, you can check the Astro Integration Documentation (https://docs.astro.build/en/guides/integrations-guide/) and the Astro API Reference (https://docs.astro.build/en/reference/api-reference).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
manic prism
@dense bison I was referring to syntax highlighting in vscode. It seems that the current Astro plugin does not support syntax highlighting for alpine.js
dense bisonBOT
Let me check the knowledge base for you. One moment! :books:
I see, you're referring to syntax highlighting for Alpine.js within Astro in the context of a code editor, specifically Visual Studio Code (VSCode).
From the information provided, it appears that there is an issue with the @astrojs/alpinejs integration where shorthand Alpine.js directives (like @click) are not recognized by TypeScript in VSCode, leading to an error message. This issue is discussed in this GitHub issue (https://github.com/withastro/astro/issues/5356).
However, the extracts do not provide specific information about syntax highlighting for Alpine.js within Astro in VSCode. The Astro plugin for JetBrains IDEs, including WebStorm, does support syntax highlighting, but it's not clear if this extends to Alpine.js syntax within Astro files.