{"id":384,"date":"2024-02-21T17:36:07","date_gmt":"2024-02-21T14:36:07","guid":{"rendered":"https:\/\/mudosdigital.com\/tr\/?p=384"},"modified":"2024-02-21T17:37:26","modified_gmt":"2024-02-21T14:37:26","slug":"highlight-js-ile-wordpress-bloglarda-paylasilan-kodlari-otomatik-renklendirme-islemi","status":"publish","type":"post","link":"https:\/\/mudosdigital.com\/tr\/highlight-js-ile-wordpress-bloglarda-paylasilan-kodlari-otomatik-renklendirme-islemi\/","title":{"rendered":"Highlight.js ile WordPress bloglarda payla\u015f\u0131lan kodlar\u0131 otomatik renklendirme i\u015flemi"},"content":{"rendered":"\n<p>WordPress blogunuzda teknik i\u00e7erikler payla\u015f\u0131yorsan\u0131z, okuyucular\u0131n\u0131z\u0131n dikkatini \u00e7ekmek ve onlara daha iyi bir okuma deneyimi sunmak i\u00e7in kod snippet&#8217;lerinin g\u00f6rsel olarak \u00e7ekici hale getirilmesi b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Renkli syntax highlight (s\u00f6zdizimi vurgulama) ve sat\u0131r numaraland\u0131rmas\u0131, kodu daha okunabilir ve anla\u015f\u0131l\u0131r k\u0131larak, okuyucular\u0131n\u0131z\u0131n kodu daha rahat takip etmelerini ve anlamalar\u0131n\u0131 sa\u011flar.<\/p>\n\n\n\n<p>Bu yaz\u0131da, WordPress i\u00e7eriklerinizde kod snippet&#8217;lerini otomatik olarak renklendirmenin ve numaraland\u0131rman\u0131n nas\u0131l yap\u0131labilece\u011fini ad\u0131m ad\u0131m anlataca\u011f\u0131m. Kullanaca\u011f\u0131m\u0131z y\u00f6ntem, herhangi bir ek eklentiye ihtiya\u00e7 duymadan, basit\u00e7e birka\u00e7 CSS ve JavaScript kod sat\u0131r\u0131 ekleyerek ger\u00e7ekle\u015ftirilecek. Bu y\u00f6ntem, \u00f6zellikle teknik blog yazarlar\u0131 i\u00e7in m\u00fckemmel bir \u00e7\u00f6z\u00fcmd\u00fcr, \u00e7\u00fcnk\u00fc kodun okunabilirli\u011fini art\u0131r\u0131rken ayn\u0131 zamanda sayfa y\u00fckleme h\u0131z\u0131n\u0131 olumsuz etkilemez.<\/p>\n\n\n\n<p>\u00d6ncelikle, Highlight.js k\u00fct\u00fcphanesinden yararlanaca\u011f\u0131z. Highlight.js, web sayfalar\u0131nda syntax highlight i\u015flemi yapmak i\u00e7in kullan\u0131lan hafif ve kullan\u0131m\u0131 kolay bir JavaScript k\u00fct\u00fcphanesidir. Bu k\u00fct\u00fcphane, \u00e7ok say\u0131da programlama dili ve stil deste\u011fi sunar, b\u00f6ylece kod snippet&#8217;leriniz her zaman profesyonel ve temiz g\u00f6r\u00fcn\u00fcr.<\/p>\n\n\n\n<p>Sonras\u0131nda, kodunuzu daha da \u00f6zelle\u015ftirmek i\u00e7in kendi CSS stilimizi tan\u0131mlayaca\u011f\u0131z. Bu stille, kod bloklar\u0131n\u0131n \u00e7evresine zarif bir \u00e7er\u00e7eve ekleyecek, sat\u0131r numaralar\u0131n\u0131 belirginle\u015ftirecek ve kodu kopyalamak i\u00e7in kullan\u0131\u015fl\u0131 bir buton sa\u011flayaca\u011f\u0131z. Bu \u00f6zellikler, okuyucular\u0131n\u0131z\u0131n dikkatini \u00e7ekmek ve onlara kod \u00fczerinde daha fazla kontrol sa\u011flamak i\u00e7in harikad\u0131r.<\/p>\n\n\n\n<p>E\u011fer siz de blog yaz\u0131lar\u0131n\u0131zda kod snippet&#8217;lerini daha etkileyici ve anla\u015f\u0131l\u0131r hale getirmek istiyorsan\u0131z, bu rehber tam size g\u00f6re. Ad\u0131mlar\u0131 takip ederek, okuyucular\u0131n\u0131za unutulmaz bir okuma deneyimi sunabilir ve teknik i\u00e7eriklerinizi bir ad\u0131m \u00f6ne \u00e7\u0131karabilirsiniz.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Giri\u015f ve Yakla\u015f\u0131m<\/h2>\n\n\n\n<p>WordPress&#8217;te teknik blog yazarlar\u0131 kodlar\u0131n\u0131 payla\u015f\u0131rken, e\u011fer klasik metin edit\u00f6r\u00fc yerine Gutenberg kullan\u0131yorlarsa &#8220;Kod&#8221; blo\u011funu kullanabilirler. Bu blok i\u00e7erisine yerle\u015ftirilen kod snippet&#8217;leri varsay\u0131lan olarak &#8220;wp-block-code&#8221; s\u0131n\u0131f\u0131na sahiptir. Ancak payla\u015f\u0131lan bu kodlar, HTML sayfa olu\u015fturulduktan sonra formatlanm\u0131\u015f bir \u015fekilde g\u00f6r\u00fcnmez. Bu durum, okuyucular a\u00e7\u0131s\u0131ndan bir handikap olu\u015fturarak k\u00f6t\u00fc bir deneyim sunmaktad\u0131r.<\/p>\n\n\n\n<p>Okuyucular\u0131n s\u00f6z dizimlerini daha rahat kavramas\u0131 i\u00e7in payla\u015f\u0131lan kodlar\u0131n renklendirilmesi olduk\u00e7a \u00f6nemlidir. Bu durumda WordPress&#8217;te varsay\u0131lan olarak mevcut olmayan bu \u00f6zelli\u011fi Mudos Digital taraf\u0131ndan olu\u015fturulan CSS ve JavaScript kodlar\u0131yla internet sitemize kazand\u0131rabiliriz.<\/p>\n\n\n\n<p>Bu \u00f6zelli\u011fi kazand\u0131rmak ve kodlar\u0131 otomatik olarak renklendirmek i\u00e7in Highlight.js ad\u0131nda pop\u00fcler bir JavaScript k\u00fct\u00fcphanesi kullanaca\u011f\u0131z. Yine numaraland\u0131rma i\u015flemi i\u00e7in birka\u00e7 sat\u0131r payla\u015faca\u011f\u0131z. Ayr\u0131ca CSS ile g\u00f6rsel iyile\u015ftirmeler yapaca\u011f\u0131z.<\/p>\n\n\n\n<p>Highlight.js, payla\u015ft\u0131\u011f\u0131m\u0131z kodlar\u0131n i\u00e7eri\u011fini alg\u0131lama kapasitesine sahiptir. Dolay\u0131s\u0131yla ister HTML, ister CSS, ister JavaScript, isterseniz de Python kodlar\u0131 payla\u015f\u0131n, bu k\u00fct\u00fcphane payla\u015ft\u0131\u011f\u0131n\u0131z kodun hangi programlama dilinde yaz\u0131ld\u0131\u011f\u0131n\u0131 otomatik olarak alg\u0131layacak ve ona g\u00f6re renklendirme i\u015flemi yapacakt\u0131r.<\/p>\n\n\n\n<p>Ayr\u0131ca payla\u015ft\u0131\u011f\u0131m\u0131z kodlarda kullan\u0131c\u0131 deneyimini art\u0131rmak i\u00e7in bir adet &#8220;Kopyala&#8221; d\u00fc\u011fmesi yerle\u015ftirece\u011fiz. Bu d\u00fc\u011fme, kullan\u0131c\u0131lar\u0131n kod snippet&#8217;ini kopyalamas\u0131n\u0131 sa\u011flayacak. D\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda kopyalama i\u015fleminin ger\u00e7ekle\u015fti\u011fini g\u00f6stermek i\u00e7in d\u00fc\u011fme metnini &#8220;Kopyaland\u0131&#8221; olarak de\u011fi\u015ftirece\u011fiz.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ad\u0131m 1: Highlight.js ve CSS Stillerini Entegre Etme<\/h2>\n\n\n\n<p>\u0130lk olarak, Highlight.js k\u00fct\u00fcphanesini ve kendi \u00f6zel CSS stillerimizi blogunuza entegre edece\u011fiz. Bu, kod snippet&#8217;lerinizin otomatik olarak renklendirilmesini ve estetik bir \u015fekilde g\u00f6sterilmesini sa\u011flayacak.<\/p>\n\n\n<ul class=\"wp-block-latest-posts__list wp-block-latest-posts\"><li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/mudosdigital.com\/tr\/wordpress-yerel-gelistirme-ortami-docker-ile-adim-adim-rehber\/\">WordPress Yerel Geli\u015ftirme Ortam\u0131 \u2013 Docker ile Ad\u0131m Ad\u0131m Rehber<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/mudosdigital.com\/tr\/looker-studio-ile-tekil-sayfa-performans-grafigi-olusturma\/\">Looker Studio ile Tekil Sayfa Performans Grafi\u011fi Olu\u015fturma<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/mudosdigital.com\/tr\/seoda-vektor-nedir-semantik-arama-ve-siralamadaki-rolu\/\">SEO\u2019da Anahtar Kelime Vekt\u00f6rleri ve Semantik Aramadaki Rol\u00fc<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/mudosdigital.com\/tr\/tiklama-orani-to-nedir-anahtar-kelime-to-artirma-yollari\/\">T\u0131klama Oran\u0131 (TO) Nedir? Anahtar Kelime TO Art\u0131rma Yollar\u0131<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/mudosdigital.com\/tr\/googlebot-rehberi-nedir-nasil-calisir-ve-sitenizi-nasil-etkiler\/\">Googlebot Rehberi: Nedir, Nas\u0131l \u00c7al\u0131\u015f\u0131r ve Sitenizi Nas\u0131l Etkiler?<\/a><\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\">1. Highlight.js K\u00fct\u00fcphanesini Ekleyin<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Highlight.js ve ek stiller --&gt;\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/10.7.2\/styles\/vs2015.min.css\"&gt;<\/code><\/pre>\n\n\n\n<p>Bu linki, WordPress sitenizin <code>&lt;head&gt;<\/code> b\u00f6l\u00fcm\u00fcne ekleyin. Bu i\u015flemi, WordPress y\u00f6netici panelinizden G\u00f6r\u00fcn\u00fcm &gt; Tema D\u00fczenleyici &gt; header.php dosyas\u0131n\u0131 d\u00fczenleyerek yapabilirsiniz.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. \u00d6zel CSS Stillerini Tan\u0131mlay\u0131n<\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki CSS kodunu, sitenizin <code>&lt;head&gt;<\/code> b\u00f6l\u00fcm\u00fcne veya tercih etti\u011finiz bir CSS dosyas\u0131na ekleyin:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n\/* Konteyner stilini tan\u0131mla *\/\n.code-container {\n  display: flex;\n  align-items: flex-start;\n}\n\n\/* Sat\u0131r numaralar\u0131n\u0131 i\u00e7eren s\u00fctun i\u00e7in stil *\/\n.line-numbers {\n  text-align: right;\n  user-select: none;\n  color: #aaa;\n  padding-right: 10px;\n  margin-top: 5px;\n  font-size: 14px;\n  line-height: 1.5;\n}\n\n\/* Kod blo\u011fu i\u00e7in stil *\/\n.code-block {\n  white-space: pre-wrap;\n  width: 100%;\n  line-height: 1.5;\n}\n\n\/* Kopyalama butonu stili *\/\n.mudos-code-copier {\n  cursor: pointer;\n  margin-bottom: 10px;\n}\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p>Bu stiller, kod bloklar\u0131n\u0131z\u0131n daha d\u00fczenli ve okunabilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n\n\n\n<div class=\"wp-block-group mudos-schedule-appointment has-background\" style=\"background-color:#f2f2f2\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Daha fazla yard\u0131ma m\u0131 ihtiyac\u0131n\u0131z var?<\/h2>\n\n\n\n<p>Hemen randevu olu\u015fturarak Mudos Digital ile sorunlar\u0131n\u0131z\u0131 payla\u015f\u0131n.<\/p>\n\n\n\n<!-- Google Calendar Appointment Scheduling begin -->\n<link href=\"https:\/\/calendar.google.com\/calendar\/scheduling-button-script.css\" rel=\"stylesheet\">\n<script src=\"https:\/\/calendar.google.com\/calendar\/scheduling-button-script.js\" async><\/script>\n<script>\n(function() {\n  var target = document.currentScript;\n  window.addEventListener('load', function() {\n    calendar.schedulingButton.load({\n      url: 'https:\/\/calendar.google.com\/calendar\/appointments\/schedules\/AcZssZ3cb1MdGEei1XQIF9x3hzAETXnxUmYlCEL5s4OPlXdUCUmdwDgsiQiLPE2QcUbNljp9nIRG-_gB?gv=true',\n      color: '#039BE5',\n      label: 'Randevu olu\u015fturun',\n      target,\n    });\n  });\n})();\n<\/script>\n<!-- end Google Calendar Appointment Scheduling -->\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Ad\u0131m 2: JavaScript Kodunu Ekleyin<\/h2>\n\n\n\n<p>A\u015fa\u011f\u0131daki JavaScript kodunu, sitenizin <code>&lt;body&gt;<\/code> etiketinin sonuna veya bir JS dosyas\u0131na ekleyin:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/10.7.2\/highlight.min.js\"&gt;&lt;\/script&gt;\n&lt;script&gt;\ndocument.addEventListener('DOMContentLoaded', () =&gt; {\n  document.querySelectorAll('.wp-block-code').forEach(block =&gt; {\n    const codeBlock = block.querySelector('code');\n    const lines = codeBlock.textContent.split('\\n');\n\n    \/\/ Kopyalama butonunu olu\u015ftur\n    const button = document.createElement('button');\n    button.className = 'mudos-code-copier';\n    button.textContent = 'Kopyala';\n    button.onclick = function() {\n      navigator.clipboard.writeText(codeBlock.textContent).then(() =&gt; {\n        button.textContent = 'Kopyaland\u0131!';\n        setTimeout(() =&gt; {\n          button.textContent = 'Kopyala';\n        }, 2000);\n      }).catch(err =&gt; {\n        console.error('Kopyalama i\u015flemi ba\u015far\u0131s\u0131z:', err);\n      });\n    };\n\n    block.insertBefore(button, codeBlock);\n\n    const lineNumbersContainer = document.createElement('div');\n    lineNumbersContainer.className = 'line-numbers';\n\n    for (let i = 1; i &lt;= lines.length; i++) {\n      lineNumbersContainer.innerHTML += `${i}&lt;br&gt;`;\n    }\n\n    const codeContainer = document.createElement('div');\n    codeContainer.className = 'code-container';\n\n    block.insertBefore(codeContainer, codeBlock);\n    codeContainer.appendChild(lineNumbersContainer);\n\n    const newCodeBlock = document.createElement('code');\n    newCodeBlock.className = codeBlock.className;\n    newCodeBlock.textContent = codeBlock.textContent;\n    hljs.highlightBlock(newCodeBlock);\n\n    const codeBlockWrapper = document.createElement('div');\n    codeBlockWrapper.className = 'code-block';\n    codeBlockWrapper.appendChild(newCodeBlock);\n\n    codeContainer.appendChild(codeBlockWrapper);\n\n    block.removeChild(codeBlock);\n  });\n});\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Bu JavaScript kodu, her bir kod blo\u011funu al\u0131r, sat\u0131r numaralar\u0131n\u0131 ekler, syntax&#8217;\u0131 renklendirir ve kopyalama butonu ekler. Bu, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Sonu\u00e7<\/h2>\n\n\n\n<p>Yukar\u0131daki ad\u0131mlar\u0131 takip ederek, WordPress blogunuzdaki kod snippet&#8217;lerini estetik ve fonksiyonel bir hale getirebilirsiniz. Bu y\u00f6ntem, teknik blog yazarlar\u0131 i\u00e7in m\u00fckemmeldir, \u00e7\u00fcnk\u00fc okuyucular\u0131n kodu daha rahat anlamalar\u0131n\u0131 ve etkile\u015fimde bulunmalar\u0131n\u0131 sa\u011flar. Ayr\u0131ca, sitenizin genel tasar\u0131m\u0131yla uyumlu, profesyonel g\u00f6r\u00fcn\u00fcml\u00fc kod bloklar\u0131 olu\u015fturman\u0131za olanak tan\u0131r.<\/p>\n\n\n\n<p>Bu y\u00f6nergeleri uygulayarak, okuyucular\u0131n\u0131za de\u011ferli ve anla\u015f\u0131l\u0131r i\u00e7erikler sunabilir, blogunuzun teknik otoritesini ve okunabilirli\u011fini art\u0131rabilirsiniz.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress blogunuzda teknik i\u00e7erikler payla\u015f\u0131yorsan\u0131z, okuyucular\u0131n\u0131z\u0131n dikkatini \u00e7ekmek ve onlara daha iyi bir okuma deneyimi sunmak i\u00e7in kod snippet&#8217;lerinin g\u00f6rsel olarak \u00e7ekici hale getirilmesi b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Renkli syntax highlight (s\u00f6zdizimi vurgulama) ve sat\u0131r numaraland\u0131rmas\u0131, kodu daha okunabilir ve anla\u015f\u0131l\u0131r k\u0131larak, okuyucular\u0131n\u0131z\u0131n kodu daha rahat takip etmelerini ve anlamalar\u0131n\u0131 sa\u011flar. Bu yaz\u0131da, WordPress i\u00e7eriklerinizde kod [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[27,29,30,28],"class_list":["post-384","post","type-post","status-publish","format-standard","hentry","category-blog","tag-highlight-js","tag-kod-formatlama","tag-kod-renklendirme","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/posts\/384","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/comments?post=384"}],"version-history":[{"count":2,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/posts\/384\/revisions"}],"predecessor-version":[{"id":386,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/posts\/384\/revisions\/386"}],"wp:attachment":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/media?parent=384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/categories?post=384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/tags?post=384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}