Eğer WordPress’te eklenti kurmadan eklediğiniz kod bloklarınızı Prism.js ile biçimlendirmek istiyorsanız. Aşağıdaki adımları takip edebilirsiniz.
header.php içine ( <head> içine ) bu CSS linkini ekleyin.
<link href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism-tomorrow.css" rel="stylesheet" />footer.php içine ( </body> öncesi )
<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script>
<!-- İhtiyacın olan dilleri ekle -->
<script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-clike.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-javascript.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-php.min.js"></script>Normalde bir kod parçacığı eklediğinizde WordPress’te class adı otomatik olarak “wp-block-code” olur.
<pre class="wp-block-code"><code>Prism.js çalışması için kod bloklarına bu şekilde class parametresi eklemeniz lazım yoksa çalışmaz.
Eğer ikisini birden kullanmak isterseniz aşağıdaki gibi bırakabilirsiniz.
<pre><code class="language-js">
console.log("Hello World");
</code></pre><pre class="wp-block-code"><code class="language-clike">
{
"name": "Mustafa"
}
</code></pre>Bu class adını eklemek için de aşağıdaki gibi kod parçacığında HTML olarak düzenle tıklanır.
Gelen ekranda gördüğünüz gibi, WordPress bu bloğu otomatik olarak ekledi. İsterseniz bunu değiştirip kendi kodunuza göre düzenleyin ya da ikisini birden kullanın. Bu tamamen size kalmış durumda.
Eğer bu classları otomatik olarak eklemek istiyorsanız, functions.php içine böyle ufak bir kod yazabilirsiniz.
function add_prism_class($content) {
return preg_replace(
'/<pre class="wp-block-code"><code>/',
'<pre class="wp-block-code"><code class="language-clike">',
$content
);
}
add_filter('the_content', 'add_prism_class');Link: https://prismjs.com/
