Using MDX

Beomjun Gil

Lorem ipsum dolor sit amet

astroblogmdx

This theme comes with the @astrojs/mdx integration installed and configured in your astro.config.mjs config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file.

my-test-file.js
console.log('Title attribute example')
Terminal window
echo "This terminal frame has no title"
PowerShell terminal example
Write-Output "This one has a title!"
echo "Look ma, no frame!"
PowerShell Profile.ps1
# Without overriding, this would be a terminal frame
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail
Terminal window
Standard ANSI colors:
- Dimmed:      Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
- Foreground:  Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
- Background:  Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
- Reversed:    Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 


8-bit colors (showing colors 160-171 as an example):
- Dimmed:      160  161  162  163  164  165  166  167  168  169  170  171 
- Foreground:  160  161  162  163  164  165  166  167  168  169  170  171 
- Background:  160  161  162  163  164  165  166  167  168  169  170  171 
- Reversed:    160  161  162  163  164  165  166  167  168  169  170  171 


24-bit colors (full RGB):
- Dimmed:      ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
- Foreground:  ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
- Background:  ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
- Reversed:    ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 


Font styles:
- Default
- Bold
- Dimmed
- Italic
- Underline
- Reversed
- Strikethrough
Terminal window
pwd

After pressing enter, the pwd command will output the current directory your terminal is in.

5 collapsed lines
// All this boilerplate setup code will be collapsed
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'


const engine = someBoilerplateEngine(evenMoreBoilerplate())


// This part of the code will be visible by default
engine.doSomething(1, 2, 3, calcFn)


function calcFn() {
  // You can have multiple collapsed sections
3 collapsed lines
  const a = 1
  const b = 2
  const c = a + b


  // This will remain visible
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
  return c
}


4 collapsed lines
// All this code until the end of the block will be collapsed again
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: 'End of example boilerplate code' })
// Line 1 - targeted by line number
// Line 2
// Line 3
// Line 4 - targeted by line number
// Line 5
// Line 6
// Line 7 - targeted by range "7-8"
// Line 8 - targeted by range "7-8"
labeled-line-markers.jsx
<button
  role="button"
  {...props}
  value={value}
  className={buttonClassName}
  disabled={disabled}
  active={active}
>
  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>
labeled-line-markers.jsx
<button
  role="button"
  {...props}


  value={value}
  className={buttonClassName}


  disabled={disabled}
  active={active}
>


  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

Why MDX?

MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to mix JavaScript and UI Components into your Markdown content for things like interactive charts or alerts.

If you have existing content authored in MDX, this integration will hopefully make migrating to Astro a breeze.

Example

Here is how you import and use a UI component inside of MDX. When you open this page in the browser, you should see the clickable button below.