Skip to content

Parsing issues with as invocations in markdown with live content #2094

Open

Description

@NullVoxPopuli

Example with tabs

Content:

# Authoring example

once nvp fixes the parsing issue


<Tabs as |Tab|>
  <Tab @label="Ember">

```gjs live
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { on } from '@ember/modifier';

export default class HelloWorld extends Component {
  @tracked count = 0;

  increment = () => this.count += 1;

  <template>
    <p>You have clicked the button {{this.count}} times.</p>

    <button type="button" {{on "click" this.increment}}>Click</button>
  </template>
}
```

  </Tab>
  <Tab @label="React">

```jsx react live
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';

function Demo() {
  const notify = () => toast("Wow so easy!");

  return (
    <div>
      <button onClick={notify}>
        Notify!
      </button>
      <ToastContainer />
    </div>
  );
}

export default <Demo />;
```

  </Tab>
</Tabs>

Activity

  1. NullVoxPopuli commented on Mar 2, 2026

    @NullVoxPopuli
    OwnerAuthor

    that use case won't work (with live code fences in tabs) -- should use HTML tabs:
    like here -- the main trade off is that all tab contents are actually in the DOM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

No labels
No labels

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions