Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(meta): Document Embedlivesample identifier #30102

Merged
merged 8 commits into from
Nov 22, 2023

Conversation

bsmth
Copy link
Member

@bsmth bsmth commented Nov 8, 2023

The {{Embedlivesample}} macro currently has two ways of specifying which code blocks to combine into a "result" iframe, and only one of these ways is documented. This PR adds documentation for the "string identifier" method or marking fenced code blocks (HTML/CSS/JS) with an identifier in the info string using:

  • ```{language} live-sample___{identifier}

For example, in Markdown, this is used as follows:

## Examples

### Styling a paragraph

In this example, we're using CSS to style paragraphs.

```html live-sample___paragraph-styling
<p>I'm not fancy.</p>
<p class="fancy">But I am!</p>
```

```html
<p>I'm another HTML block. I won't be included in the result.</p>
```

```css live-sample___paragraph-styling
p.fancy {
  color: red;
}
```

Only the `<p>` element with `class="fancy"` will get styled `red`:

{{EmbedLiveSample("paragraph-styling")}}

@bsmth bsmth requested a review from a team as a code owner November 8, 2023 08:43
@bsmth bsmth requested review from pepelsbey and removed request for a team November 8, 2023 08:43
@github-actions github-actions bot added the Content:Meta Content in the meta docs label Nov 8, 2023
Copy link
Contributor

github-actions bot commented Nov 8, 2023

@bsmth bsmth changed the title chore(docs): Document Embedlivesample identifier chore(meta): Document Embedlivesample identifier Nov 8, 2023
@dipikabh dipikabh self-requested a review November 8, 2023 13:47
@dipikabh
Copy link
Contributor

dipikabh commented Nov 8, 2023

Thanks for opening this PR, @bsmth 🙏! I'll take a look now.

Copy link
Contributor

@dipikabh dipikabh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, @bsmth. This is good overall. I've added some edit suggestions.

@bsmth
Copy link
Member Author

bsmth commented Nov 9, 2023

Thank you for the comments, @dipikabh! 🙏🏻

Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
bsmth and others added 2 commits November 17, 2023 11:00
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
bsmth and others added 2 commits November 17, 2023 11:02
…s/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
@bsmth bsmth requested a review from dipikabh November 17, 2023 10:20
@bsmth
Copy link
Member Author

bsmth commented Nov 17, 2023

Thanks @dipikabh - let's take a look again when you're back.

Copy link
Contributor

@dipikabh dipikabh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is looking good, @bsmth. Thanks for the updates.

There's a few suggestions following Vadim's comment about saying "lang ID" vs "class". Leaving a +1 so you can merge after the changes.

Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
@bsmth bsmth requested review from dipikabh and pepelsbey November 22, 2023 09:27
@bsmth
Copy link
Member Author

bsmth commented Nov 22, 2023

Thanks, both. Going to merge now 🎉

@bsmth bsmth merged commit e5a9a20 into mdn:main Nov 22, 2023
7 checks passed
@bsmth bsmth deleted the embedlivesample-identifier branch November 22, 2023 13:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content:Meta Content in the meta docs
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants