zulip/web/templates/settings/playground_settings_admin.hbs

<div id="playground-settings" class="settings-section" data-name="playground-settings">
    <div class="admin-table-wrapper">
        <p>
            {{#tr}}
                Code playgrounds are interactive in-browser development environments,
                such as <z-link-repl>replit</z-link-repl>, that are designed to make
                it convenient to edit and debug code. Zulip <z-link-code-blocks>code blocks</z-link-code-blocks>
                that are tagged with a programming language will have a button visible on
                hover that allows users to open the code block on the code playground site.
                {{#*inline "z-link-repl"}}<a href="https://replit.com/" target="_blank" rel="noopener noreferrer">{{> @partial-block}}</a>{{/inline}}
                {{#*inline "z-link-code-blocks"}}<a href="/help/code-blocks" target="_blank" rel="noopener noreferrer">{{> @partial-block}}</a>{{/inline}}
            {{/tr}}
        </p>
        <p>
            {{t "For example, to configure a code playground for code blocks tagged as Python,
              you can set:" }}
        </p>
        <ul>
            <li>
                {{t "Language" }}: <span class="rendered_markdown"><code>Python</code></span>
            </li>
            <li>
                {{t "Name" }}: <span class="rendered_markdown"><code>Python3 playground</code></span>
            </li>
            <li>
                {{t "URL template" }}: <span class="rendered_markdown"><code>https://replit.com/languages/python3/?code={code}</code></span>
            </li>
        </ul>
        <p>
            {{#tr}}
                For more examples and technical details, see the <z-link>help center documentation</z-link>
                on adding code playgrounds.
                {{#*inline "z-link"}}<a href="/help/code-blocks#code-playgrounds" target="_blank" rel="noopener noreferrer">{{> @partial-block}}</a>{{/inline}}
            {{/tr}}
        </p>

        {{#if is_admin}}
        <form class="admin-playground-form">
            <div class="add-new-playground-box grey-box">
                <div class="new-playground-form wrapper">
                    <div class="settings-section-title">
                        {{t "Add a new code playground" }}
                        {{> ../help_link_widget link="/help/code-blocks#code-playgrounds" }}
                    </div>
                    <div class="alert" id="admin-playground-status"></div>
                    <div class="input-group">
                        <label for="playground_pygments_language"> {{t "Language" }}</label>
                        <input type="text" id="playground_pygments_language" class="settings_text_input" name="pygments_language" autocomplete="off" placeholder="Python" />
                    </div>
                    <div class="input-group">
                        <label for="playground_name"> {{t "Name" }}</label>
                        <input type="text" id="playground_name" class="settings_text_input" name="playground_name" autocomplete="off" placeholder="Python3 playground" />
                    </div>
                    <div class="input-group">
                        <label for="playground_url_template"> {{t "URL template" }}</label>
                        <input type="text" id="playground_url_template" class="settings_text_input" name="url_template" placeholder="https://replit.com/languages/python3/?code={code}" />
                    </div>
                    <button type="submit" id="submit_playground_button" class="button rounded sea-green">
                        {{t 'Add code playground' }}
                    </button>
                </div>
            </div>
        </form>
        {{/if}}

        <div class="settings_panel_list_header">
            <h3>{{t "Code playgrounds"}}</h3>
            <input type="text" class="search filter_text_input" placeholder="{{t 'Filter code playgrounds' }}" aria-label="{{t 'Filter code playgrounds' }}"/>
        </div>

        <div class="progressive-table-wrapper" data-simplebar>
            <table class="table table-striped wrapped-table admin_playgrounds_table">
                <thead class="table-sticky-headers">
                    <th class="active" data-sort="alphabetic" data-sort-prop="pygments_language">{{t "Language" }}</th>
                    <th data-sort="alphabetic" data-sort-prop="name">{{t "Name" }}</th>
                    <th data-sort="alphabetic" data-sort-prop="url_template">{{t "URL template" }}</th>
                    {{#if is_admin}}
                    <th class="actions">{{t "Actions" }}</th>
                    {{/if}}
                </thead>
                <tbody id="admin_playgrounds_table" data-empty="{{t 'No playgrounds configured.' }}" data-search-results-empty="{{t 'No playgrounds match your current filter.' }}"></tbody>
            </table>
        </div>
    </div>
</div>