#Reliable MDX highlighting with Astro frontmatter

10 messages · Page 1 of 1 (latest)

bold carbon
#

What do people use in VSCode to get highlighting for Astro's MDX files? This is what I'm getting with Starlight's frontmatter recently. If I add an extra newline to the top of the file or similar it doesn't break all the formatting. I'm using the unifiedjs.vscode-mdx VSCode plugin for mdx highlighting in general but wondering if I'm missing something for getting it to integrate better

image.png
sand granite
#

I am using the same mdx plugin as mentioned. I believe its the theme being issue here, you might want to verify it with a different theme of your choice

bold carbon
#

Maybe this is what finally gives me the motivation to transition back to a non-insiders build 😛

humble echo
bold carbon
maiden radish
#

If your issue is resolved, please consider doing the following:

  • From the ellipses in the top-right corner of the post (not the message), edit the tags to include the Solved tag
  • From the same ellipses, select Close Post. Your post will still be available to search and can be re-opened simply by replying in it. It will just be moved down with older posts, so we can more easily focus on issues that still need to be resoled.
    Thank you.
bold carbon
#

This is the source, the file is index.mdx:

---
title: ArkType
description: TypeScript's 1:1 validator, optimized from editor to runtime
template: splash
hero:
  title: ArkType
  tagline: TypeScript's 1:1 validator, optimized from editor to runtime
  image:
    alt: A serene ark, sailing to runtime
    file: ../../assets/splash.png
  actions:
    - text: Set sail
      link: /intro/setup/
      icon: right-arrow
      variant: primary
---

import {
    Card,
    CardGrid,
    LinkCard,
    TabItem,
    Tabs
} from "@astrojs/starlight/components"
import {
    RuntimeBenchmarksGraph,
    TypeBenchmarksGraph
} from "../../components/BenchmarksGraph.tsx"
import Code from "../../components/Code.astro"
import { HeroBackdrop } from "../../components/HeroBackdrop.tsx"
import betterErrors from "./betterErrors.twoslash.js?raw"
import clarityAndConcision from "./clarityAndConcision.twoslash.js?raw"
import deepIntrospectability from "./deepIntrospectability.twoslash.js?raw"
import intrinsicOptimization from "./intrinsicOptimization.twoslash.js?raw"
import unparalleledDx from "./unparalleledDx.twoslash.js?raw"

<div class="not-content">
    <HeroBackdrop client:only="react" />
</div>

## What awaits

<CardGrid stagger>
    <Card title="Unparalleled DX" icon="seti:tsconfig">
        Type syntax you already know with safety and completions unlike anything
        you've ever seen
        <Code code={unparalleledDx} />
    </Card>
    <Card title="Faster... everything" icon="rocket">
        100x faster than Zod at runtime with editor performance that will remind you
        how autocomplete is supposed to feel
        <Tabs>
            <TabItem label="Runtime">
                <RuntimeBenchmarksGraph />
            </TabItem>
            <TabItem label="Editor">
                <TypeBenchmarksGraph />
            </TabItem>
        </Tabs>
    </Card>
    <Card title="Clarity and Concision" icon="comment-alt">
        Definitions are half as long, type errors are twice as readable, and hovers
        tell you just what really matters
        <Code code={clarityAndConcision} />
    </Card>
    <Card title="Better Errors" icon="error">
        Deeply customizable messages with great defaults
        <Code code={betterErrors} />
    </Card>
    <Card title="Deep Introspectability" icon="seti:code-search">
        ArkType uses set theory to understand and expose the relationships between
        your types at runtime the way TypeScript does at compile time
        <Code code={deepIntrospectability} />
    </Card>
    <Card title="Intrinsic Optimization" icon="seti:smarty">
        Every schema is internally normalized and reduced to its purest and fastest
        representation
        <Code code={intrinsicOptimization} />
    </Card>
    {/* <Card title="Portable" icon="seti:json">
        Most definitions are just objects and strings- take them across the stack or
        even outside JS altogether
    </Card> */}
</CardGrid>

<LinkCard
    title="Doc up"
    description="Everything you need to know from installation to integration"
    href="/intro/setup"
/>