WordPress Yazılarınızda ve Sayfalarınızda Stil ile Kod Parçacıkları Nasıl Paylaşılır?

Hiç kod parçacıklarını kopyalayıp WordPress'e yapıştırmayı denediniz mi? Düz çalışmıyor! WordPress'in kaynak kod olarak görüntülemek istediğiniz bir kod parçacığı ile oluşturulmasını istediğiniz bir kod parçacığı arasında ayrım yapmanın hiçbir yolu yoktur.

Okuyucularınızla sık sık kod parçacıkları paylaşmanız gerekiyorsa, kesinlikle daha iyi bir yola ihtiyacınız var. Ve bu yazının konusu da bu: WordPress'e şık ve kolay okunabilir kod parçacıkları eklemenize yardımcı olacak en iyi araçlar ve eklentiler.

Kod Parçacıklarını Paylaşmak için Yerleşik WordPress Yöntemi

En baştan başlayalım:

WordPress, kod parçacıklarını görüntülemek için bazı yerleşik yöntemlere sahiptir. Her zaman en güzel değiller, ama işlevseller. İki temel yöntem, < code > </ code > veya < pre > </ pre > etiketleridir. Her ikisi de kod snippet'lerinizi görüntüler, ancak temanıza bağlı olarak farklı stilleri vardır.

Örneğin, varsayılan WordPress Yirmi On Altı Temasını kullanarak farklı etiketlerin nasıl göründüğü aşağıda açıklanmıştır:

Ancak bu varsayılan etiketlerle ilgili başlıca sorunlar şunlardır:

1. Görüntülemeden önce kod parçacığınızı bir dize olarak kodlamanız gerekir. Bu, kodunuzu Code Beautify gibi bir kodlayıcıya yapıştırmanızı ve ardından çıktıyı < code > veya <pre > etiketleriniz arasına eklemenizi gerektirir.
2. Kod okumayı çok daha kolay hale getiren satır numaraları yoktur.
3. Sözdizimi vurgulama yok. Sözdizimi vurgulama, farklı kod öğelerini farklı renklere dönüştürür, bu da kodu okumayı çok daha basit hale getirir.

Öyleyse, WordPress'e kod parçacıkları eklemenin hem sizin için daha kolay hem de kullanıcılarınızın okuması için daha kolay olan bazı yöntemlerini inceleyelim.

1. SyntaxHighlighter Geliştirildi

SyntaxHighlighter Evolved, numaralı ve sözdizimi vurgulanmış kod parçacıklarını WordPress'e gömmek için popüler bir eklentidir. Tek yapmanız gereken, kodunuzu ilgili kısa koda sarmak ve bunun gibi bir şey görüntülenecektir:

Ayrıca, kodu görüntülemek için satır kaydırma içeren, ancak bunun sonucunda okuyucuların kodu doğrudan kopyalayıp yapıştırmasını zorlaştıran farklı bir stil kullanabilirsiniz:

Ana Özellikler:

• Kod parçacıklarına satır numaraları ekler
• Kod parçacıklarına sözdizimi vurgulaması ekler
• Farklı renk teması seçenekleri
• Daha az yer kaplamak için kod kutularını daraltabilir
• Daha fazla stil seçeneği için özel CSS sınıfları ekleyebilir

Fiyat : Ücretsiz | Daha fazla bilgi

2. Crayon Sözdizimi Vurgulayıcı

Crayon Syntax Highlighter, kod parçacıklarınıza satır numaraları ve sözdizimi vurgulama ekleyen bir başka popüler eklentidir. SyntaxHighlighter Evolved ile karşılaştırıldığında, Crayon Syntax Highlighter çok daha fazla özelleştirmeye sahiptir. Eklentiyle ilgili hemen hemen her şeyi ayarlar sekmesinde yapılandırabilirsiniz.

Sublime Text'in (popüler bir kod düzenleyici) stilini otomatik olarak çoğaltmak gibi şeyler de yapabilirsiniz:

Ana Özellikler:

• Kod parçacıklarınıza satır numaraları ekler
• Sözdizimi vurgulaması ekler
• 65 farklı dili destekler
• Bazıları popüler kod editörlerini taklit eden tonlarca stil
• Ekran kutunuzun her yönünü özelleştirmek kolay

Fiyat: Ücretsiz | Daha fazla bilgi

3. o Gömülü Öz

oEmbed, özleri kolayca gömmenizi sağlayan basit bir eklentidir. Bir sonraki sorunuzu zaten biliyorum… "Özet nedir"? Gist, GitHub'dan gelir ve kod parçacıklarını ve notları paylaşmanın basit bir yoludur. Bunu kullanmak için, kodunuzu Gist Düzenleyiciye yapıştırmanız ve genel bir öz oluşturmanız yeterlidir:

