WordPress Sitenizde Vurgulanan Kod Parçacıklarını Nasıl Görüntüleyebilirsiniz?

Hemen hemen her teknoloji blogcusu, içerik oluşturucu veya geliştiricinin bazen bloglarında vurgulanan kod parçacıklarını görüntülemesi gerekir. Bu başlı başına bir baş ağrısı olabilir. Ancak, bu snippet içindeki bir satırı veya satırları vurgulamak da gerekli olabilir ve bu özellik ne yazık ki çoğu kod yerleştirmesinin parçası değildir. Neyse ki, SyntaxHighlighter Evolved eklentisi var. Kodu olabildiğince temiz ve okunabilir tutmak için onu nasıl kullanacağınızı göstereceğiz.

Youtube Kanalımıza Abone Olun

SyntaxHighlighter Geliştirildi

Eklentiyi kurmak ve etkinleştirmek basittir. WP.org eklenti deposunda bulabilirsiniz, ancak Alex Mills (Viper007Bond) tarafından yapılanı aldığınızdan emin olun. Benzer adlara ve özelliklere sahip birçok eklenti var, ancak bunun güvenilir ve güncel tutulduğunu biliyoruz. Ayrıca, bu, Gutenberg editörü için özel bir blokla birlikte gelir. Deneyiminizi özelleştirmenize izin veren ve bu tür görevler için tercihimiz olmasını sağlayan bir dizi parametreden bahsetmiyorum bile.

WordPress kontrol panelinizdeki Ayarlar menüsünün altında, SyntaxHighlighter etiketli yeni bir öğe bulacaksınız . Devam edin ve içine tıklayın. Orada, kod parçacıklarını WordPress sitenize yerleştirmek için ihtiyaç duyacağınız her küçük şeyi ayarlayabilirsiniz.

Sözdizimi Vurgulayıcı Ayarları

Eklentinin ayarlar sayfası nispeten basittir. Bu eklentiyle ilgili sevdiğimiz özel bir unsur, kodun sitenizde nasıl görüntülendiğine ilişkin çok sayıda özelleştirme elde etmenizdir. Yerleştirmeye CSS sınıfları ekleyebilir, satır numarası dolgusunu ayarlayabilir, renk temaları seçebilir, akıllı sekmeleri ve sözcük kaydırmayı kullanabilir ve site çapında bir ölçekte tek tek kodlama dili vurgulamanın nasıl yükleneceğine karar verebilirsiniz.

Çoğu insanın bilmesi gerektiğini düşündüğümüz üç özel ayarı belirtmek istiyoruz.

Eklenti Sürümü, Satır Numaraları ve Sekme Boyutu

Birincisi, yüklediğiniz eklentinin hangi sürümü. Eklentinin kendisi depoda güncellenirken, kodunuzu en iyi nasıl görüntülemek istediğinize bağlı olarak , eklentinin 2.x ve 3.x sürümleri arasında seçim yapabilirsiniz . Her ikisi de güvenlidir, ancak her biri diğerinin sunmadığı belirli özellikler sunar (en azından bu yazının yazıldığı sırada).

Kodunuzu kopyalayan kullanıcılar en önemlisiyse, sürüm 3.x gayet iyi olacaktır. Ancak, sizinki gerçek yardımcı programdan daha çok görüntü için ise, sürüm 2.x'in sözcük kaydırması sizin için daha uygun olabilir çünkü büyük kod parçacıkları üzerinde kaydırma çubuklarına olan ihtiyacı ortadan kaldırır.

O zaman satır numaralarını gösterip göstermeyeceğiniz var. Büyük kod parçaları ve öğreticiler için satır numaraları çok değerlidir. Ancak, kısa snippet'leriniz olduğunda, bunları sürekli olarak satır 1 ve 2 olarak etiketlemenize gerek yoktur. Bunları kaldırmak kodun görünümünü oldukça temizleyebilir.

