Pratik Araçlar: Carbon
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, uzun bir süre WordPress web sitelerinde GeSHi (Generic Syntax Highlighter) temelli bir eklenti olan WP-Syntax'i kullandım1. Ancak, son zamanlarda, pek çok geliştirici tarafından, özellikle sosyal medya içeriklerinde kodların ortak bir görsel dil ile paylaşıldığını görmüş olmalısınız.

Ö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
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 Labs2 tarafından geliştirilmekte3. 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 atabilirsiniz4.

Carbon Kullanımı
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 adresini ziyaret edip5, burada yer alan metin alanına kodu yapıştırabilir ve özelleştirme seçeneklerini kullanabiliriz. Ardında, Tweet ve/veya Export butonlarını tıklayarak paylaşma işlemini gerçekleştirebiliriz. Bu durumda şöyle bir sonuca ulaşabiliriz:

Yukarı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.

Elbette tüm yöntemler bu kadarla sınırlı değil. Örneğin Atom6, VS Code7, Sublime8 gibi editör eklentileri ile de editör içerisinde seçili olarak belirttiğiniz kodların görsel hale getirilmesini sağlayabilirsiniz.

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ştirilebilmekte9. 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 almakta9.
Sonuç Olarak
Görsel kullanımı sosyal medya üzeriden fikir alışverişi amacıyla oldukça faydalı. Ancak, blog içerisinde elbette kodun kopyalanabilir (bunun için gist ya da Codepen, JSFiddle ve benzeri kod paylaşım/test alanları da kullanılabilir elbette) şekilde paylaşılabiliyor olması önemli.