Ardından, özünüzün URL'sini WordPress Düzenleyici'ye yapıştırmanız yeterlidir; eklenti, kod snippet'inizi otomatik olarak şu şekilde gömer:

Ana Özellikler:

• GitHub Gist'ten yararlanın
• URL'yi yapıştırarak özetleri gömün
• Çok dosyalı özlerin belirli revizyonlarını veya tek dosyalarını gömebilir

Fiyat: Ücretsiz | Daha fazla bilgi

4. WP-GeSHi-Vurgulama

WP-GeSHi-Highlight, WordPress düzenleyicisine yapıştırdığınız koda satır numaraları ve sözdizimi vurgulama ekleyen başka bir eklentidir. Adından da anlaşılacağı gibi, GeSHi vurgulama motoruna dayanmaktadır. Ayrıca, kodlama dilini tanımladığınız sürece normal < pre > etiketlerini kullanmanızı sağlar.

WP-GeSHi-Highlight, hem işlevsellik hem de çıktı kodu açısından hafiftir:

Ana Özellikler:

• GeSHi kullanarak sözdizimi vurgulama ekler
• İsteğe bağlı satır numaralandırma ekler
• Tanımlı dil ile standart < pre > etiketlerini kullanarak gömün
• Hafif – yalnızca bir HTTP isteği ekler

Fiyat : Ücretsiz | Daha fazla bilgi

5. macun kutusu

Pastebin, kod parçacıklarını paylaşmak için başka bir web sitesidir. Size daha önce gösterdiğim GitHub Gist aracına çok benzer şekilde çalışır. Ve tıpkı GitHub Gist'te olduğu gibi, bu eklenti Pastebin kodunu WordPress sitenize yerleştirmeyi çok kolaylaştırır.

Yapmanız gereken tek şey, kodunuzu Pastebin'e eklemek, ardından aşağıdaki gibi kod parçacıklarını otomatik olarak gömmek için Pastebin URL'sini WordPress düzenleyicinize yapıştırabilirsiniz:

Kodun sözdizimi vurgulaması olup olmadığı, Pastebin'de kullandığınız ayarlara bağlı olacaktır.

Ana Özellikler:

• Kodu doğrudan Pastebin'den gömün
• Satır numaralarını ve (isteğe bağlı) sözdizimi vurgulamayı içerir
• URL'yi WordPress Düzenleyiciye yapıştırmanız yeterlidir
• Ayrıca bir kısa kod ve Pastebin Kimliği kullanarak da gömebilir

Fiyat: Ücretsiz | Daha fazla bilgi

6. Pasta kodu

Pastacode, popüler PrismJs kitaplığını kullanarak kod parçacıklarını yerleştirmenize yardımcı olur. Dahil edilen temalardan birini kullanarak kod parçacıklarınızdaki belirli satırları vurgulayabilir ve stilleri değiştirebilirsiniz. Pastacode ayrıca GitHub, Gist, Pastebin, BitBucket veya BitBucket'ten kod yerleştirmeyi de destekler ve bu da onu çok yönlü kılar.

Ana Özellikler:

• Kod parçacıklarına satır numaraları ekleyin
• Kod parçacıklarına sözdizimi vurgulaması ekleyin
• PrismJs kitaplığını kullanır
• GitHub, Gist, Pastebin ve daha fazlasından kod gömebilir.
• Belirli kod satırlarını vurgulayabilir

Fiyat: Ücretsiz | Daha fazla bilgi

7. Kod Güzelleştirme

Code Prettify, eklentileri etkinken < pre > ve < code > öğelerinize otomatik olarak vurgu eklemek için Google Code Prettify kitaplığını kullanır, bu yazının başında size gösterdiğim çirkin sürümler yerine siz ve çıktılar aşağıdaki gibi görünür:

Ana Özellikler:

• Varsayılan < code > ve < pre > etiketleriyle çalışır
• Google Code Prettify kitaplığını kullanır
• Uygun şekilde küçültülmüş ve sıraya alınmış

Fiyat : Ücretsiz | Daha fazla bilgi

Toplama

Kod parçacıklarını doğrudan gönderilerinize yerleştirmek veya GitHub veya Pastebin gibi harici araçlardan kod getirmek istiyorsanız, bu eklentiler bunu başarmanıza yardımcı olacaktır. Mutlak favorimi seçmem gerekirse, kullanabileceğiniz çeşitli stiller ve temalar için Crayon Syntax Highlighter olurdu.

WordPress gönderilerinizde kod parçacıklarını görüntülemek için favori bir yönteminiz var mı? Yorumlarda bunu duymayı çok isterim!

Makale küçük resmi: Naghiyev / Shutterstock.com