Copy
      
      
    
  

    
      class r{constructor(){this.builtInTools=[g.Undo,g.Code];this.isE2E=v(b);this.control=new T("")}ngOnInit(){w(import("./chunk-RFKILVM6.mjs")).then(l=>{let[e]=M(l);this.control.patchValue(e??null)})}}
    

      
        Copy
      
      
    
  

    
      <tui-editor
    class="editor"
    [formControl]="control"
    [tools]="builtInTools"
/>

<tui-accordion [closeOthers]="false">
    <button [tuiAccordion]="isE2E">HTML</button>
    <tui-expand>
        <ng-container *tuiItem>
            <tui-editor-socket [content]="control.value" />
        </ng-container>
    </tui-expand>

    <button [tuiAccordion]="isE2E">Text</button>
    <tui-expand>
        <ng-container *tuiItem>
            <span class="code">{{ control.value }}</span>
        </ng-container>
    </tui-expand>
</tui-accordion>

    

      
        Copy
      
      
    
  

    
      @font-face {
    font-family: 'Monaspace';
    src: url('https://assets.codepen.io/2585/MonaspaceKrypton-SyntaxHighlighter-Regular.woff2') format('woff2');
}

/* stylelint-disable -- unsupported-browser-features */
@font-palette-values --kung-fury {
    @font-palette-values --kung-fury {
        font-family: Monaspace, sans-serif;
        override-colors:
            0 hsl(188 100% 75%),
            /* curlies and tags */ 1 hsl(250 100% 80%),
            /* ? */ 2 hsl(188 100% 75%),
            /* function */ 3 hsl(188 100% 75%),
            /* ? */ 4 hsl(250 100% 80%),
            /* () */ 5 hsl(210 40% 98%),
            /* property name */ 6 hsl(210 40% 80%),
            /* ? */ 7 hsl(300 100% 80%) /* numbers */;
    }
}
/* stylelint-enable */

:host {
    ::ng-deep {
        .tui-editor-socket pre:has(code[class='language-ts']) {
            background: var(--tui-background-accent-opposite-hover);
            min-inline-size: 0;
            overflow-x: auto;
            padding: 2ch;
        }

        code[class='language-ts'] {
            font-family: 'Monaspace', monospace;
            /* stylelint-disable-next-line -- unsupported browser feature */
            font-palette: --kung-fury;
            color: var(--tui-background-base);
            text-shadow: none;
        }
    }
}

    

      
        Copy
      
      
    
  

    
      <pre><code>Hello world</code></pre>
<code>Tell me please, why?</code>
<pre><code class="language-ts">class Greeter {
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return "Hello, " + this.greeting;
  }
}

let greeter = new Greeter("world");
</code></pre>
<pre><code>https://github.com/taiga-family/taiga-ui</code></pre>
<p></p>
    

      
        Copy