36 lines
244 KiB
HTML
36 lines
244 KiB
HTML
<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-sdk/headless" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.7.0"><title data-rh=true>Headless Mode | LiveCodes</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"><meta data-rh=true name=twitter:card content=summary_large_image><meta data-rh=true property=og:url content=https://livecodes.io/docs/sdk/headless><meta data-rh=true property=og:locale content=en><meta data-rh=true name=docusaurus_locale content=en><meta data-rh=true name=docsearch:language content=en><meta data-rh=true name=docusaurus_version content=current><meta data-rh=true name=docusaurus_tag content=docs-default-current><meta data-rh=true name=docsearch:version content=current><meta data-rh=true name=docsearch:docusaurus_tag content=docs-default-current><meta data-rh=true property=og:title content="Headless Mode | LiveCodes"><meta data-rh=true name=description content="The LiveCodes SDK can be used to create playgrounds in headless mode. In this mode, no visible output is displayed in the embedding web page. However, all SDK methods are accessible (e.g. for updating code, getting compiled code, console output, result HTML, shareable URLs, formatting code, running tests, etc)."><meta data-rh=true property=og:description content="The LiveCodes SDK can be used to create playgrounds in headless mode. In this mode, no visible output is displayed in the embedding web page. However, all SDK methods are accessible (e.g. for updating code, getting compiled code, console output, result HTML, shareable URLs, formatting code, running tests, etc)."><link data-rh=true rel=icon href=/docs/img/favicon.ico><link data-rh=true rel=canonical href=https://livecodes.io/docs/sdk/headless><link data-rh=true rel=alternate href=https://livecodes.io/docs/sdk/headless hreflang=en><link data-rh=true rel=alternate href=https://livecodes.io/docs/sdk/headless hreflang=x-default><link data-rh=true rel=preconnect href=https://H9Z2PKYS80-dsn.algolia.net crossorigin=anonymous><link rel=search type=application/opensearchdescription+xml title=LiveCodes href=/docs/opensearch.xml><script type=ea-placeholder id=ea-placeholder data-ea-publisher=livecodesio data-ea-manual=true></script><script src=https://unpkg.com/prettier@2.4.1/standalone.js async></script><script src=https://unpkg.com/prettier@2.4.1/parser-babel.js async></script><script src=https://unpkg.com/prettier@2.4.1/parser-html.js async></script><script src=https://media.ethicalads.io/media/client/ethicalads.min.js async defer></script><link rel=stylesheet href=/docs/assets/css/styles.61e3dfbf.css><script src=/docs/assets/js/runtime~main.a40c3f9c.js defer></script><script src=/docs/assets/js/main.af5c4c8b.js defer></script><body class=navigation-with-keyboard><script>!function(){var t,e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t=null!==e?e:"light",document.documentElement.setAttribute("data-theme",t)}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id=__docusaurus><link rel=preload as=image href=/docs/img/livecodes-logo.svg><div role=region aria-label="Skip to main content"><a class=skipToContent_fXgn href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><nav aria-label=Main class="navbar navbar--fixed-top"><div class=navbar__inner><div class=navbar__items><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/docs/><div class=navbar__logo><img src=/docs/img/livecodes-logo.svg alt="LiveCodes Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src=/docs/img/livecodes-logo.svg alt="LiveCodes Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">LiveCodes</b></a><a aria-current=page class="navbar__item navbar__link navbar__link--active" href=/docs/overview>Docs</a><a aria-current=page class="navbar__item navbar__link navbar__link--active" href=/docs/sdk>SDK</a><a href=https://blog.livecodes.io target=_self rel="noopener noreferrer" class="navbar__item navbar__link">Blog<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=/docs/../stories target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">Storybook<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></div><div class="navbar__items navbar__items--right"><a href=/docs/../ target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">App<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=https://twitter.com/livecodes_io target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">𝕏<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=https://github.com/live-codes/livecodes target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type=button disabled title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live=polite aria-pressed=false><svg viewBox="0 0 24 24" width=24 height=24 class=lightToggleIcon_pyhR><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 class=darkToggleIcon_wfgR><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg></button></div><div class=navbarSearchContainer_Bca1><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 20 20" aria-hidden=true><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke=currentColor fill=none fill-rule=evenodd stroke-linecap=round stroke-linejoin=round /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="main-wrapper mainWrapper_z2l0"><div class=docsWrapper_hBAB><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type=button></button><div class=docRoot_UBD9><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class=sidebarViewport_aRkj><div class=sidebar_njMd><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--active" href=/docs/overview>Docs</a></div><ul style=display:block;overflow:visible;height:auto class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/why>Why Another Playground?</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/getting-started>Getting Started</a><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/features/>Features</a><button aria-label="Expand sidebar category 'Features'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/configuration/>Configuration</a><button aria-label="Expand sidebar category 'Configuration'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--active" tabindex=0 href=/docs/sdk/>SDK</a><button aria-label="Collapse sidebar category 'SDK'" aria-expanded=true type=button class="clean-btn menu__caret"></button></div><ul style=display:block;overflow:visible;height:auto class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/sdk/js-ts>JS/TS SDK</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/sdk/react>React SDK</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/sdk/vue>Vue SDK</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/sdk/svelte>Svelte</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/docs/sdk/headless>Headless Mode</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/advanced/>Advanced</a><button aria-label="Expand sidebar category 'Advanced'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/languages/>Languages</a><button aria-label="Expand sidebar category 'Languages'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/bookmarklet>Bookmarklet</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/gh-action>GitHub Action ⚡</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/markdown-to-livecodes>Markdown to LiveCodes</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/contribution>Contribution</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/credits>Credits</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/license>License</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/sponsor>Sponsor</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/contact>Contact</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/about>About us</a></ul></ul></nav><button type=button title="Collapse sidebar" aria-label="Collapse sidebar" class="button button--secondary button--outline collapseSidebarButton_PEFL"><svg width=20 height=20 aria-hidden=true class=collapseSidebarButtonIcon_kv0_><g fill=#7a7a7a><path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"/><path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"/></g></svg></button></div></div></aside><main class=docMainContainer_TBSr><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_z5aJ"><div class=docItemContainer_c0TR><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label=Breadcrumbs><ul class=breadcrumbs itemscope itemtype=https://schema.org/BreadcrumbList><li class=breadcrumbs__item><a aria-label="Home page" class=breadcrumbs__link href=/docs/><svg viewBox="0 0 24 24" class=breadcrumbHomeIcon_YNFT><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill=currentColor /></svg></a><li itemscope itemprop=itemListElement itemtype=https://schema.org/ListItem class=breadcrumbs__item><a class=breadcrumbs__link itemprop=item href=/docs/overview><span itemprop=name>Docs</span></a><meta itemprop=position content=1><li itemscope itemprop=itemListElement itemtype=https://schema.org/ListItem class=breadcrumbs__item><a class=breadcrumbs__link itemprop=item href=/docs/sdk/><span itemprop=name>SDK</span></a><meta itemprop=position content=2><li itemscope itemprop=itemListElement itemtype=https://schema.org/ListItem class="breadcrumbs__item breadcrumbs__item--active"><span class=breadcrumbs__link itemprop=name>Headless Mode</span><meta itemprop=position content=3></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type=button class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Headless Mode</h1><div class="custom-content custom-content-header content_lMOZ undefined"><div data-ea-publisher=livecodesio data-ea-type=image class=horizontal data-ea-manual=true></div></div></header>
|
||
<!-- -->
|
||
<p>The LiveCodes <a href=/docs/sdk/>SDK</a> can be used to create playgrounds in headless mode. In this mode, no visible output is displayed in the embedding web page. However, all <a href=/docs/sdk/js-ts#sdk-methods>SDK methods</a> are accessible (e.g. for <a href=/docs/sdk/js-ts#setconfig>updating code</a>, <a href=/docs/sdk/js-ts#getcode>getting compiled code</a>, console output, <a href=/docs/sdk/js-ts#getcode>result HTML</a>, <a href=/docs/sdk/js-ts#getshareurl>shareable URLs</a>, <a href=/docs/sdk/js-ts#format>formatting code</a>, <a href=/docs/sdk/js-ts#runtests>running tests</a>, etc).</p>
|
||
<p>This provides the power of leveraging the wide range of features and language support offered by LiveCodes, while retaining full control over the UI.</p>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=usage>Usage<a href=#usage class=hash-link aria-label="Direct link to Usage" title="Direct link to Usage"></a></h2>
|
||
<p>To create a headless playground, set the <a href=/docs/sdk/js-ts#embed-options>embed option</a> <a href=/docs/sdk/js-ts#headless><code>headless</code></a> to <code>true</code>.</p>
|
||
<p>Please note that in headless mode, the first parameter (<code>container</code>) of the function <a href=/docs/sdk/js-ts#createplayground><code>createPlayground</code></a> is optional and can be omitted.</p>
|
||
<div style=clear:both></div>
|
||
<p>Example:</p>
|
||
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-js codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#393A34>{</span><span class="token imports"> createPlayground </span><span class="token imports punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token literal-property property" style=color:#36acaa>view</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'headless'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token literal-property property" style=color:#36acaa>config</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token literal-property property" style=color:#36acaa>markup</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token literal-property property" style=color:#36acaa>language</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'markdown'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token literal-property property" style=color:#36acaa>content</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'# Hello World!'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>then</span><span class="token punctuation" style=color:#393A34>(</span><span class="token keyword" style=color:#00009f>async</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token parameter">playground</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#393A34>=></span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> code </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token keyword control-flow" style=color:#00009f>await</span><span class="token plain"> playground</span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>getCode</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token console class-name">console</span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>log</span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain">code</span><span class="token punctuation" style=color:#393A34>.</span><span class="token property-access">markup</span><span class="token punctuation" style=color:#393A34>.</span><span class="token property-access">compiled</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"> </span><span class="token comment" style=color:#999988;font-style:italic>// "<h1>Hello World!</h1>"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token console class-name">console</span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>log</span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain">code</span><span class="token punctuation" style=color:#393A34>.</span><span class="token property-access">result</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"> </span><span class="token comment" style=color:#999988;font-style:italic>// (result page HTML)</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=examples>Examples<a href=#examples class=hash-link aria-label="Direct link to Examples" title="Direct link to Examples"></a></h2>
|
||
<p>The following examples show how to use the headless mode to make a Markdown editor, an MDX editor and a Python interpreter.</p>
|
||
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class=admonitionHeading_Gvgb><span class=admonitionIcon_Rf37><svg viewBox="0 0 12 16"><path fill-rule=evenodd d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"/></svg></span>tip</div><div class=admonitionContent_BuS1><p>You may want to view the following playgrounds in full screen (using the full screen button in the top right of each playground).</div></div>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=markdown-editor>Markdown Editor<a href=#markdown-editor class=hash-link aria-label="Direct link to Markdown Editor" title="Direct link to Markdown Editor"></a></h3>
|
||
<p>In this demo, code changes are watched using the SDK method <a href=/docs/sdk/js-ts#watch><code>watch('code', callback)</code></a>. The callback function accepts an argument which is an object with the properties <code>code</code> and <code>config</code> (see <a href=/docs/sdk/js-ts#getcode><code>getCode</code></a> and <a href=/docs/sdk/js-ts#getconfig><code>getConfig</code></a>). The compiled code is obtained as <code>code.markup.compiled</code>.</p>
|
||
<!-- -->
|
||
<div class="container_Egsj undefined" style=height:80vh data-height=80vh></div><details class="alert alert--info details_iMJ2 details_sGeq" data-collapsed=true style="height:3.7rem;overflow:hidden;will-change:height;transition:height 250ms ease-in-out 0s;margin:1em 0"><summary>show code</summary><div style=display:block;overflow:hidden><div class=collapsibleContent_AEyV><div class="tabs-container tabList__CuJ"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_LNqP tabs__item--active">JS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">TS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">React<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Vue<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Svelte</ul><div class=margin-top--md><div role=tabpanel class=tabItem_Ymn6><div class="language-js codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-js codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#393A34>{</span><span class="token imports"> createPlayground </span><span class="token imports punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"markup"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"language"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"html"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"content"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"<textarea id=\"editor\" style=\"display: none;\"></textarea>\n<div id=\"output\">Loading...</div>\n\n<script type=\"module\">\n import { createPlayground } from \"https://cdn.jsdelivr.net/npm/livecodes@0.2.0\";\n import debounce from \"https://jspm.dev/debounce\";\n\n const initialCode = \"# Hello, LiveCodes!\\n\\n\";\n\n // the code editor\n const editor = CodeMirror.fromTextArea(document.getElementById(\"editor\"), {\n lineNumbers: true,\n mode: \"markdown\",\n });\n editor.setSize(\"100%\", 200);\n editor.setValue(initialCode);\n\n // the playground\n const options = {\n view: \"headless\",\n };\n\n const livecodes = await createPlayground(options);\n await livecodes.load();\n\n const compile = async () => {\n await livecodes.setConfig({\n autoupdate: false,\n markup: {\n language: \"markdown\",\n content: editor.doc.getValue(),\n },\n });\n };\n\n // watch for changes\n editor.on(\"change\", debounce(compile, 1000));\n livecodes.watch(\"code\", ({ code, config }) => {\n createSandbox(document.querySelector(\"#output\"), code.markup.compiled);\n });\n\n await compile();\n\n // create a sandbox for safe execution of compiled code\n function createSandbox (container, html) {\n const iframe = document.createElement(\"iframe\");\n iframe.src = \"https://livecodes-sandbox.pages.dev/v7/\";\n iframe.sandbox =\n \"allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts\";\n iframe.onload = () => {\n iframe.contentWindow.postMessage({ html }, \"*\");\n };\n container.innerHTML = \"\";\n container.appendChild(iframe);\n return iframe;\n };\n</script>\n\n<link rel=\"stylesheet\" href=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.css\" />\n<script src=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.js\"></script>\n<script src=\"https://unpkg.com/codemirror@5.65.15/mode/markdown/markdown.js\"></script>\n\n<style>\n * {\n margin: 0;\n padding: 0;\n }\n body {\n display: flex;\n flex-direction: column;\n height: 100vh;\n overflow: hidden;\n }\n #output {\n flex: 1;\n }\n #output iframe {\n width: 100%;\n height: 100%;\n border: none;\n }\n</style>\n"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword" style=color:#00009f>import</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> createPlayground</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>type</span><span class="token plain"> </span><span class="token class-name">EmbedOptions</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> EmbedOptions </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"markup"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"language"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"html"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"content"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"<textarea id=\"editor\" style=\"display: none;\"></textarea>\n<div id=\"output\">Loading...</div>\n\n<script type=\"module\">\n import { createPlayground } from \"https://cdn.jsdelivr.net/npm/livecodes@0.2.0\";\n import debounce from \"https://jspm.dev/debounce\";\n\n const initialCode = \"# Hello, LiveCodes!\\n\\n\";\n\n // the code editor\n const editor = CodeMirror.fromTextArea(document.getElementById(\"editor\"), {\n lineNumbers: true,\n mode: \"markdown\",\n });\n editor.setSize(\"100%\", 200);\n editor.setValue(initialCode);\n\n // the playground\n const options = {\n view: \"headless\",\n };\n\n const livecodes = await createPlayground(options);\n await livecodes.load();\n\n const compile = async () => {\n await livecodes.setConfig({\n autoupdate: false,\n markup: {\n language: \"markdown\",\n content: editor.doc.getValue(),\n },\n });\n };\n\n // watch for changes\n editor.on(\"change\", debounce(compile, 1000));\n livecodes.watch(\"code\", ({ code, config }) => {\n createSandbox(document.querySelector(\"#output\"), code.markup.compiled);\n });\n\n await compile();\n\n // create a sandbox for safe execution of compiled code\n function createSandbox (container, html) {\n const iframe = document.createElement(\"iframe\");\n iframe.src = \"https://livecodes-sandbox.pages.dev/v7/\";\n iframe.sandbox =\n \"allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts\";\n iframe.onload = () => {\n iframe.contentWindow.postMessage({ html }, \"*\");\n };\n container.innerHTML = \"\";\n container.appendChild(iframe);\n return iframe;\n };\n</script>\n\n<link rel=\"stylesheet\" href=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.css\" />\n<script src=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.js\"></script>\n<script src=\"https://unpkg.com/codemirror@5.65.15/mode/markdown/markdown.js\"></script>\n\n<style>\n * {\n margin: 0;\n padding: 0;\n }\n body {\n display: flex;\n flex-direction: column;\n height: 100vh;\n overflow: hidden;\n }\n #output {\n flex: 1;\n }\n #output iframe {\n width: 100%;\n height: 100%;\n border: none;\n }\n</style>\n"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">LiveCodes</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes/react'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword module" style=color:#00009f>export</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>default</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>function</span><span class="token plain"> </span><span class="token function maybe-class-name" style=color:#d73a49>App</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"markup"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"language"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"html"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"content"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"<textarea id=\"editor\" style=\"display: none;\"></textarea>\n<div id=\"output\">Loading...</div>\n\n<script type=\"module\">\n import { createPlayground } from \"https://cdn.jsdelivr.net/npm/livecodes@0.2.0\";\n import debounce from \"https://jspm.dev/debounce\";\n\n const initialCode = \"# Hello, LiveCodes!\\n\\n\";\n\n // the code editor\n const editor = CodeMirror.fromTextArea(document.getElementById(\"editor\"), {\n lineNumbers: true,\n mode: \"markdown\",\n });\n editor.setSize(\"100%\", 200);\n editor.setValue(initialCode);\n\n // the playground\n const options = {\n view: \"headless\",\n };\n\n const livecodes = await createPlayground(options);\n await livecodes.load();\n\n const compile = async () => {\n await livecodes.setConfig({\n autoupdate: false,\n markup: {\n language: \"markdown\",\n content: editor.doc.getValue(),\n },\n });\n };\n\n // watch for changes\n editor.on(\"change\", debounce(compile, 1000));\n livecodes.watch(\"code\", ({ code, config }) => {\n createSandbox(document.querySelector(\"#output\"), code.markup.compiled);\n });\n\n await compile();\n\n // create a sandbox for safe execution of compiled code\n function createSandbox (container, html) {\n const iframe = document.createElement(\"iframe\");\n iframe.src = \"https://livecodes-sandbox.pages.dev/v7/\";\n iframe.sandbox =\n \"allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts\";\n iframe.onload = () => {\n iframe.contentWindow.postMessage({ html }, \"*\");\n };\n container.innerHTML = \"\";\n container.appendChild(iframe);\n return iframe;\n };\n</script>\n\n<link rel=\"stylesheet\" href=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.css\" />\n<script src=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.js\"></script>\n<script src=\"https://unpkg.com/codemirror@5.65.15/mode/markdown/markdown.js\"></script>\n\n<style>\n * {\n margin: 0;\n padding: 0;\n }\n body {\n display: flex;\n flex-direction: column;\n height: 100vh;\n overflow: hidden;\n }\n #output {\n flex: 1;\n }\n #output iframe {\n width: 100%;\n height: 100%;\n border: none;\n }\n</style>\n"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword control-flow" style=color:#00009f>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag spread punctuation" style=color:#393A34>{</span><span class="token tag spread operator" style=color:#393A34>...</span><span class="token tag spread" style=color:#00009f>options</span><span class="token tag spread punctuation" style=color:#393A34>}</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>setup</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports maybe-class-name">LiveCodes</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"livecodes/vue"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"config"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"markup"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"language"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"html"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"content"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> "</span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript">textarea id</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"editor\" style</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"display</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> none</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\"</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">textarea</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n</span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript">div id</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"output\"</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript maybe-class-name">Loading</span><span class="token script language-javascript spread operator" style=color:#393A34>...</span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">div</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n\n</span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript">script type</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"module\"</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n </span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> createPlayground </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> \"https</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">cdn</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">jsdelivr</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">net</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">npm</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">livecodes@</span><span class="token script language-javascript number" style=color:#36acaa>0.2</span><span class="token script language-javascript number" style=color:#36acaa>.0</span><span class="token script language-javascript">\"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n </span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports">debounce</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> \"https</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">jspm</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">dev</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">debounce\"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n\n </span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> initialCode </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> \"# </span><span class="token script language-javascript maybe-class-name">Hello</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">LiveCodes</span><span class="token script language-javascript operator" style=color:#393A34>!</span><span class="token script language-javascript">\\n\\n\"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n\n </span><span class="token script language-javascript comment" style=color:#999988;font-style:italic>// the code editor\n const editor = CodeMirror.fromTextArea(document.getElementById(\"editor\"), {\n lineNumbers: true,\n mode: \"markdown\",\n });\n editor.setSize(\"100%\", 200);\n editor.setValue(initialCode);\n\n // the playground\n const options = {\n view: \"headless\",\n };\n\n const livecodes = await createPlayground(options);\n await livecodes.load();\n\n const compile = async () => {\n await livecodes.setConfig({\n autoupdate: false,\n markup: {\n language: \"markdown\",\n content: editor.doc.getValue(),\n },\n });\n };\n\n // watch for changes\n editor.on(\"change\", debounce(compile, 1000));\n livecodes.watch(\"code\", ({ code, config }) => {\n createSandbox(document.querySelector(\"#output\"), code.markup.compiled);\n });\n\n await compile();\n\n // create a sandbox for safe execution of compiled code\n function createSandbox (container, html) {\n const iframe = document.createElement(\"iframe\");\n iframe.src = \"https://livecodes-sandbox.pages.dev/v7/\";\n iframe.sandbox =\n \"allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts\";\n iframe.onload = () => {\n iframe.contentWindow.postMessage({ html }, \"*\");\n };\n container.innerHTML = \"\";\n container.appendChild(iframe);\n return iframe;\n };\n</span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n\n<link rel=\"stylesheet\" href=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.css\" />\n<script src=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.js\"></span><span class="token script"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n<script src=\"https://unpkg.com/codemirror@5.65.15/mode/markdown/markdown.js\"></span><span class="token script"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n\n</span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>style</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token style language-css selector" style=color:#00009f>\n *</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style=color:#393A34>{</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>margin</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>0</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>padding</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>0</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css punctuation" style=color:#393A34>}</span><span class="token style language-css selector" style=color:#00009f>\n body</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style=color:#393A34>{</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>display</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> flex</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>flex-direction</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> column</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>height</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>100</span><span class="token style language-css unit">vh</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>overflow</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> hidden</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css punctuation" style=color:#393A34>}</span><span class="token style language-css selector" style=color:#00009f>\n </span><span class="token style language-css selector id" style=color:#00009f>#output</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style=color:#393A34>{</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>flex</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>1</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css punctuation" style=color:#393A34>}</span><span class="token style language-css selector" style=color:#00009f>\n </span><span class="token style language-css selector id" style=color:#00009f>#output</span><span class="token style language-css selector" style=color:#00009f> iframe</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style=color:#393A34>{</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>width</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>100</span><span class="token style language-css unit">%</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>height</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>100</span><span class="token style language-css unit">%</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>border</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> none</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css punctuation" style=color:#393A34>}</span><span class="token style language-css">\n</span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>style</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n"</span><br></span><span class=token-line style=color:#393A34><span class="token plain"> }</span><br></span><span class=token-line style=color:#393A34><span class="token plain"> }</span><br></span><span class=token-line style=color:#393A34><span class="token plain">};</span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>v-bind</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>options</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag punctuation" style=color:#393A34>/></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> onMount </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'svelte'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> createPlayground </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'livecodes'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"config"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"markup"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"language"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"html"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"content"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> "</span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript">textarea id</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"editor\" style</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"display</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> none</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\"</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">textarea</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n</span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript">div id</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"output\"</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript maybe-class-name">Loading</span><span class="token script language-javascript spread operator" style=color:#393A34>...</span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">div</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n\n</span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript">script type</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"module\"</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n </span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> createPlayground </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> \"https</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">cdn</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">jsdelivr</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">net</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">npm</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">livecodes@</span><span class="token script language-javascript number" style=color:#36acaa>0.2</span><span class="token script language-javascript number" style=color:#36acaa>.0</span><span class="token script language-javascript">\"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n </span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports">debounce</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> \"https</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">jspm</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">dev</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">debounce\"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n\n </span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> initialCode </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> \"# </span><span class="token script language-javascript maybe-class-name">Hello</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">LiveCodes</span><span class="token script language-javascript operator" style=color:#393A34>!</span><span class="token script language-javascript">\\n\\n\"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n\n </span><span class="token script language-javascript comment" style=color:#999988;font-style:italic>// the code editor\n const editor = CodeMirror.fromTextArea(document.getElementById(\"editor\"), {\n lineNumbers: true,\n mode: \"markdown\",\n });\n editor.setSize(\"100%\", 200);\n editor.setValue(initialCode);\n\n // the playground\n const options = {\n view: \"headless\",\n };\n\n const livecodes = await createPlayground(options);\n await livecodes.load();\n\n const compile = async () => {\n await livecodes.setConfig({\n autoupdate: false,\n markup: {\n language: \"markdown\",\n content: editor.doc.getValue(),\n },\n });\n };\n\n // watch for changes\n editor.on(\"change\", debounce(compile, 1000));\n livecodes.watch(\"code\", ({ code, config }) => {\n createSandbox(document.querySelector(\"#output\"), code.markup.compiled);\n });\n\n await compile();\n\n // create a sandbox for safe execution of compiled code\n function createSandbox (container, html) {\n const iframe = document.createElement(\"iframe\");\n iframe.src = \"https://livecodes-sandbox.pages.dev/v7/\";\n iframe.sandbox =\n \"allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts\";\n iframe.onload = () => {\n iframe.contentWindow.postMessage({ html }, \"*\");\n };\n container.innerHTML = \"\";\n container.appendChild(iframe);\n return iframe;\n };\n</span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n\n<link rel=\"stylesheet\" href=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.css\" />\n<script src=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.js\"></span><span class="token script"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n<script src=\"https://unpkg.com/codemirror@5.65.15/mode/markdown/markdown.js\"></span><span class="token script"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n\n</span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>style</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token style language-css selector" style=color:#00009f>\n *</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style=color:#393A34>{</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>margin</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>0</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>padding</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>0</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css punctuation" style=color:#393A34>}</span><span class="token style language-css selector" style=color:#00009f>\n body</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style=color:#393A34>{</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>display</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> flex</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>flex-direction</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> column</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>height</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>100</span><span class="token style language-css unit">vh</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>overflow</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> hidden</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css punctuation" style=color:#393A34>}</span><span class="token style language-css selector" style=color:#00009f>\n </span><span class="token style language-css selector id" style=color:#00009f>#output</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style=color:#393A34>{</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>flex</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>1</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css punctuation" style=color:#393A34>}</span><span class="token style language-css selector" style=color:#00009f>\n </span><span class="token style language-css selector id" style=color:#00009f>#output</span><span class="token style language-css selector" style=color:#00009f> iframe</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style=color:#393A34>{</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>width</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>100</span><span class="token style language-css unit">%</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>height</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>100</span><span class="token style language-css unit">%</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>border</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> none</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css punctuation" style=color:#393A34>}</span><span class="token style language-css">\n</span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>style</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n"</span><br></span><span class=token-line style=color:#393A34><span class="token plain"> }</span><br></span><span class=token-line style=color:#393A34><span class="token plain"> }</span><br></span><span class=token-line style=color:#393A34><span class="token plain">});</span><br></span><span class=token-line style=color:#393A34><span class="token plain">let container = $state(null);</span><br></span><span class=token-line style=color:#393A34><span class="token plain">onMount(() => {</span><br></span><span class=token-line style=color:#393A34><span class="token plain"> createPlayground(container, options);</span><br></span><span class=token-line style=color:#393A34><span class="token plain">});</span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name namespace" style=color:#00a4db;opacity:0.7>bind:</span><span class="token tag attr-name" style=color:#00a4db>this</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>{container}</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div></div></div></div></div></details>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=mdx-editor>MDX Editor<a href=#mdx-editor class=hash-link aria-label="Direct link to MDX Editor" title="Direct link to MDX Editor"></a></h3>
|
||
<p>In this demo, code changes are watched using the SDK method <a href=/docs/sdk/js-ts#watch><code>watch('code', callback)</code></a>. The callback function accepts an argument which is an object with the properties <code>code</code> and <code>config</code> (see <a href=/docs/sdk/js-ts#getcode><code>getCode</code></a> and <a href=/docs/sdk/js-ts#getconfig><code>getConfig</code></a>). The result HTML is obtained as <code>code.result</code>.</p>
|
||
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class=admonitionHeading_Gvgb><span class=admonitionIcon_Rf37><svg viewBox="0 0 12 16"><path fill-rule=evenodd d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"/></svg></span>tip</div><div class=admonitionContent_BuS1><p>If you do not want to run the result page in the headless playground and only want to get the generated result HTML, you can set the configuration option [<code>autoupdate](../configuration/configuration-object.mdx#autoupdate) to </code>false`.</div></div>
|
||
<!-- -->
|
||
<div class="container_Egsj undefined" style=height:80vh data-height=80vh></div><details class="alert alert--info details_iMJ2 details_sGeq" data-collapsed=true style="height:3.7rem;overflow:hidden;will-change:height;transition:height 250ms ease-in-out 0s;margin:1em 0"><summary>show code</summary><div style=display:block;overflow:hidden><div class=collapsibleContent_AEyV><div class="tabs-container tabList__CuJ"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_LNqP tabs__item--active">JS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">TS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">React<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Vue<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Svelte</ul><div class=margin-top--md><div role=tabpanel class=tabItem_Ymn6><div class="language-js codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-js codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#393A34>{</span><span class="token imports"> createPlayground </span><span class="token imports punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"markup"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"language"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"html"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"content"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"<textarea id=\"editor\" style=\"display: none;\"></textarea>\n<div id=\"output\">Loading...</div>\n\n<script type=\"module\">\n import { createPlayground } from \"https://cdn.jsdelivr.net/npm/livecodes@0.2.0\";\n import debounce from \"https://jspm.dev/debounce\";\n\n const initialCode = `import { useState, useEffect } from 'react';\n\nexport const Hello = ({name}) => {\n const [count, setCount] = useState(0);\n return (\n <>\n <h1>Hello, {name}!</h1>\n <p>You clicked {count} times.</p>\n <button onClick={() => setCount(count + 1)}>Click me</button>\n </>\n );\n};\n\n<Hello name=\"LiveCodes\"></Hello>\n\n## MDX in short\n\n- ❤️ Powerful\n- 💻 Everything is a component\n- 🔧 Customizable\n- 📚 Markdown-based\n- 🔥 Blazingly blazing fast\n\n> from [mdxjs.com](https://mdxjs.com/)\n`;\n\n // the code editor\n const editor = CodeMirror.fromTextArea(document.getElementById(\"editor\"), {\n lineNumbers: true,\n mode: \"markdown\",\n });\n editor.setSize(\"100%\", 200);\n editor.setValue(initialCode);\n\n // the playground\n const options = {\n view: \"headless\",\n config: { autoupdate: false },\n };\n\n const livecodes = await createPlayground(options);\n await livecodes.load();\n\n const compile = async () => {\n await livecodes.setConfig({\n autoupdate: false,\n markup: {\n language: \"mdx\",\n content: editor.doc.getValue(),\n },\n });\n };\n\n // watch for changes\n editor.on(\"change\", debounce(compile, 1000));\n livecodes.watch(\"code\", ({ code, config }) => {\n createSandbox(document.querySelector(\"#output\"), code.result);\n });\n\n await compile();\n\n // create a sandbox for safe execution of compiled code\n function createSandbox (container, html) {\n const iframe = document.createElement(\"iframe\");\n iframe.src = \"https://livecodes-sandbox.pages.dev/v7/\";\n iframe.sandbox =\n \"allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts\";\n iframe.onload = () => {\n iframe.contentWindow.postMessage({ html }, \"*\");\n };\n container.innerHTML = \"\";\n container.appendChild(iframe);\n return iframe;\n };\n</script>\n\n<link rel=\"stylesheet\" href=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.css\" />\n<script src=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.js\"></script>\n<script src=\"https://unpkg.com/codemirror@5.65.15/mode/markdown/markdown.js\"></script>\n\n<style>\n * {\n margin: 0;\n padding: 0;\n }\n body {\n display: flex;\n flex-direction: column;\n height: 100vh;\n overflow: hidden;\n }\n #output {\n flex: 1;\n }\n #output iframe {\n width: 100%;\n height: 100%;\n border: none;\n }\n</style>\n"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword" style=color:#00009f>import</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> createPlayground</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>type</span><span class="token plain"> </span><span class="token class-name">EmbedOptions</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> EmbedOptions </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"markup"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"language"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"html"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"content"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"<textarea id=\"editor\" style=\"display: none;\"></textarea>\n<div id=\"output\">Loading...</div>\n\n<script type=\"module\">\n import { createPlayground } from \"https://cdn.jsdelivr.net/npm/livecodes@0.2.0\";\n import debounce from \"https://jspm.dev/debounce\";\n\n const initialCode = `import { useState, useEffect } from 'react';\n\nexport const Hello = ({name}) => {\n const [count, setCount] = useState(0);\n return (\n <>\n <h1>Hello, {name}!</h1>\n <p>You clicked {count} times.</p>\n <button onClick={() => setCount(count + 1)}>Click me</button>\n </>\n );\n};\n\n<Hello name=\"LiveCodes\"></Hello>\n\n## MDX in short\n\n- ❤️ Powerful\n- 💻 Everything is a component\n- 🔧 Customizable\n- 📚 Markdown-based\n- 🔥 Blazingly blazing fast\n\n> from [mdxjs.com](https://mdxjs.com/)\n`;\n\n // the code editor\n const editor = CodeMirror.fromTextArea(document.getElementById(\"editor\"), {\n lineNumbers: true,\n mode: \"markdown\",\n });\n editor.setSize(\"100%\", 200);\n editor.setValue(initialCode);\n\n // the playground\n const options = {\n view: \"headless\",\n config: { autoupdate: false },\n };\n\n const livecodes = await createPlayground(options);\n await livecodes.load();\n\n const compile = async () => {\n await livecodes.setConfig({\n autoupdate: false,\n markup: {\n language: \"mdx\",\n content: editor.doc.getValue(),\n },\n });\n };\n\n // watch for changes\n editor.on(\"change\", debounce(compile, 1000));\n livecodes.watch(\"code\", ({ code, config }) => {\n createSandbox(document.querySelector(\"#output\"), code.result);\n });\n\n await compile();\n\n // create a sandbox for safe execution of compiled code\n function createSandbox (container, html) {\n const iframe = document.createElement(\"iframe\");\n iframe.src = \"https://livecodes-sandbox.pages.dev/v7/\";\n iframe.sandbox =\n \"allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts\";\n iframe.onload = () => {\n iframe.contentWindow.postMessage({ html }, \"*\");\n };\n container.innerHTML = \"\";\n container.appendChild(iframe);\n return iframe;\n };\n</script>\n\n<link rel=\"stylesheet\" href=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.css\" />\n<script src=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.js\"></script>\n<script src=\"https://unpkg.com/codemirror@5.65.15/mode/markdown/markdown.js\"></script>\n\n<style>\n * {\n margin: 0;\n padding: 0;\n }\n body {\n display: flex;\n flex-direction: column;\n height: 100vh;\n overflow: hidden;\n }\n #output {\n flex: 1;\n }\n #output iframe {\n width: 100%;\n height: 100%;\n border: none;\n }\n</style>\n"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">LiveCodes</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes/react'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword module" style=color:#00009f>export</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>default</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>function</span><span class="token plain"> </span><span class="token function maybe-class-name" style=color:#d73a49>App</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"markup"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"language"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"html"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"content"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"<textarea id=\"editor\" style=\"display: none;\"></textarea>\n<div id=\"output\">Loading...</div>\n\n<script type=\"module\">\n import { createPlayground } from \"https://cdn.jsdelivr.net/npm/livecodes@0.2.0\";\n import debounce from \"https://jspm.dev/debounce\";\n\n const initialCode = `import { useState, useEffect } from 'react';\n\nexport const Hello = ({name}) => {\n const [count, setCount] = useState(0);\n return (\n <>\n <h1>Hello, {name}!</h1>\n <p>You clicked {count} times.</p>\n <button onClick={() => setCount(count + 1)}>Click me</button>\n </>\n );\n};\n\n<Hello name=\"LiveCodes\"></Hello>\n\n## MDX in short\n\n- ❤️ Powerful\n- 💻 Everything is a component\n- 🔧 Customizable\n- 📚 Markdown-based\n- 🔥 Blazingly blazing fast\n\n> from [mdxjs.com](https://mdxjs.com/)\n`;\n\n // the code editor\n const editor = CodeMirror.fromTextArea(document.getElementById(\"editor\"), {\n lineNumbers: true,\n mode: \"markdown\",\n });\n editor.setSize(\"100%\", 200);\n editor.setValue(initialCode);\n\n // the playground\n const options = {\n view: \"headless\",\n config: { autoupdate: false },\n };\n\n const livecodes = await createPlayground(options);\n await livecodes.load();\n\n const compile = async () => {\n await livecodes.setConfig({\n autoupdate: false,\n markup: {\n language: \"mdx\",\n content: editor.doc.getValue(),\n },\n });\n };\n\n // watch for changes\n editor.on(\"change\", debounce(compile, 1000));\n livecodes.watch(\"code\", ({ code, config }) => {\n createSandbox(document.querySelector(\"#output\"), code.result);\n });\n\n await compile();\n\n // create a sandbox for safe execution of compiled code\n function createSandbox (container, html) {\n const iframe = document.createElement(\"iframe\");\n iframe.src = \"https://livecodes-sandbox.pages.dev/v7/\";\n iframe.sandbox =\n \"allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts\";\n iframe.onload = () => {\n iframe.contentWindow.postMessage({ html }, \"*\");\n };\n container.innerHTML = \"\";\n container.appendChild(iframe);\n return iframe;\n };\n</script>\n\n<link rel=\"stylesheet\" href=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.css\" />\n<script src=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.js\"></script>\n<script src=\"https://unpkg.com/codemirror@5.65.15/mode/markdown/markdown.js\"></script>\n\n<style>\n * {\n margin: 0;\n padding: 0;\n }\n body {\n display: flex;\n flex-direction: column;\n height: 100vh;\n overflow: hidden;\n }\n #output {\n flex: 1;\n }\n #output iframe {\n width: 100%;\n height: 100%;\n border: none;\n }\n</style>\n"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword control-flow" style=color:#00009f>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag spread punctuation" style=color:#393A34>{</span><span class="token tag spread operator" style=color:#393A34>...</span><span class="token tag spread" style=color:#00009f>options</span><span class="token tag spread punctuation" style=color:#393A34>}</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>setup</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports maybe-class-name">LiveCodes</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"livecodes/vue"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"config"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"markup"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"language"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"html"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"content"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> "</span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript">textarea id</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"editor\" style</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"display</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> none</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\"</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">textarea</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n</span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript">div id</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"output\"</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript maybe-class-name">Loading</span><span class="token script language-javascript spread operator" style=color:#393A34>...</span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">div</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n\n</span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript">script type</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"module\"</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n </span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> createPlayground </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> \"https</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">cdn</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">jsdelivr</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">net</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">npm</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">livecodes@</span><span class="token script language-javascript number" style=color:#36acaa>0.2</span><span class="token script language-javascript number" style=color:#36acaa>.0</span><span class="token script language-javascript">\"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n </span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports">debounce</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> \"https</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">jspm</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">dev</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">debounce\"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n\n </span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> initialCode </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript template-string template-punctuation string" style=color:#e3116c>`</span><span class="token script language-javascript template-string string" style=color:#e3116c>import { useState, useEffect } from 'react';\n\nexport const Hello = ({name}) => {\n const [count, setCount] = useState(0);\n return (\n <>\n <h1>Hello, {name}!</h1>\n <p>You clicked {count} times.</p>\n <button onClick={() => setCount(count + 1)}>Click me</button>\n </>\n );\n};\n\n<Hello name=\"LiveCodes\"></Hello>\n\n## MDX in short\n\n- ❤️ Powerful\n- 💻 Everything is a component\n- 🔧 Customizable\n- 📚 Markdown-based\n- 🔥 Blazingly blazing fast\n\n> from [mdxjs.com](https://mdxjs.com/)\n</span><span class="token script language-javascript template-string template-punctuation string" style=color:#e3116c>`</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n\n </span><span class="token script language-javascript comment" style=color:#999988;font-style:italic>// the code editor\n const editor = CodeMirror.fromTextArea(document.getElementById(\"editor\"), {\n lineNumbers: true,\n mode: \"markdown\",\n });\n editor.setSize(\"100%\", 200);\n editor.setValue(initialCode);\n\n // the playground\n const options = {\n view: \"headless\",\n config: { autoupdate: false },\n };\n\n const livecodes = await createPlayground(options);\n await livecodes.load();\n\n const compile = async () => {\n await livecodes.setConfig({\n autoupdate: false,\n markup: {\n language: \"mdx\",\n content: editor.doc.getValue(),\n },\n });\n };\n\n // watch for changes\n editor.on(\"change\", debounce(compile, 1000));\n livecodes.watch(\"code\", ({ code, config }) => {\n createSandbox(document.querySelector(\"#output\"), code.result);\n });\n\n await compile();\n\n // create a sandbox for safe execution of compiled code\n function createSandbox (container, html) {\n const iframe = document.createElement(\"iframe\");\n iframe.src = \"https://livecodes-sandbox.pages.dev/v7/\";\n iframe.sandbox =\n \"allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts\";\n iframe.onload = () => {\n iframe.contentWindow.postMessage({ html }, \"*\");\n };\n container.innerHTML = \"\";\n container.appendChild(iframe);\n return iframe;\n };\n</span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n\n<link rel=\"stylesheet\" href=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.css\" />\n<script src=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.js\"></span><span class="token script"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n<script src=\"https://unpkg.com/codemirror@5.65.15/mode/markdown/markdown.js\"></span><span class="token script"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n\n</span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>style</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token style language-css selector" style=color:#00009f>\n *</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style=color:#393A34>{</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>margin</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>0</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>padding</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>0</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css punctuation" style=color:#393A34>}</span><span class="token style language-css selector" style=color:#00009f>\n body</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style=color:#393A34>{</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>display</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> flex</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>flex-direction</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> column</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>height</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>100</span><span class="token style language-css unit">vh</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>overflow</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> hidden</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css punctuation" style=color:#393A34>}</span><span class="token style language-css selector" style=color:#00009f>\n </span><span class="token style language-css selector id" style=color:#00009f>#output</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style=color:#393A34>{</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>flex</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>1</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css punctuation" style=color:#393A34>}</span><span class="token style language-css selector" style=color:#00009f>\n </span><span class="token style language-css selector id" style=color:#00009f>#output</span><span class="token style language-css selector" style=color:#00009f> iframe</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style=color:#393A34>{</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>width</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>100</span><span class="token style language-css unit">%</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>height</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>100</span><span class="token style language-css unit">%</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>border</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> none</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css punctuation" style=color:#393A34>}</span><span class="token style language-css">\n</span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>style</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n"</span><br></span><span class=token-line style=color:#393A34><span class="token plain"> }</span><br></span><span class=token-line style=color:#393A34><span class="token plain"> }</span><br></span><span class=token-line style=color:#393A34><span class="token plain">};</span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>v-bind</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>options</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag punctuation" style=color:#393A34>/></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> onMount </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'svelte'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> createPlayground </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'livecodes'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"config"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"markup"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"language"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"html"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"content"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> "</span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript">textarea id</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"editor\" style</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"display</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> none</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\"</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">textarea</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n</span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript">div id</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"output\"</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript maybe-class-name">Loading</span><span class="token script language-javascript spread operator" style=color:#393A34>...</span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">div</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n\n</span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript">script type</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"module\"</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n </span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> createPlayground </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> \"https</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">cdn</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">jsdelivr</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">net</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">npm</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">livecodes@</span><span class="token script language-javascript number" style=color:#36acaa>0.2</span><span class="token script language-javascript number" style=color:#36acaa>.0</span><span class="token script language-javascript">\"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n </span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports">debounce</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> \"https</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">jspm</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">dev</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">debounce\"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n\n </span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> initialCode </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript template-string template-punctuation string" style=color:#e3116c>`</span><span class="token script language-javascript template-string string" style=color:#e3116c>import { useState, useEffect } from 'react';\n\nexport const Hello = ({name}) => {\n const [count, setCount] = useState(0);\n return (\n <>\n <h1>Hello, {name}!</h1>\n <p>You clicked {count} times.</p>\n <button onClick={() => setCount(count + 1)}>Click me</button>\n </>\n );\n};\n\n<Hello name=\"LiveCodes\"></Hello>\n\n## MDX in short\n\n- ❤️ Powerful\n- 💻 Everything is a component\n- 🔧 Customizable\n- 📚 Markdown-based\n- 🔥 Blazingly blazing fast\n\n> from [mdxjs.com](https://mdxjs.com/)\n</span><span class="token script language-javascript template-string template-punctuation string" style=color:#e3116c>`</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n\n </span><span class="token script language-javascript comment" style=color:#999988;font-style:italic>// the code editor\n const editor = CodeMirror.fromTextArea(document.getElementById(\"editor\"), {\n lineNumbers: true,\n mode: \"markdown\",\n });\n editor.setSize(\"100%\", 200);\n editor.setValue(initialCode);\n\n // the playground\n const options = {\n view: \"headless\",\n config: { autoupdate: false },\n };\n\n const livecodes = await createPlayground(options);\n await livecodes.load();\n\n const compile = async () => {\n await livecodes.setConfig({\n autoupdate: false,\n markup: {\n language: \"mdx\",\n content: editor.doc.getValue(),\n },\n });\n };\n\n // watch for changes\n editor.on(\"change\", debounce(compile, 1000));\n livecodes.watch(\"code\", ({ code, config }) => {\n createSandbox(document.querySelector(\"#output\"), code.result);\n });\n\n await compile();\n\n // create a sandbox for safe execution of compiled code\n function createSandbox (container, html) {\n const iframe = document.createElement(\"iframe\");\n iframe.src = \"https://livecodes-sandbox.pages.dev/v7/\";\n iframe.sandbox =\n \"allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts\";\n iframe.onload = () => {\n iframe.contentWindow.postMessage({ html }, \"*\");\n };\n container.innerHTML = \"\";\n container.appendChild(iframe);\n return iframe;\n };\n</span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n\n<link rel=\"stylesheet\" href=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.css\" />\n<script src=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.js\"></span><span class="token script"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n<script src=\"https://unpkg.com/codemirror@5.65.15/mode/markdown/markdown.js\"></span><span class="token script"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n\n</span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>style</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token style language-css selector" style=color:#00009f>\n *</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style=color:#393A34>{</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>margin</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>0</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>padding</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>0</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css punctuation" style=color:#393A34>}</span><span class="token style language-css selector" style=color:#00009f>\n body</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style=color:#393A34>{</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>display</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> flex</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>flex-direction</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> column</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>height</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>100</span><span class="token style language-css unit">vh</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>overflow</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> hidden</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css punctuation" style=color:#393A34>}</span><span class="token style language-css selector" style=color:#00009f>\n </span><span class="token style language-css selector id" style=color:#00009f>#output</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style=color:#393A34>{</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>flex</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>1</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css punctuation" style=color:#393A34>}</span><span class="token style language-css selector" style=color:#00009f>\n </span><span class="token style language-css selector id" style=color:#00009f>#output</span><span class="token style language-css selector" style=color:#00009f> iframe</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style=color:#393A34>{</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>width</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>100</span><span class="token style language-css unit">%</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>height</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>100</span><span class="token style language-css unit">%</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>border</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> none</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css punctuation" style=color:#393A34>}</span><span class="token style language-css">\n</span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>style</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n"</span><br></span><span class=token-line style=color:#393A34><span class="token plain"> }</span><br></span><span class=token-line style=color:#393A34><span class="token plain"> }</span><br></span><span class=token-line style=color:#393A34><span class="token plain">});</span><br></span><span class=token-line style=color:#393A34><span class="token plain">let container = $state(null);</span><br></span><span class=token-line style=color:#393A34><span class="token plain">onMount(() => {</span><br></span><span class=token-line style=color:#393A34><span class="token plain"> createPlayground(container, options);</span><br></span><span class=token-line style=color:#393A34><span class="token plain">});</span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name namespace" style=color:#00a4db;opacity:0.7>bind:</span><span class="token tag attr-name" style=color:#00a4db>this</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>{container}</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div></div></div></div></div></details>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=python-interpreter>Python Interpreter<a href=#python-interpreter class=hash-link aria-label="Direct link to Python Interpreter" title="Direct link to Python Interpreter"></a></h3>
|
||
<p>In this demo, console output is obtained using the SDK method <a href=/docs/sdk/js-ts#watch><code>watch('code', callback)</code></a>. The callback function accepts an argument which is an object with the properties <code>method</code> and <code>args</code> indicating the console method and the arguments that were passed (as an array).</p>
|
||
<!-- -->
|
||
<div class="container_Egsj undefined" style=height:80vh data-height=80vh></div><details class="alert alert--info details_iMJ2 details_sGeq" data-collapsed=true style="height:3.7rem;overflow:hidden;will-change:height;transition:height 250ms ease-in-out 0s;margin:1em 0"><summary>show code</summary><div style=display:block;overflow:hidden><div class=collapsibleContent_AEyV><div class="tabs-container tabList__CuJ"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_LNqP tabs__item--active">JS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">TS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">React<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Vue<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Svelte</ul><div class=margin-top--md><div role=tabpanel class=tabItem_Ymn6><div class="language-js codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-js codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#393A34>{</span><span class="token imports"> createPlayground </span><span class="token imports punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"markup"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"language"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"html"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"content"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"<textarea id=\"editor\" style=\"display: none\"></textarea>\n<div id=\"output\">Loading...</div>\n\n<script type=\"module\">\n import { createPlayground } from \"https://cdn.jsdelivr.net/npm/livecodes@0.2.0\";\n import debounce from \"https://jspm.dev/debounce\";\n\n const initialCode = `def say_hello(name):\n return f\"Hello, {name}!\"\n\nprint(say_hello(\"LiveCodes\"))\n`;\n\n // the code editor\n const editor = CodeMirror.fromTextArea(document.getElementById(\"editor\"), {\n lineNumbers: true,\n mode: \"python\",\n });\n editor.setSize(\"100%\", 250);\n editor.setValue(initialCode);\n\n // the playground\n const options = {\n view: \"headless\",\n };\n\n const livecodes = await createPlayground(options);\n await livecodes.load();\n\n const run = async () => {\n await livecodes.setConfig({\n autoupdate: true,\n script: {\n language: \"python\",\n content: editor.doc.getValue(),\n },\n });\n };\n\n // watch for changes\n editor.on(\"change\", debounce(run, 1000));\n livecodes.watch(\"console\", ({ method, args }) => {\n const output = document.querySelector(\"#output\");\n output.innerHTML = args.join(\"\\n\");\n if (method === \"error\") {\n output.style.color = \"red\";\n } else {\n output.style.color = \"unset\";\n }\n });\n\n await run();\n</script>\n\n<link rel=\"stylesheet\" href=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.css\" />\n<script src=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.js\"></script>\n<script src=\"https://unpkg.com/codemirror@5.65.15/mode/python/python.js\"></script>\n\n<style>\n * {\n margin: 0;\n padding: 0;\n }\n body {\n display: flex;\n flex-direction: column;\n height: 100vh;\n overflow: hidden;\n }\n #output {\n flex: 1;\n margin: 1em;\n white-space: pre;\n font-family: monospace;\n }\n #output iframe {\n width: 100%;\n height: 100%;\n border: none;\n }\n</style>\n"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword" style=color:#00009f>import</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> createPlayground</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>type</span><span class="token plain"> </span><span class="token class-name">EmbedOptions</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> EmbedOptions </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"markup"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"language"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"html"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"content"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"<textarea id=\"editor\" style=\"display: none\"></textarea>\n<div id=\"output\">Loading...</div>\n\n<script type=\"module\">\n import { createPlayground } from \"https://cdn.jsdelivr.net/npm/livecodes@0.2.0\";\n import debounce from \"https://jspm.dev/debounce\";\n\n const initialCode = `def say_hello(name):\n return f\"Hello, {name}!\"\n\nprint(say_hello(\"LiveCodes\"))\n`;\n\n // the code editor\n const editor = CodeMirror.fromTextArea(document.getElementById(\"editor\"), {\n lineNumbers: true,\n mode: \"python\",\n });\n editor.setSize(\"100%\", 250);\n editor.setValue(initialCode);\n\n // the playground\n const options = {\n view: \"headless\",\n };\n\n const livecodes = await createPlayground(options);\n await livecodes.load();\n\n const run = async () => {\n await livecodes.setConfig({\n autoupdate: true,\n script: {\n language: \"python\",\n content: editor.doc.getValue(),\n },\n });\n };\n\n // watch for changes\n editor.on(\"change\", debounce(run, 1000));\n livecodes.watch(\"console\", ({ method, args }) => {\n const output = document.querySelector(\"#output\");\n output.innerHTML = args.join(\"\\n\");\n if (method === \"error\") {\n output.style.color = \"red\";\n } else {\n output.style.color = \"unset\";\n }\n });\n\n await run();\n</script>\n\n<link rel=\"stylesheet\" href=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.css\" />\n<script src=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.js\"></script>\n<script src=\"https://unpkg.com/codemirror@5.65.15/mode/python/python.js\"></script>\n\n<style>\n * {\n margin: 0;\n padding: 0;\n }\n body {\n display: flex;\n flex-direction: column;\n height: 100vh;\n overflow: hidden;\n }\n #output {\n flex: 1;\n margin: 1em;\n white-space: pre;\n font-family: monospace;\n }\n #output iframe {\n width: 100%;\n height: 100%;\n border: none;\n }\n</style>\n"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">LiveCodes</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes/react'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword module" style=color:#00009f>export</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>default</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>function</span><span class="token plain"> </span><span class="token function maybe-class-name" style=color:#d73a49>App</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"markup"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"language"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"html"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"content"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"<textarea id=\"editor\" style=\"display: none\"></textarea>\n<div id=\"output\">Loading...</div>\n\n<script type=\"module\">\n import { createPlayground } from \"https://cdn.jsdelivr.net/npm/livecodes@0.2.0\";\n import debounce from \"https://jspm.dev/debounce\";\n\n const initialCode = `def say_hello(name):\n return f\"Hello, {name}!\"\n\nprint(say_hello(\"LiveCodes\"))\n`;\n\n // the code editor\n const editor = CodeMirror.fromTextArea(document.getElementById(\"editor\"), {\n lineNumbers: true,\n mode: \"python\",\n });\n editor.setSize(\"100%\", 250);\n editor.setValue(initialCode);\n\n // the playground\n const options = {\n view: \"headless\",\n };\n\n const livecodes = await createPlayground(options);\n await livecodes.load();\n\n const run = async () => {\n await livecodes.setConfig({\n autoupdate: true,\n script: {\n language: \"python\",\n content: editor.doc.getValue(),\n },\n });\n };\n\n // watch for changes\n editor.on(\"change\", debounce(run, 1000));\n livecodes.watch(\"console\", ({ method, args }) => {\n const output = document.querySelector(\"#output\");\n output.innerHTML = args.join(\"\\n\");\n if (method === \"error\") {\n output.style.color = \"red\";\n } else {\n output.style.color = \"unset\";\n }\n });\n\n await run();\n</script>\n\n<link rel=\"stylesheet\" href=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.css\" />\n<script src=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.js\"></script>\n<script src=\"https://unpkg.com/codemirror@5.65.15/mode/python/python.js\"></script>\n\n<style>\n * {\n margin: 0;\n padding: 0;\n }\n body {\n display: flex;\n flex-direction: column;\n height: 100vh;\n overflow: hidden;\n }\n #output {\n flex: 1;\n margin: 1em;\n white-space: pre;\n font-family: monospace;\n }\n #output iframe {\n width: 100%;\n height: 100%;\n border: none;\n }\n</style>\n"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword control-flow" style=color:#00009f>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag spread punctuation" style=color:#393A34>{</span><span class="token tag spread operator" style=color:#393A34>...</span><span class="token tag spread" style=color:#00009f>options</span><span class="token tag spread punctuation" style=color:#393A34>}</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>setup</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports maybe-class-name">LiveCodes</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"livecodes/vue"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"config"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"markup"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"language"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"html"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"content"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> "</span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript">textarea id</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"editor\" style</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"display</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> none\"</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">textarea</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n</span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript">div id</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"output\"</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript maybe-class-name">Loading</span><span class="token script language-javascript spread operator" style=color:#393A34>...</span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">div</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n\n</span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript">script type</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"module\"</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n </span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> createPlayground </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> \"https</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">cdn</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">jsdelivr</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">net</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">npm</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">livecodes@</span><span class="token script language-javascript number" style=color:#36acaa>0.2</span><span class="token script language-javascript number" style=color:#36acaa>.0</span><span class="token script language-javascript">\"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n </span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports">debounce</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> \"https</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">jspm</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">dev</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">debounce\"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n\n </span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> initialCode </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript template-string template-punctuation string" style=color:#e3116c>`</span><span class="token script language-javascript template-string string" style=color:#e3116c>def say_hello(name):\n return f\"Hello, {name}!\"\n\nprint(say_hello(\"LiveCodes\"))\n</span><span class="token script language-javascript template-string template-punctuation string" style=color:#e3116c>`</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n\n </span><span class="token script language-javascript comment" style=color:#999988;font-style:italic>// the code editor\n const editor = CodeMirror.fromTextArea(document.getElementById(\"editor\"), {\n lineNumbers: true,\n mode: \"python\",\n });\n editor.setSize(\"100%\", 250);\n editor.setValue(initialCode);\n\n // the playground\n const options = {\n view: \"headless\",\n };\n\n const livecodes = await createPlayground(options);\n await livecodes.load();\n\n const run = async () => {\n await livecodes.setConfig({\n autoupdate: true,\n script: {\n language: \"python\",\n content: editor.doc.getValue(),\n },\n });\n };\n\n // watch for changes\n editor.on(\"change\", debounce(run, 1000));\n livecodes.watch(\"console\", ({ method, args }) => {\n const output = document.querySelector(\"#output\");\n output.innerHTML = args.join(\"\\n\");\n if (method === \"error\") {\n output.style.color = \"red\";\n } else {\n output.style.color = \"unset\";\n }\n });\n\n await run();\n</span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n\n<link rel=\"stylesheet\" href=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.css\" />\n<script src=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.js\"></span><span class="token script"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n<script src=\"https://unpkg.com/codemirror@5.65.15/mode/python/python.js\"></span><span class="token script"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n\n</span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>style</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token style language-css selector" style=color:#00009f>\n *</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style=color:#393A34>{</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>margin</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>0</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>padding</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>0</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css punctuation" style=color:#393A34>}</span><span class="token style language-css selector" style=color:#00009f>\n body</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style=color:#393A34>{</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>display</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> flex</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>flex-direction</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> column</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>height</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>100</span><span class="token style language-css unit">vh</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>overflow</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> hidden</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css punctuation" style=color:#393A34>}</span><span class="token style language-css selector" style=color:#00009f>\n </span><span class="token style language-css selector id" style=color:#00009f>#output</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style=color:#393A34>{</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>flex</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>1</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>margin</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>1</span><span class="token style language-css unit">em</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>white-space</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> pre</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>font-family</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> monospace</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css punctuation" style=color:#393A34>}</span><span class="token style language-css selector" style=color:#00009f>\n </span><span class="token style language-css selector id" style=color:#00009f>#output</span><span class="token style language-css selector" style=color:#00009f> iframe</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style=color:#393A34>{</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>width</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>100</span><span class="token style language-css unit">%</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>height</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>100</span><span class="token style language-css unit">%</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>border</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> none</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css punctuation" style=color:#393A34>}</span><span class="token style language-css">\n</span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>style</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n"</span><br></span><span class=token-line style=color:#393A34><span class="token plain"> }</span><br></span><span class=token-line style=color:#393A34><span class="token plain"> }</span><br></span><span class=token-line style=color:#393A34><span class="token plain">};</span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>v-bind</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>options</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag punctuation" style=color:#393A34>/></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> onMount </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'svelte'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> createPlayground </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'livecodes'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"config"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"markup"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"language"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"html"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"content"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> "</span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript">textarea id</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"editor\" style</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"display</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> none\"</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">textarea</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n</span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript">div id</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"output\"</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript maybe-class-name">Loading</span><span class="token script language-javascript spread operator" style=color:#393A34>...</span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">div</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n\n</span><span class="token script language-javascript operator" style=color:#393A34><</span><span class="token script language-javascript">script type</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"module\"</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n </span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> createPlayground </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> \"https</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">cdn</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">jsdelivr</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">net</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">npm</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">livecodes@</span><span class="token script language-javascript number" style=color:#36acaa>0.2</span><span class="token script language-javascript number" style=color:#36acaa>.0</span><span class="token script language-javascript">\"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n </span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports">debounce</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> \"https</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">jspm</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">dev</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">debounce\"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n\n </span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> initialCode </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript template-string template-punctuation string" style=color:#e3116c>`</span><span class="token script language-javascript template-string string" style=color:#e3116c>def say_hello(name):\n return f\"Hello, {name}!\"\n\nprint(say_hello(\"LiveCodes\"))\n</span><span class="token script language-javascript template-string template-punctuation string" style=color:#e3116c>`</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n\n </span><span class="token script language-javascript comment" style=color:#999988;font-style:italic>// the code editor\n const editor = CodeMirror.fromTextArea(document.getElementById(\"editor\"), {\n lineNumbers: true,\n mode: \"python\",\n });\n editor.setSize(\"100%\", 250);\n editor.setValue(initialCode);\n\n // the playground\n const options = {\n view: \"headless\",\n };\n\n const livecodes = await createPlayground(options);\n await livecodes.load();\n\n const run = async () => {\n await livecodes.setConfig({\n autoupdate: true,\n script: {\n language: \"python\",\n content: editor.doc.getValue(),\n },\n });\n };\n\n // watch for changes\n editor.on(\"change\", debounce(run, 1000));\n livecodes.watch(\"console\", ({ method, args }) => {\n const output = document.querySelector(\"#output\");\n output.innerHTML = args.join(\"\\n\");\n if (method === \"error\") {\n output.style.color = \"red\";\n } else {\n output.style.color = \"unset\";\n }\n });\n\n await run();\n</span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n\n<link rel=\"stylesheet\" href=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.css\" />\n<script src=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.js\"></span><span class="token script"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n<script src=\"https://unpkg.com/codemirror@5.65.15/mode/python/python.js\"></span><span class="token script"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n\n</span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>style</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token style language-css selector" style=color:#00009f>\n *</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style=color:#393A34>{</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>margin</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>0</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>padding</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>0</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css punctuation" style=color:#393A34>}</span><span class="token style language-css selector" style=color:#00009f>\n body</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style=color:#393A34>{</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>display</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> flex</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>flex-direction</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> column</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>height</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>100</span><span class="token style language-css unit">vh</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>overflow</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> hidden</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css punctuation" style=color:#393A34>}</span><span class="token style language-css selector" style=color:#00009f>\n </span><span class="token style language-css selector id" style=color:#00009f>#output</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style=color:#393A34>{</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>flex</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>1</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>margin</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>1</span><span class="token style language-css unit">em</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>white-space</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> pre</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>font-family</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> monospace</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css punctuation" style=color:#393A34>}</span><span class="token style language-css selector" style=color:#00009f>\n </span><span class="token style language-css selector id" style=color:#00009f>#output</span><span class="token style language-css selector" style=color:#00009f> iframe</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style=color:#393A34>{</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>width</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>100</span><span class="token style language-css unit">%</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>height</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> </span><span class="token style language-css number" style=color:#36acaa>100</span><span class="token style language-css unit">%</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css property" style=color:#36acaa>border</span><span class="token style language-css punctuation" style=color:#393A34>:</span><span class="token style language-css"> none</span><span class="token style language-css punctuation" style=color:#393A34>;</span><span class="token style language-css">\n </span><span class="token style language-css punctuation" style=color:#393A34>}</span><span class="token style language-css">\n</span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>style</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n"</span><br></span><span class=token-line style=color:#393A34><span class="token plain"> }</span><br></span><span class=token-line style=color:#393A34><span class="token plain"> }</span><br></span><span class=token-line style=color:#393A34><span class="token plain">});</span><br></span><span class=token-line style=color:#393A34><span class="token plain">let container = $state(null);</span><br></span><span class=token-line style=color:#393A34><span class="token plain">onMount(() => {</span><br></span><span class=token-line style=color:#393A34><span class="token plain"> createPlayground(container, options);</span><br></span><span class=token-line style=color:#393A34><span class="token plain">});</span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name namespace" style=color:#00a4db;opacity:0.7>bind:</span><span class="token tag attr-name" style=color:#00a4db>this</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>{container}</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div></div></div></div></div></details></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class=col><a href=https://github.com/live-codes/livecodes/tree/develop/docs/docs/sdk/headless.mdx target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_Z9Sw aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href=/docs/sdk/svelte><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Svelte</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/advanced/><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Advanced Topics</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#usage class="table-of-contents__link toc-highlight">Usage</a><li><a href=#examples class="table-of-contents__link toc-highlight">Examples</a><ul><li><a href=#markdown-editor class="table-of-contents__link toc-highlight">Markdown Editor</a><li><a href=#mdx-editor class="table-of-contents__link toc-highlight">MDX Editor</a><li><a href=#python-interpreter class="table-of-contents__link toc-highlight">Python Interpreter</a></ul></ul><div class="custom-content custom-content-toc content_kfNa">
|
||
<div class=sponsors>
|
||
<div class=sponsors-title>Sponsors</div>
|
||
<ul>
|
||
|
||
<li><a href=https://livecodes.io/docs/sponsor title="Become a sponsor">Your Logo</a></li>
|
||
</ul>
|
||
</div>
|
||
</div></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class=footer__title>Docs</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/overview>Overview</a><li class=footer__item><a class=footer__link-item href=/docs/why>Why Another Playground?</a><li class=footer__item><a class=footer__link-item href=/docs/getting-started>Getting Started</a><li class=footer__item><a class=footer__link-item href=/docs/features>Features</a><li class=footer__item><a class=footer__link-item href=/docs/languages>Languages</a><li class=footer__item><a class=footer__link-item href=/docs/sdk>SDK</a></ul></div><div class="col footer__col"><div class=footer__title>LiveCodes</div><ul class="footer__items clean-list"><li class=footer__item><a href=/docs/../ target=_blank rel="noopener noreferrer" class=footer__link-item>App<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=/docs/../?new target=_blank rel="noopener noreferrer" class=footer__link-item>Starter Templates<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href="/docs/../?screen=import" target=_blank rel="noopener noreferrer" class=footer__link-item>Import...<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a class=footer__link-item href=/docs/features/ai>AI Code Assistant 🪄</a><li class=footer__item><a class=footer__link-item href=/docs/bookmarklet>Bookmarklet</a><li class=footer__item><span style="display: flex; gap: 0.5em; align-items: baseline;"><a href=/docs/llms.txt target=_blank class=footer__link-item>llms.txt</a>-<a href=/docs/llms-full.txt target=_blank class=footer__link-item>llms-full.txt</a></span></ul></div><div class="col footer__col"><div class=footer__title>Info</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/credits>Credits</a><li class=footer__item><a class=footer__link-item href=/docs/license>License</a><li class=footer__item><a class=footer__link-item href=/docs/sponsor>Sponsor 💚</a><li class=footer__item><a class=footer__link-item href=/docs/contact>Contact</a><li class=footer__item><a class=footer__link-item href=/docs/about>About us</a></ul></div><div class="col footer__col"><div class=footer__title>More</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://blog.livecodes.io target=_self rel="noopener noreferrer" class=footer__link-item>Blog<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://github.com/live-codes/livecodes target=_blank rel="noopener noreferrer" class=footer__link-item>GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://twitter.com/livecodes_io target=_blank rel="noopener noreferrer" class=footer__link-item>𝕏 / Twitter<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://dev.to/livecodes_io target=_blank rel="noopener noreferrer" class=footer__link-item>Dev<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://www.npmjs.com/package/livecodes target=_blank rel="noopener noreferrer" class=footer__link-item>npm<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://status.livecodes.io target=_blank rel="noopener noreferrer" class="footer__link-item status-link"><span>Status</span><svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div></div><div class="footer__bottom text--center"><div class=footer__copyright><br> Released under the MIT License <br>
|
||
Copyright © 2025
|
||
<a href=https://github.com/hatemhosny target=_blank rel="noopener noreferrer">Hatem Hosny</a></div></div></div></footer></div> |