Prettier parser or plugin

[bcyo]

What's the correct Prettier parser or plugin for formatting Observable Framework .md files that contain YAML frontmatter, markdown, ${} template literals, and HTML elements? I tried the mdx parser like below but it doesn't handle the ${} expressions correctly.

{
  "overrides": [
    {
      "files": "src/**/*.md",
      "options": { "parser": "mdx" }
    }
  ]
}

[Fil]

see also #1855

[bcyo]

Thanks! That seems to be a related but different issue, though. The workarounds mentioned there don't work for me.

The biggest issue I'm experiencing is that Prettier inserts a line break between $ and the opening curly brace { when the interpolated expression is too long, breaking Observable's rendering.

For example, Prettier, with the mdx parser, replaces this:

<div class="card" style="padding: 0;">
  ${Inputs.table(thisIsAnExcessivelyLongAndArbitraryVariableNameThatTriggersPrettier)}
</div>

with this:

<div class="card" style="padding: 0;">
  $
  {Inputs.table(
    thisIsAnExcessivelyLongAndArbitraryVariableNameThatTriggersPrettier,
  )}
</div>

As you can see, the line already starts with a whitespace and is wrapped in a pair of HTML tags. Adding a closing delimiter doesn't seem to help at all, although adding any HTML comment, e.g., <!---->, seems to have the same effect as adding <!-- prettier-ignore -->.

I was looking for an off-the-shelf solution, but if there's none at the moment, the mdx parser works well if the interpolated expression is defined as a variable somewhere and only that variable is interpolated. I’ll use that for now.