script
 import('https://cdn.jsdelivr.net/npm/playground-elements@0.18.1/+esm')

fileNameAtom
 paint constant.language
playgroundFileParser
 cue file
 description file name and contents
 atoms cueAtom fileNameAtom
 catchAllParser lineOfCodeParser
 javascript
  buildHtml() {
   const extension = this.content.split(".").pop()
   return `<script type="sample/${extension}" filename="${this.content}">
  ${this.subparticlesToString()}
  </script>
   `;
  }

playgroundIdeParser
 extends abstractScrollParser
 inScope playgroundFileParser aftertextStyleParser
 description playground-ide for html/typescript/javascript
 cueFromId
 javascript
  get styles() {
   const style = this.getParticle("style")
   return style? `style="${style.content}"` : ""
  }
  buildHtml() {
   return `<playground-ide ${this.styles} editable-file-system line-numbers resizable>
    ${this.filter(p => p.buildHtml).map(p => p.buildHtml()).join("\n")}
  </playground-ide>`;
  }

playgroundPreviewParser
 extends abstractAftertextParser
 inScope playgroundFileParser aftertextStyleParser aftertextIdParser
 description playground-preview for html/typescript/javascript
 cueFromId
 javascript
  get styles() { 
   const style = this.getParticle("style")
   return style? `style="${style.content}"` : ""
  }
  buildHtml() {
   return `<playground-project id="${this.htmlId}" style="display:none">
    ${this.filter(p => p.buildHtml).map(p => p.buildHtml()).join("\n")}
  </playground-project>
  <playground-preview ${this.styles} project="${this.htmlId}"></playground-preview>`;
  }