Hello, I would like to know if is possible to customize (Customizer Field), a custom code. The idea is to change just the part inside tab 2:
$content = file_get_contents(get_template_directory() . '/template-parts/app.php');
$escaped_content = htmlentities($content);
echo '<div style="white-space: pre; font-family: monospace;">' . $escaped_content . '</div>';
Here we have the complete section:
<section class="container mx-auto mt-20" cms-section="tab" cms-section-title="tabs">
<!-- nomes dos componentes -->
<div class="mb-4 border-b border-gray-200 dark:border-gray-700">
<ul class="flex flex-wrap justify-center -mb-px text-xl font-normal text-center" id="custom-tabs-2" data-tabs-toggle="#custom-tabs-content-2" data-tabs-active-classes="text-purple-600 hover:text-purple-600 dark:text-purple-500 dark:hover:text-purple-500 border-purple-600 dark:border-purple-500" data-tabs-inactive-classes="dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300" role="tablist">
<li class="me-2" role="presentation">
<button class="inline-block p-4 border-b-2 rounded-t-lg" id="tab-2-1" data-tabs-target="#tab-content-2-1" type="button" role="tab" aria-controls="tab-content-2-1" aria-selected="true">
Componente
</button>
</li>
<li class="me-2" role="presentation">
<button class="inline-block p-4 border-b-2 rounded-t-lg" id="tab-2-2" data-tabs-target="#tab-content-2-2" type="button" role="tab" aria-controls="tab-content-2-2" aria-selected="false">
Tailwind
</button>
</li>
<li class="me-2" role="presentation">
<button class="inline-block p-4 border-b-2 rounded-t-lg" id="tab-2-3" data-tabs-target="#tab-content-2-3" type="button" role="tab" aria-controls="tab-content-2-3" aria-selected="false">
Tailwind.config
</button>
</li>
</ul>
</div>
<!-- conteudos dos componentes -->
<div id="custom-tabs-content-2">
<!-- Conteúdo da aba 1 -->
<div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="tab-content-2-1" role="tabpanel" aria-labelledby="tab-2-1" data-pg-name="tab-content-1">
<div data-empty-placeholder cms-editable="compo" cms-editable-type="content" cms-editable-label="compo" cms-editable-section="tab">
</div>
</div>
<!-- Conteúdo da aba 2 -->
<div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="tab-content-2-2" role="tabpanel" aria-labelledby="tab-2-2" data-pg-name="tab-content-2">
<div class="max-h-[420px] bg-gray-900 text-green-400 p-4 rounded-lg text-sm overflow-auto">
<div>
<pre cms-editable="cod" cms-editable-type="content" cms-editable-label="cod" cms-editable-section="tab">
<code cms-function="code" cms-function-type="content" cms-function-code="$content = file_get_contents(get_template_directory() . '/template-parts/app.php');
$escaped_content = htmlentities($content);
echo '<div style="white-space: pre; font-family: monospace;">' . $escaped_content . '</div>';">
</code>
</pre>
</div>
</div>
</div>
<!-- Conteúdo da aba 3 -->
<div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="tab-content-2-3" role="tabpanel" aria-labelledby="tab-2-3" data-pg-name="tab-content-3"><div data-empty-placeholder cms-template-part="template-parts/crypto"></div>
</div>
</div>
</section>
