Import statement is not highlighted

[lobosan]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

latest

Link to runnable example

No response

Steps to reproduce

Create an mdx file in an astro project and use an import statement

Expected behavior

The import statement should be highlighted

Actual behavior

The import looks as regular markdown

Runtime

Node v20

Package manager

npm v10

OS

macOS

Build and bundle tools

Other (please specify in steps to reproduce)

[ChristianMurphy]

Welcome @lobosan! 👋
Are you running the latest version of the plugin? (1.8.10 at the time of writing)
This looks a lot like a duplicate of #462

[lobosan]

Hi @ChristianMurphy, yes I'm running v1.8.10

[ChristianMurphy]

Thanks for double checking, could you share the output from

code --list-extensions --show-versions

as well as share the text you are editing (or a minimal anonymized version of it) in a codeblock?

[lobosan]

@ChristianMurphy

astro-build.astro-vscode@2.14.1 blackboxapp.blackbox@1.3.77 bradlc.vscode-tailwindcss@0.12.6 cardinal90.multi-cursor-case-preserve@1.0.5 chakrounanas.turbo-console-log@2.10.4 codeium.codeium@1.12.6 codium.codium@0.9.13 dbaeumer.vscode-eslint@3.0.10 dotjoshjohnson.xml@2.5.1 dracula-theme.theme-dracula@2.25.1 dsznajder.es7-react-js-snippets@4.4.3 eamodio.gitlens@15.3.0 ecmel.vscode-html-css@2.0.10 esbenp.prettier-vscode@11.0.0 github.copilot@1.223.0 github.copilot-chat@0.18.2 github.github-vscode-theme@6.3.4 graphql.vscode-graphql@0.12.0 graphql.vscode-graphql-syntax@1.3.6 mattpocock.ts-error-translator@0.10.1 meganrogge.template-string-converter@0.6.1 meshintelligenttechnologiesinc.pieces-vscode@1.17.0 moalamri.inline-fold@0.2.6 ms-vscode.live-server@0.4.14 octref.vetur@0.37.3 orta.vscode-jest@6.2.5 pkief.material-icon-theme@5.9.0 prisma.prisma@5.18.0 richie5um2.vscode-sort-json@1.20.0 ritwickdey.liveserver@5.7.9 sirtori.indenticator@0.7.0 sourcegraph.cody-ai@1.30.3 unifiedjs.vscode-mdx@1.8.10 usernamehw.errorlens@3.20.0 wallabyjs.console-ninja@1.0.350 wallabyjs.quokka-vscode@1.0.649 wix.vscode-import-cost@3.3.0 yoavbls.pretty-ts-errors@0.6.0

[lobosan]

/src/content/posts/post-1.mdx

---
author: { id: 87820884, name: "Lindsay Singleton", avatar: "/src/images/LindsaySingleton.jpg" }
topics: [{ id: 84596441, name: "Travel" }]
---

import VfTopics from "@/components/VfTopics.astro";

Simply post a message in the Conversations area below and Lindsday will reply to you asap. Please try to keep the questions specific to all things travel.

<VfTopics author={frontmatter.author} topics={frontmatter.topics} />

<div id="vf-conversations-container">
  <vf-conversations></vf-conversations>
</div>

[remcohaszing]

Which version of VSCode are you using?

[wooorm]

This doesn’t happen normally btw, you can try it out here: https://wooorm.com/markdown-tm-language/. That’s why we’re wondering what’s up with your stack!

Or here on GH, which uses the same grammar:

---
author: { id: 87820884, name: "Lindsay Singleton", avatar: "/src/images/LindsaySingleton.jpg" }
topics: [{ id: 84596441, name: "Travel" }]
---

import VfTopics from "@/components/VfTopics.astro";

Simply post a message in the Conversations area below and Lindsday will reply to you asap. Please try to keep the questions specific to all things travel.

<VfTopics author={frontmatter.author} topics={frontmatter.topics} />

<div id="vf-conversations-container">
  <vf-conversations></vf-conversations>
</div>

[lobosan]

@ChristianMurphy thanks for investigating, my issue was with the file association setting in vscode, but this fixed the issue

"files.associations": {
    "*.mdx": "mdx"
  }