Embedded Formatting

Formats code embedded in JS/TS files (CSS in template literals, GraphQL in template literals, JavaScript/TypeScript/CSS/etc in Markdown).

Configuración

.oxfmtrc.json

{
  "embeddedLanguageFormatting": "auto"
}
``````ts [oxfmt.config.ts]
import { defineConfig } from "oxfmt";

export default defineConfig({
  embeddedLanguageFormatting: "auto",
});
``````js
const styles = css`
  .container {
    background: blue;
    color: ${theme.color};
  }
`;
``````js
const Button = styled.button`
  background: ${(props) => props.primary};
  color: white;
`;
``````jsx
<style jsx>{`
  .container {
    background: blue;
    color: red;
  }
`}</style>
``````js
const query = gql`
  query {
    user {
      id
      name
    }
  }
`;

const query2 = graphql(`
  query {
    user {
      id
      name
    }
  }
  ${fragments.all}
`);
``````js
const template = html`
  <div class="container">
    <h1>Hello</h1>
    <p>${world}</p>
  </div>
`;
```````md
This is an example Markdown file with JavaScript code blocks:

Wow!

txt

import { ref } from "vue";
import MyComponent from "./MyComponent.vue";
</script>