Gönderinizdeki ve sayfanızdaki kod görüntülerini stil ile nasıl paylaşırsınız
Hiç kod görüntülerini WordPress’e kopyalayıp eklemeye çalıştınız mı? İşe yaramadı! WordPress, kaynak kodu olarak görüntülemek istediğiniz kod snippet’lerini ayırt etmenin bir yolu yoktur. Kod görüntülerini okuyucunuzla sık sık paylaşmanız gerekiyorsa, kesinlikle daha iyi bir yola ihtiyacınız var. Ve bu yazının özü budur: WordPress’e şık ve kolay bir kod parçası eklemenize yardımcı olacak en iyi araçlar ve eklentiler. WordPress Kod görüntülerini paylaşmak için varsayılan yöntem Başlangıçtan başlayalım: WordPress, kod snippet’ini görüntülemek için birkaç doğuştan gelen yollara sahiptir. Her zaman en güzel değiller, ama işlevseller. İki temel yöntem veya etiketidir. Her ikisi de kod görüntülerinizi görüntüler, ancak özel temanıza bağlı farklı bir stile sahiptirler.
Örneğin, bu, WordPress yirmi on altı varsayılan temayı kullanan farklı bir etiket ekranıdır:
Görüntüleyemeden önce kod görüntülerinizi bir dize olarak kodlamanız gerekir. Bu, kodunuzu güzel kod gibi kodlayıcıya eklemenizi ve ardından
veya
etiketiniz arasında çıktı eklemenizi gerektirir.
Kodu okumayı daha kolay hale getiren satır numarası yoktur.
Sözdizimi yok. Sözdizimi programları, farklı kod öğelerini farklı renklere dönüştürür, bu da kodu okumayı bir kez daha kolaylaştırır.
Bu nedenle, her ikisi de kullanıcılarınız tarafından gömmeniz ve daha kolay okumanız daha kolay olan WordPress'e kod görüntüleri eklemenin bir dizi yöntemini keşfedelim. SynTaxHighLighter geliştirildi SynTaxHighlight Evolved, WordPress'e vurgulanan numaralı kodları ve sözdizimini sıkıştırmak için popüler bir eklentidir. Tek yapmanız gereken kodunuzu ilgili kısa bir koda sarmak ve şöyle görüntülenecektir:
Bir satır sarma içeren bir kodu görüntülemek için farklı bir stil de kullanabilirsiniz, ancak sonuç olarak okuyucunun kodu doğrudan kopyalayıp eklemesi zordur:
Ana özellik:
Satır numarasını kod snippet'e ekleyin
Kod görüntülerine sözdizimi ekleme
Farklı renk tema seçenekleri
Daha az yer almak için kod kutusunu kapatabilir
Diğer stil seçenekleri için özel bir CSS sınıfı ekleyebilir
Fiyat: Ücretsiz | Daha fazla bilgi
2. Sözdizimi Sözdizimi Fosforlu Mirayon Sözdizimi Sözdizimi Koruyucular, kodunuzu snapper için bir satır numarası ve sözdizimi ekleyen diğer popüler eklentilerdir. SynTaxHighlight Evrili ile karşılaştırıldığında, mum boya sözdizimi vurgulayıcı daha fazla ayara sahiptir. Ayarlar sekmesindeki eklenti hakkında neredeyse her şeyi yapılandırabilirsiniz. Yüce metin stilini (Popüler Kod Düzenleyicisi) otomatik olarak çoğaltmak gibi şeyler de yapabilirsiniz:
Ana özellik:
Satır numarasını kod snippet'inize ekleyin
Sözdizimsel vurgular eklemek
65 farklı dili destekleyin
Birçok stil, bazıları popüler kod düzenleyicisini taklit ediyor
Ekran kutunuzun her yönünü ayarlamak kolay
Fiyat: Ücretsiz | Daha fazla bilgi
3. Oembed Intisari OEMBED, özü kolayca gömmenizi sağlayan basit bir eklentidir. Bir sonraki sorunuzu zaten biliyorum ... "anlamı nedir"? Öz GitHub'dan gelir ve kod ve notları paylaşmanın basit bir yoludur. Bunu kullanmak için, kodunuzu yalnızca GIST düzenleyicisine eklemeniz ve genel bir özet oluşturmanız gerekir: Ardından, temel URL'nizi yalnızca WordPress düzenleyicisine eklemeniz gerekir ve eklenti kod snippet'inizi otomatik olarak bu şekilde sabitler:
Ana özellik:
Github özünden yararlanın
URL'yi takarak çekirdeği sabitleyin
Multi File Core'dan belirli revizyonları veya tek dosyaları yerleştirebilir
Fiyat: Ücretsiz | Daha fazla bilgi
4. WP-Geshi PlaFthlight WP-Geshi-Sight, WordPress düzenleyicisine yapıştırdığınız koda bir satır numarası ve sözdizimi ekleyen başka bir eklentidir. Adından da anlaşılacağı gibi, bu Geshi çekim makinesine dayanmaktadır. Bu aynı zamanda kodlama dilini belirlediğiniz sürece
normal etiketini kullanmanızı sağlar. WP-Geshi-Highlight, hem işlevsellik hem de ortaya çıkan kod açısından hafiftir:
Ana özellik:
Geshi'ye Sözdizimi Ekleme
İsteğe bağlı hat numaralandırması ekleyin
etiketini belirtilen dil ile kullanarak sabitleyin
Işık - sadece bir istek ekle http
Fiyat: Ücretsiz | Daha fazla bilgi
5. Pastebin Pastebin, kod görüntülerini paylaşmak için başka bir web sitesidir. Bu, daha önce gösterdiğim Github Gist'e çok benziyor. Github Gist gibi, bu eklenti de Pastebin kodunu WordPress sitenize yerleştirmeyi çok kolaylaştırır. Yapmanız gereken tek şey kodunuzu Pastebin'e eklemektir, ardından kod fragmanınızı otomatik olarak bu şekilde sabitlemek için Pastebin URL'sini WordPress düzenleyicinize eklersiniz: kodun sözdizimi var mı? Ana özellik:
Kodu doğrudan Pastebin'den sabitleyin
Satır numaraları ve (isteğe bağlı) sözdizimi vurgulama dahil
URL'yi WordPress Editor'a yapıştırın
Kısa bir kod ve Pastebin Kimliği kullanarak da sabitleyebilir
Fiyat: Ücretsiz | Daha fazla bilgi 6. Makarna kodu
Pastacode, popüler Prismjs kütüphanesini kullanarak kod snippet'lerini yerleştirmenize yardımcı olur. Kod görüntülerinizdeki belirli satırları vurgulayabilir ve dahil edilen temalardan birini kullanarak stili değiştirebilirsiniz. Pastacode ayrıca GitHub, GIST, Pastebin, Bitbucket veya Bitbucket'ten gömme kodunu da destekler, bu da onu çok yönlü hale getirir. Ana özellik:
Satır numarasını kod görüntülerine ekleyin
Kod görüntülerine sözdizimini ekleyin
Prismjs Kütüphanesini Kullanma
Kodu GitHub, GIST, Pastebin ve diğerlerinden gömebilir.
Belirli kod satırlarını vurgulayabilir
Fiyat: Ücretsiz | Daha fazla bilgi 7. PreByty kodu güzelleştirme kodu, eklentileriyle spot ışığı otomatik olarak
ve eklentisine eklemek için Google Code Prettify kitaplığını kullanır, siz ve çıktı aşağıdaki gibi görünecek, aşağıda görünecektir. Bu yazının başlangıcını gösteriyorum: ana özellikler:
ve
varsayılan etiketlerle çalışmak
Google Code Prettify Kütüphanesini Kullanma
Azaltılmış ve doğru teslim edilmiştir
Fiyat: Ücretsiz | Daha fazla bilgi
Gönderinize doğrudan kod görüntüleri gömmek veya GitHub veya Pastebin gibi harici bir araçtan kodu girmek isteyin, bu eklenti bunu başarmanıza yardımcı olacaktır. Mutlak favorimi seçmem gerekiyorsa, kullanabileceğiniz çeşitli stiller ve temalar için bir mum boya sözdizimi şovudur. WordPress yayınınızda kod görüntülerini görüntülemek için favori bir yönteminiz var mı? Yorumlarda duymak istiyorum! Naghiyev / Shutterstock.com tarafından Makale Küçük Resim
