Destek Formu
+90 551 407 5040 iletisim@konyaaltiteknikservis.com

WordPress Kod Renklendirme / Syntax Highlight – PrismJS

▪ ▪19/12/2018 ▪Wordpress

WordPress Kod Renklendirme konusunu bir önce ki yazımda ele almıştım. Daha önce yazdığım bu yazı standart kullanıcıların fazlasıyla işine yarayacaktır.
Varsayılan olarak JS, CSS, HTML, PHP gibi programlama dillerini otomatik olarak tanıyor ve ona uygun kod biçimlendirmeleri uyguluyordu. İncelemek isteyenler için:  WordPress Kod Renklendirme / Syntax Highlight – CodePretty

Başka bir yazımda paylaşmak üzere oluşturduğum Powershell kodları Code-Pretty scripti ile istediğim biçimde değildi. Bende daha geniş kapsamlı istediğim kodları yazımda kullanabileceğim başka bir alternatif arayışı içine girdim ve PrismJS scriptini detaylı inceleme ve test etme fırsatım oldu.

PrismJS ile WordPress Kod Renklendirme / Syntax Highlight işleminin nasıl yapılacağını ele alacağım.

Başlıklar – Eklentisiz PrismJS ile WordPress Kod Renklendirme

1- Tema ve Programlama Seçimi
2- Araçlar
3- Gerekli Kodları İndirme
4- Tanımlama
5- Kullanım

Bu arada Kod Renklendirme, Orjinal adıyla Syntax Highlight, türkçesi ile Sözdizimi Vurgulamadır. Birçok kullanıcı Syntax Highlight için Program Kodu ve Kod Renklendirme kelimelerini arama unsuru olarak kullanıyor. Bende başlığa ve yazı içeriğine uygun olacağını düşünerek Syntax Highlight için Kod Renklendirme tanımlamasını kullanıyorum.

<!doctype html>
<html>
<head>
<title>HTML Test</title>
<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
  for (var i = 42; --i >= 0;) {
    alert('Hello ' + String(world));
  }
}
</script>
<style type="text/css">
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>

Eklenti Kurmadan PrismJS ile WordPress Kod Renklendirme

Prism, WordPress eklentisi olarak ta mevcut ancak ben bunun sistemi gereksiz şişirdiğini ve buna gerek olmadığını düşündüğüm için en basit ve sade haliyle yapılması gerekenleri anlatacağım.
Eğer siz, ben bu adımları yapmaya uğraşamam eklentisi varsa kurup geçeyim diyorsanız buyrun link

1- Tema ve Programlama Dilleri Seçimi

Şu adrese gidin. Themes bölümünden default haricinde bir tema seçim. Coy temasını öneririm ardından Languages hangi programlama dillerinin yazılarınızda vurgulanmasını istiyorsanız seçin.

Ben, JS, CSS, PHP, HTML, C-like, Batch, Bash, Powershell yazılarım bu kodları içereceğini için seçiyorum.

2- Ek Araç Gereçler

Yazacağınız kod içeriklerinde Satır numaları, CLI Komut satırı, oto linkleyici, Dosya vurgulama gibi özellikler olsun istiyorsanız sayfanın alt tarafında Plugins bölümünden istediğiniz araçları seçin.

Line numbers, Command-Line, Toolbar benim daimi araçlarım. Eğer hangi aracın tam olarak ne işe yaradığını bilmiyorsanız ilgili araca tıklayın, açılan sayfada araçla ilgili bilgi ve örnekler göreceksiniz. İhtiyacınız olanları bu şekilde inceleyerek seçebilirsiniz.

3- JS vs CSS İndirme

Tema, Programlama Dilleri ve Plugin seçimlerinize göre sayfanın en alt bölümünde sitenizde kullanmak üzere otomatik JS ve CSS kodu oluşturuluyor. Download JS ve Download CSS tıklayarak kodları bilgisayarınıza indirin.

Bu kodları WordPress sitenize yüklemeniz gerekiyor. Kullandığınız tema klasörü altında konumlandırabilirsiniz. (örneğin: /wp-content/themes/TemaKlasörünüz/..) Benim tema klasörümde JS ve CSS kodları Assets adında alt klasörlerde saklanıyor. /TemaKlasörüm/assets/css/ ve /TemaKlasörüm/assets/js/ indirdiğim dosyaları buraya yüklüyorum.

