Tools & Services

Pratik Araçlar: Carbon

Güncelleme:
Mümkün olduğunca kod temelli yazılarda, kullanılan kodları olduğu haliyle erişilebilir ve hızlı bir şekilde kullanılabilir olarak sunmaya çalışıyorum. Bu amaçla, GeSHi (Generic Syntax Highlighter) temelli ...
GÖRSEL
Mümkün olduğunca kod temelli yazılarda, kullanılan kodları olduğu haliyle erişilebilir ve hızlı bir şekilde kullanılabilir olarak sunmaya çalışıyorum. Bu amaçla, GeSHi (Generic Syntax Highlighter) temelli bir WordPress eklentisi olan WP-Syntax‘i kullanıyorum. Bir süre daha bu eklentiyi kullanmaya devam edeceğim gibi görünüyor. Ancak, son zamanlarda, pek çok developer tarafından kodların bir görsel aracılığıyla paylaşıldığını görmüş olmalısınız.Carbon - Kod GörselleştiriciÖzellikle bu görseller sosyal medya paylaşımlarında oldukça şık olmalarının yanı sıra bir işlevsellik de sağladılar. Takıldığınız bir konu olduğunda görseli oluşturup pek çok sitede kolaylıkla üzerine sorular yöneltebilmekte ve cevaplar alabilmektesiniz. Benim de özellikle üzerinde durduğum konu bu ve bu vesile ile Carbon adındaki bu küçük uygulamadan bahsetmek istiyorum.

Carbon Nedir?

Carbon, kaynak kodların (source code) pratik bir şekilde özelleştirilerek görsel (png ve svg formatında) hale getirilmesi (ayrıca URL ve iframe seçenekleri de mevcut) ve paylaşılabilmesini sağlayan küçük bir uygulama. Uygulama, Dawn Labs tarafından geliştirilmekte. Web arayüzü başta olmak üzere pek çok şekilde kullanılabilen Carbon ile ilgili detaylı bilgi için farklı dillerde hazırlanmış okuma dosyalarına göz atabilirsiniz.Carbon - Kod Görselleştirici

Nasıl Kullanılır?

Az önce de belirttiğim gibi, uygulama web arayüzü başta olmak üzere pek çok şekilde kullanılabilmekte. Yakın zamanda yayınlanacağı söylenen API ile birlikte çok daha çeşitli kullanım biçimlerinin ortaya çıkacağı da aşikar. Kısaca kullanım biçimlerine bir göz atalım.

Şöyle bir kodumuz olsun:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});
Bu kodu Carbon ile görsel hale getirmek ve sosyal medya ortamında görsel olarak paylaşılabilir kılmak için şu adımları izleyebiliriz.

carbon.now.sh

Uygulamanın web sayfası olan carbon.now.sh‘i ziyaret edip, burada yer alan metin alanına kodu yapıştırabilir ve özelleştirme seçeneklerini kullanabiliriz. Ardında, Tweet ve/ya Export butonlarını tıklayarak paylaşma işlemini gerçekleştirebiliriz. Bu durumda şöyle bir sonuca ulaşabiliriz:Carbon VueYukarıdaki işlemi, metin alanına bir dosya sürükleyip bırakarak da gerçekleştirebilirsiniz.

GitHub Gist Desteği

Sadece görsel olarak paylaşıldığında kodların kopyalanması ve kullanılması pek pratik olmayacaktır. Bu tür gereksinimler için Carbon GitHub Gist kodlarını da pratik bir şekilde görselleştirebilmekte. Bunun için yapılması gereken, https://carbon.now.sh/GIST_ID şeklinde, URL’e ilgili GIST’in ID değerini yazmak olacaktır. Örneğin, 78ea173b7936d2b7e1d67c5c7d45f886 ID’li gist’i görselleştirelim. Bu işlem için internet tarayıcımın adres alanına https://carbon.now.sh/78ea173b7936d2b7e1d67c5c7d45f886 yazmam yeterli olacaktır. Ardından, kodun görüntülenme biçimini istediğim şekilde düzenleyebilirim ve elbette görseli linklendirerek tıklandığında ilgili gist’e ulaşılmasını sağlayabilirim.Carbon GolangElbette tüm yöntemler bu kadarla sınırlı değil. Örneğin Atom, VS Code, Sublime Text 3 gibi editör eklentileri ile de editör içerisinde seçili olarak belirttiğiniz kodların görsel hale getirilmesini sağlayabilirsiniz.VS Code Carbon Plugin

Bu işlem için görselleştirilmesini istediğiniz kodu seçip eklentiyi çağırmanız yeterli olacaktır.

Diğer yandan, carbon-now-cli ile CLI üzerinden de görselleştirme işlemi carbon-now [dosya-adi] komutuyla internatif bir şekilde gerçekleştirilebilmekte. Dosya içerisinden satır da belirtmek mümkün; carbon-now [dosya-adi] -s 3 -e 6 Unutmadan, carbon-now [dosya-adi] -c -h ile oluşturulan görsel clipboard’a da kopyalanabilmekte.

İhitiyaçlar doğrultusunda tercih edilebilecek daha pek çok yöntem ve bilgi de yine uygulamanın GitHub sayfasında yer almakta.

Sonuç Olarak

Yazının başlangıcında da belirttiğim üzere, şimdilik GeSHi (Generic Syntax Highlighter) aracılığıyla kodları kolaylıkla anlaşılır ve kullanılabilir olarak sunmaktayım. Görsel kullanımın sosyal medya paylaşımlarındaki işlevselliğinin blog gibi daha kontrollü alanlarda söz konusu olmadığını düşünüyorum. Ancak, göz aşinalığı kazanmak da faydalı olacaktır.

HABERDAR OL

Yeni eklenen projeler, eğitimler, içerikler ve yayınlanan videolar e-posta adresine gelsin.