Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>MDX InlineNew to Visual Studio Code? Get it now.

MDX Inline

Preview

vadistic

|
4,698 installs
| (0) | Free
Syntax highlighting for inline MDX tagged template literals
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Inline MDX for Visual Studio Code

Adds MDX highlighting in inline tagged template literals.

Installation

  • Install vscode MDX language support (or it will be installed for you)
  • Install & enable this extension

Usage

You can collocate MDX with your code and use mdx.macro or inline-mdx.macro to render your markup as html (via @mdx-js/tag).

All instances of mdx or inline tagged tamplates will be detected as embeded mdx.

import React from 'react'
import { mdx } from 'mdx.macro'

const MDXContent = mdx`
  # Hello

  This will be nicely colored!
`

export const Component = () => (
  <div>
    <MDXContent />
  </div>
)

Why

So why on earth anyone would need js-in-markdown-in-js?

It's the same idea as usage of graphql or css/styled tagged template literals. Mdx files are great for whole articles, but what if you just need a few lines? Or want to split your content?

This extension adds to your editor markdown/mdx highlighting (and whatever mdx support) in tagged template literals.

Example

Example

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft