Carbon.now.sh Klonu

Bir süredir kişisel twitter hesabımdan ve prototurk'un instagramından kod örnekleri paylaşıyorum. Bu örnekleri paylaşırken belli bir formatta, görünümü güzel bir şekilde paylaşıyordum ve bazıları bunu nereden oluşturduğumu soruyordu.

Paylaştığım bir kod örneğini göstereyim hemen;

Bu örneği carbon.now.sh adresinden oluşturuyorum. Geçenlerde de biz olsak böyle bir şeyi nasıl yaparız diye düşündüm.

Sitede bir kod editörü var, editörle ilgili bazı ayarlar yapılıyor ve editörün ekran görüntüsü indirtiliyor.

Kod editörü olarak CodeMirror kullandım, divin ekran görüntüsünü kaydetmek için Html2Canvas, birazda javascript ve css ile benzer bir görüntü çıkardık :) Gerisi zaten videoda.

Kaynak kodları için: https://github.com/tayfunerbilen/karton

Demo: https://kartonapp.netlify.com

Sonuç olarak bu da bizim yaptığımız uygulamadan aldığım görüntü;