Interactive code examples on php.net about doc-en HOT 4 OPEN

<!-- straight from the PHP manual -->
<p><strong>Example #1 Using a negative <code class="parameter" style="cursor: pointer;">offset</code></strong></p>
<div class="example-contents">
    <div class="phpcode"><code><span style="color: #000000"><span style="color: #0000BB">&lt;?php<br>$rest </span><span style="color: #007700">= </span><span style="color: #0000BB">substr</span><span style="color: #007700">(</span><span style="color: #DD0000">"abcdef"</span><span style="color: #007700">, -</span><span style="color: #0000BB">1</span><span style="color: #007700">);    </span><span style="color: #FF8000">// returns "f"<br></span><span style="color: #0000BB">$rest </span><span style="color: #007700">= </span><span style="color: #0000BB">substr</span><span style="color: #007700">(</span><span style="color: #DD0000">"abcdef"</span><span style="color: #007700">, -</span><span style="color: #0000BB">2</span><span style="color: #007700">);    </span><span style="color: #FF8000">// returns "ef"<br></span><span style="color: #0000BB">$rest </span><span style="color: #007700">= </span><span style="color: #0000BB">substr</span><span style="color: #007700">(</span><span style="color: #DD0000">"abcdef"</span><span style="color: #007700">, -</span><span style="color: #0000BB">3</span><span style="color: #007700">, </span><span style="color: #0000BB">1</span><span style="color: #007700">); </span><span style="color: #FF8000">// returns "d"<br></span><span style="color: #0000BB">?&gt;</span></span></code></div>
</div>

<button type="button" class="run-code-on-3v4l">try it</button>

<script>
    // receives updates on status of execution
    window.addEventListener('message', (event) => {
        if (event.origin !== 'https://3v4l.org') return;

        switch (event.data) {
            case 'busy':
            case 'done':
                alert('script code is '+ event.data);
            break;
        }
    }, false);

    document.querySelectorAll('.run-code-on-3v4l').forEach(function (el) {
        el.addEventListener('click', function() {
            var i;
            //FIXME detect if an iframe has already been opened for this el
            if (true) {
                i = document.createElement('iframe');
                i.classList.add('3v4l-live');

                i.src = 'https://3v4l.org/#live';
                el.after(i);
            }

            i.addEventListener('load', (e) => {
                //FIXME make me dynamic
                var code = document.querySelectorAll('.example-contents')[0].innerText;
                i.contentWindow.postMessage(document.querySelectorAll('.example-contents')[0].textContent, 'https://3v4l.org');
            });
        });
    });
</script>