Improve code highlighting, tweak language

mdo · mdo · commit 2b132cbb6f2c · 2026-04-07T16:05:23.000-06:00
diff --git a/site/src/content/docs/components/toggler.mdx b/site/src/content/docs/components/toggler.mdx
@@ -1,16 +1,12 @@
 ---
 title: Toggler
-description: Toggle attributes or classes using nothing but data attributes.
+description: Toggle attributes or classes on click using only data attributes and our JavaScript plugin. Works with any attribute except `id`.
 toc: true
 js: required
 ---
 
 Toggler is a pure JavaScript component that can be used to avoid writing small or one-off JavaScript snippets to create interactive elements. Instead of writing custom JavaScript, use data attributes to toggle attribute values, changes classes, and more on `click` events.
 
-<Callout type="warning">
-Toggler handles any attribute except `id`.
-</Callout>
-
 ## Examples
 
 ### Toggle class
diff --git a/site/src/content/docs/guides/quickstart.mdx b/site/src/content/docs/guides/quickstart.mdx
@@ -34,11 +34,11 @@ Get started using Bootstrap in seconds by including our production-ready CSS and
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap demo</title>
-       <link href="[[config:cdn.css]]" rel="stylesheet" integrity="[[config:cdn.css_hash]]" crossorigin="anonymous"> // [!code ++]
+       <link href="[[config:cdn.css]]" rel="stylesheet" integrity="[[config:cdn.css_hash]]" crossorigin="anonymous"><!--[!code highlight]-->
      </head>
      <body>
        <h1>Hello, world!</h1>
-       <script type="module" src="[[config:cdn.js_bundle]]" integrity="[[config:cdn.js_bundle_hash]]" crossorigin="anonymous"></script> // [!code ++]
+       <script type="module" src="[[config:cdn.js_bundle]]" integrity="[[config:cdn.js_bundle_hash]]" crossorigin="anonymous"></script><!--[!code highlight]-->
      </body>
    </html>
    ```
diff --git a/site/src/scss/_syntax.scss b/site/src/scss/_syntax.scss
@@ -21,15 +21,15 @@
 
   > code {
     display: flex;
+    flex-shrink: 0;
     flex-direction: column;
-    width: fit-content;
+    width: max-content;
     min-width: 100%;
 
     .line:empty {
       min-height: 1lh;
     }
   }
-
 }
 
 .astro-code .line.highlighted {

Original file line number	Diff line number	Diff line change
`@@ -21,15 +21,15 @@`
`21`	`21`
`22`	`22`	`> code {`
`23`	`23`	`display: flex;`
	`24`	`+ flex-shrink: 0;`
`24`	`25`	`flex-direction: column;`
`25`		`- width: fit-content;`
	`26`	`+ width: max-content;`
`26`	`27`	`min-width: 100%;`
`27`	`28`
`28`	`29`	`.line:empty {`
`29`	`30`	`min-height: 1lh;`
`30`	`31`	`}`
`31`	`32`	`}`
`32`		`-`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`.astro-code .line.highlighted {`