Hemen hemen tüm blog yazarları, yaratıcıları içindekiler veya teknoloji geliştiricilerinin bazen bloglarında vurgulanan kod parçacıklarını görüntülemeleri gerekir. Bu başlı başına bir baş ağrısı olabilir. Ancak bu kod parçasında bir veya daha fazla satırın vurgulanması da gerekli olabilir ve bu işlevsellik ne yazık ki çoğu kod entegrasyonunun parçası değildir. Neyse ki SyntaxHighlighter Evolved eklentisi mevcut. Kodu mümkün olduğunca temiz ve okunabilir tutmak için bunu nasıl kullanacağınızı size göstereceğiz.
SözdizimiYükleyici
Eklentinin kurulumu ve aktivasyonu basittir. WP.org eklentileri deposunda bulabilirsiniz ancak bunun iyi yapıldığından emin olun Alex Mills (Viper007Bond)çünkü gerçekten de birçok sonuç var. Ancak bunun güvenilir ve güncel olduğunu biliyoruz. Üstelik bu, Gutenberg editörü için özel bir blokla birlikte gelir. Deneyiminizi kişiselleştirmenize izin veren bir dizi parametreden bahsetmiyorum bile, bu da onu bu tür görevler için seçimimiz yapıyor.
Menüde Parametreler WordPress panonuzdan, adında yeni bir öğe SyntaxHighlighter . Devam edin ve üzerine tıklayın. Orada, parçacıkları WordPress sitenize yerleştirmek için ihtiyaç duyacağınız her küçük şeyi ayarlayabilirsiniz.
SözdizimiYüksek ışık ayarları
Eklentinin ayarlar sayfası nispeten basittir. Bu eklenti hakkında sevdiğimiz belirli bir unsur, kodun sitenizde nasıl görüntülendiğine ilişkin çok sayıda özelleştirmeye sahip olmanızdır. Gömmeye CSS sınıfları ekleyebilir, satır numarası dolgusunu ayarlayabilir, temalar renklendirin, akıllı sekmeler ve satır sonları kullanın ve site genelinde tek tek kodlama dili vurgulamanın nasıl yükleneceğine karar verin.
Çoğu insanın bilmesi gereken üç özel parametre tanımlamak istiyoruz.
Eklenti sürümü, satır numaraları ve sekme boyutları
İlki, eklentinin hangi sürümünü yüklediğinizdir. Eklenti arşivde güncel kalsa da, eklentinin 2.x ve 3.x sürümleri arasında seçim yapabilirsiniz. , kodunuzu nasıl görüntülemek istediğinize bağlı olarak. Her ikisi de güvenlidir, ancak her biri diğerinin sunmadığı belirli özellikler sunar (yazma sırasında).
Kullanıcılar kodunuzu kopyalarsa en önemlisi, 3.x sürümü işe yarar. Bununla birlikte, sizinki gerçek yardımcı programdan daha kullanışlı ise, o zaman 2.x sürümündeki satırsonu, kaydırma çubuklarını kullanma ihtiyacını ortadan kaldırdığı için sizin için daha iyi olabilir. büyük kod parçacıkları için.
O zaman satır numaralarını görüntülemeniz veya göstermemeniz gerekir. Büyük kod parçaları ve öğreticiler için satır numaraları paha biçilemez. Bununla birlikte, kısa parçacıklarınız olduğunda, bunları kalıcı olarak 1. ve 2. satırlar olarak etiketlemenize gerek yoktur. Bunları kaldırmak kodun görünümünü önemli ölçüde iyileştirebilir.
Ve sonra orada sekme boyutu hala tartışmalı. Seçenek varsayılan olarak 4'tür, ancak istediğiniz herhangi bir sayıya değiştirebilirsiniz. Doğru değeri 2 dahil ederek (Evet, doğru değer olmadığının farkındayız. Sekmeler için sadece 2 boşluk istiyoruz.)
Kodunuz ve kısa kodlarınız
Sayfanın altına kaydırırsanız Parametreler , büyük kodun bir önizlemesinin yanı sıra çok sayıda kısa kod parametresini göreceksiniz. Tüm eklentinin snippet'lerinizi sergilemek için neler yapabileceğini görmek için zamanınız bunları gözden geçirmek için harcanacaktır. Ayrıca, yukarıdaki ayarlarda kod görüntüsünde yaptığınız herhangi bir değişiklik buraya yansıtılacaktır. Bu nedenle, seçeneklerden herhangi birini değiştirdikten sonra kaydet düğmesine bastığınızdan emin olun.
Bazı insanlar sizi belirli eklentilere bağlayabildikleri için kısa kodların en büyük hayranı olmasalar da, akıllı oldukları ve hatırlanması kolay oldukları için bunların kullanılmaya değer olduğunu düşünüyoruz. Hiçbir şey yoksa, iki şeyi hatırlamanız gerekir ve ardından eklenti sizin için en iyi şekilde çalışacaktır.
ou ou ou et...bien, vous obtenez</li><li>[highlight 5-9]</li></ul>
Veya bazı çeşitlemeler. Hatırlayabiliyorsanız, bu eklentiyle yapabileceğiniz farklı şeyler hakkında kendinizden emin olabilirsiniz. Uzun tanımlayıcıyı kullanabilseniz de, SyntaxHighlighter eklentisi çalışmanızı kolaylaştırmak için yeterince iyi oluşturulmuştur.
Kısa kod kullan
Kısa kod oluşturabileceğiniz her yerde bunları kullanabilirsiniz. İçinde Divi veya klasik düzenleyici, Metin modülünü veya TinyMCE düzenleyicisini kullanabilir ve kodu kısa kodlar arasına yapıştırabilirsiniz. Görsel sekmesinin çalışma şekli nedeniyle, sekmeyi kullanmanızı öneririz. Metinleri Bu biçimlendirme özel karakterlerini tutmak için
Gutenberg / Block Editor kullanıcısıysanız, işler bu kadar basit. Bunun için yine metin bloğunu kullanabilirsiniz. Daha da kolay, özel HTML bloğu. Yukarıdaki gibi, kodu kısa kod etiketlerine yapıştırın.
Daha da iyisi, SyntaxHighlighter Evolved bloğunun kendisidir. Eklenti kurulumu kendi Gutenberg bloğunu içerir; bu yüzden bir kısa kod değilseniz ve ayarlarla uğraşmak istemiyorsanız, zorunda değilsiniz. Sadece altındaki bloğu bul biçimlendirme ve mesajınıza veya sayfanıza ekleyin.
Kodu nasıl yerleştirdiğiniz önemli değil, aynı görüntülemeyi WordPress sitenizin ön ucunda göreceksiniz.
Özetlemek
Birkaç nedenden dolayı hedef kitlenize pasajlar sunmanız gerekebilir. Belki de izleyicilerin istedikleri gibi alabilecekleri ve kullanabilecekleri yaygın sorunlara öğreticiler yazıyor veya çözümler gönderiyorsunuz? Ancak bazen bir GitHub entegrasyonu, kullanıcılarınız için istediğiniz türde bir deneyim sağlamaz. Bu, SyntaxHighlighter Evolved gibi bir eklentiye ihtiyacınız olduğu zamandır.
Sadece birkaç tıklamayla, biraz kişiselleştirme ve bir Gutenberg bloğu veya kısa kod ile izleyicileriniz kodunuzu sorunsuz bir şekilde keşfedecektir.