Web sitenize nasıl dosya yükleyeceğinizi bilmiyorsanız Web Siteme Nasıl Dosya Yüklerim? yazısını inceleyebilirsiniz.

4- Web Sitesinde Tanımlama

Şimdi indirip web sitenize yüklediğiniz bu dosyaları Web sitenizde tanımlamalısınız.

Bu birbirinden farklı uygulamalı iki farklı yöntem ile mümkün. ilki functions.php dosyası ile kodun geçtiği sayfalarda yüklenmesini sağlayabilirsiniz, ikincisi ise header veya footer.php dosyasına kodu tanımlayabilirsiniz.

1.Yöntem: Temanızın functions.php dosyasını düzenleyin ve vereceğim aşağıdaki kodu ekleyin. Kodu paylaşmadan önce bu fonksiyonun ne işe yaradığından bahsedeyim. Yazılarınızda “language-” tanımlaması yapılmış kodların olduğu sayfalarda prism.css ve prism.js ‘nin yüklenmesini sağlar. Bu sayede script her sayfada yüklenmemiş olur.

function add_prism() {
	wp_register_style('prismCSS', get_stylesheet_directory_uri() . '/prism.css');
	wp_register_script('prismJS', get_stylesheet_directory_uri() . '/prism.js');

	global $post, $wp_query;
	$post_contents = '';
	if ( is_singular() ) {
		$post_contents = $post->post_content;
	} elseif ( is_archive() || (is_front_page() && is_home())) {
		$post_ids = wp_list_pluck( $wp_query->posts, 'ID' );
		foreach ( $post_ids as $post_id ) {
			$post_contents .= get_post_field( 'post_content', $post_id );
		}
	}
	if ( strpos( $post_contents, '<code class="language-' ) !== false ) {
		wp_enqueue_style('prismCSS');
		wp_enqueue_script('prismJS');
	}
}
add_action('wp_enqueue_scripts', 'add_prism');

2.Yöntem: Siteyle birlikte yüklenen header.php veya siteden sonra yüklenen footer.php dosyalarında tanımlama yapabilirsiniz.

Örnek olarak footer.php dosyasında, kodların en altında </html> satırından önce şu kodları ekliyorum;

<link rel='stylesheet' href='https://assets.konyaaltiteknikservis.com/css/prism.css' />
<script src='https://assets.konyaaltiteknikservis.com/js/prism.js' />

Hangi yöntem kolayınıza geliyorsa onu uygulayın. Tavsiyem 1.Yöntem ‘dir.

5- Kullanmaya Başlayın

Artık arkaplan scriptleri tamamlandı. Sıra geldi bu özel kod vurgularını web sitemizde kullanmaya.

Tek yapmanız gereken paylaşacağınız koda class vermek yani sınıflandırmak. Onu da şu şekilde yapabilirsiniz:

kodunuzu <code>Kodlar falanlar filanlar</code> olarak WordPress editöründe yazınca editör bloğununu html olarak görüntülemeniz gerekiyor. WordPress 5 güncellemesini yapmamışsanız eski editörü kullanıyor olmalısın. Eski editörde yazınızı html olarak “metin” butonuna tıklayarak görebilirsiniz:
WordPress Kod Renklendirme / Syntax Highlight

Şimdi bir örnekle açıklayalım, şuan da yazının “metin” görünümündeyiz kodunuzu uygun yere şu şekilde yazın ve kaydedin;

<pre class="language-php"><code>
function helloWorld(world) {
  for (var i = 42; --i >= 0;) {
    alert('Hello ' + String(world));
  }
}
</code></pre>

Yazdığınız yazılım dili hangisi ise “language-” alanına onu yazmalısınız. Tüm dillerin kullanım kodunu şu adresten sorgulayabilirsiniz.

Paylaş
1 Yıldız2 Yıldız3 Yıldız4 Yıldız5 Yıldız (Bu yazıyı oylamak ister misiniz?)
Loading...

Kullanıcı Yorumları (Cevap Yok )

Henüz yorum yok.

Benzer Yazılar