Ve sonra her zaman tartışmalı sekme boyutu var . Seçenek varsayılan olarak 4'tür, ancak bunu istediğiniz herhangi bir sayıya değiştirebilirsiniz. 2'nin doğru değeri dahil (Evet, doğru bir değer olmadığının farkındayız. Sekmeler için sadece 2 boşluğa düşkünüz.)

Kodunuz ve Kısa Kodlarınız

Ayarlar sayfasının en altına kaydırırsanız, çok sayıda kısa kod parametresinin yanı sıra büyük bir kod önizlemesi görürsünüz. Tüm eklentinin kod snippet'lerinizi vurgulamak için neler yapabileceğini görmek için zamanınız bunları gözden geçirmek için iyi harcanır. Ek olarak, kodun yukarıdaki ayarlarda nasıl görüntülendiğine ilişkin yukarıda yaptığınız değişiklikler 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ırlamaları kolay oldukları için bunların kullanılmaya değer olduğunu düşünüyoruz. Başka bir şey değilse, iki şeyi hatırlamanız gerekir ve ardından eklenti sizin için en iyi şekilde performans gösterecektir.

• veya

   or  or  or...well, you get it</li>
          <li></li>
  </ul>
  
  Or some variation thereof. If you can remember those, you're pretty solid for most things you will use the plugin for.
  
  While you can use the long-form language identifiers, the SyntaxHighlighter is built well enough to make things easy on you. Here on the ET blog, whenever you see a code snippet, we have a similar shortcode processor where we just use <strong>code written here

  , biçimlendirilir ve vurgulanır.

  Kısa Kodları Kullanma

  Kısa kod oluşturabileceğiniz her yerde bunları kullanabilirsiniz. Divi'de veya klasik düzenleyicide, Metin modülünü veya TinyMCE düzenleyicisini kullanabilir ve kodu kısa kodların arasına yapıştırmanız yeterlidir. Görsel sekmesinin çalışma şekli nedeniyle, özel karakter biçimlendirmesini korumak için bunlar için Metin sekmesini kullanmanızı öneririz.

  

  Bir Gutenberg/Block Editor kullanıcısıysanız, işler aynı derecede basittir. Bunun için yine Metin bloğunu kullanabilirsiniz. Bundan daha da kolay olanı, Özel HTML bloğudur. Tıpkı yukarıdaki gibi, kodu kısa kod etiketlerinin içine yapıştırın.

  

  Ancak bundan daha da iyisi SyntaxHighlighter Evolved bloğunun kendisidir. Eklenti kurulumuna kendi Gutenberg Bloğu dahildir, böylece bir kısa kod kullanıcısı değilseniz ve parametrelerle uğraşmak istemiyorsanız, yapmanız gerekmez. Bloğu Biçimlendirme altında bulun ve gönderinize veya sayfanıza ekleyin.

  

  Kodu nasıl eklediğinize bakılmaksızın, WordPress sitenizin ön ucunda aynı işlemeyi göreceksiniz.

  

  Bitirmek

  Kitlenize kod snippet'leri sunmanızın birçok nedeni olabilir. Belki öğreticiler yazarsınız veya belki de halkın ihtiyaç duyduğu şekilde alması ve kullanması için yaygın sorunlara yönelik düzeltmeler yayınlarsınız. Ancak bazen bir GitHub yerleştirmesi, kullanıcılarınız için istediğiniz deneyimi tam olarak sağlamaz. İşte o zaman SyntaxHighlighter Evolved gibi bir eklentiye ihtiyacınız var. Birkaç tıklama, biraz özelleştirme ve bir Gutenberg bloğu veya kısa kod ile hedef kitleniz kodunuzdan sorunsuz bir şekilde geçecektir.

  Bunun gibi bir kodu vurgulamak için sitenizde hangi kullanımları bulabilirsiniz?

  Adil Bouyghajden / Shutterstock.com'dan makale özellikli görsel