code playground button

[BaskarMitrah]

Description

Code Playground button

Test URL

Previous

https://stage--adp-devsite-stage--adobedocs.aem.page/express/embed-sdk/docs/guides/
https://stage--adp-devsite-stage--adobedocs.aem.page/github-actions-test/test/code-playground-button

Updated

Code playground : https://code-playground--adp-devsite-stage--adobedocs.aem.page/github-actions-test/test/code-playground-button
Console : https://code-playground--adp-devsite-stage--adobedocs.aem.page/express/embed-sdk/docs/guides/

Ticket

https://jira.corp.adobe.com/browse/DEVSITE-2045

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run PSI checks
• Re-sync branch

Commits

• 0d23d22 ✅ (latest)

[melissag-ensemble]

Please fix the comment:

Suggested change

	// Primary button: CTA filled style (solid blue background)
	// Accent button: Outline style (blue border)

To reflect the actual style:

[melissag-ensemble]

Please see comments and resolve conflicts

[BaskarMitrah]

[like] Baskar Myurugan reacted to your message:

________________________________ From: melissag-ensemble ***@***.***> Sent: Friday, January 9, 2026 3:57:09 PM To: AdobeDocs/adp-devsite ***@***.***> Cc: Baskar Myurugan ***@***.***>; Author ***@***.***> Subject: Re: [AdobeDocs/adp-devsite] code playground button (PR #390) EXTERNAL: Use caution when clicking on links or opening attachments. @melissag-ensemble commented on this pull request.

________________________________ In hlx_statics/scripts/scripts.js<#390 (comment)>:

@@ -798,6 +798,21 @@ function loadPrism(document) {

window.Prism.plugins.autoloader.languages_path = '/hlx_statics/scripts/prism-grammars/'; window.Prism.plugins.autoloader.use_minified = true; } + // Register "Try it" button for code blocks with "try" class + if (window.Prism?.plugins?.toolbar) { + window.Prism.plugins.toolbar.registerButton('try-code', (env) => { + const pre = env.element.closest('pre'); + if (!pre?.classList.contains('try') && !env.element.classList.contains('try')) return null; + const btn = createTag('button' , {class : 'try-code-button'}); + btn.textContent = 'Try in playground'; + btn.onclick = () => { + const id = Array.from(pre?.classList || []).find(c => c.startsWith('id='))?.replace('id=', '') || pre?.id || 'default'; + window.open(`https://express.adobe.com/new?mode=playground&session=new&sessionId=${id}&executionMode=script`, '_blank'); Ideally, the Try in Playground button should get the URL, mode, sesion, sesionID and executionMode from ideally the code block props: https://github.com/AdobeDocs/adp-devsite-github-actions-test/blob/main/src/pages/test/code-playground-button.md?plain=1#L7. I see everything is hard-coded at the moment except for the sessionId. Please change it to get it from whatever's in the markdown file like: https://github.com/AdobeDocs/adp-devsite-github-actions-test/blob/main/src/pages/test/code-playground-button.md?plain=1#L7 — Reply to this email directly, view it on GitHub<#390 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A3FQNZLCL3DW74HQUL2XI3D4F7FVLAVCNFSM6AAAAACQKI6U7SVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZTMNBUGUZTANZYGM>. You are receiving this because you authored the thread.Message ID: ***@***.***>