Bir önceki thread'imde NSlider kütüphanesini tanıtmıştım. Şimdi yine kendi geliştirdiğim, TypeScript ile yazdığım bir JavaScript kütüphanesi olan DownArea'yı kullanarak sitenize nasıl bir markdown editor implement edebilirsiniz bunu anlatacağım. Kütüphanenin GitHub repo'sundan isterseniz kodları inceleyebilir veya indirebilirsiniz isterseniz de CDN linklerini alabilirsiniz. Hemen küçük bir örnek ile nasıl implement ediliyor anlatayım.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DownArea</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fatihege/downarea@1.1.0/src/downarea.min.css">
</head>
<body>
<div class="editor"></div>
<script src="https://cdn.jsdelivr.net/gh/fatihege/downarea@1.1.0/src/downarea.min.js"></script>
<script>
var downarea = new DownArea({
elem: document.querySelector('.editor'), // Zorunlu - DownArea editörünün oluşturulacağı elementi belirtin.
resize: DownArea.RESIZE_BOTH, // Opsiyonel - Yeniden boyutlandırma özelliklerini ayarlayın.
/**
* RESIZE_OFF - Yeniden boyutlandırmayı tamamıyla kapatır.
* RESIZE_VERTICAL - Yeniden boyutlandırmayı dikey eksende açar.
* RESIZE_HORIZONTAL - Yeniden boyutlandırmayı yatay eksende açar.
* RESIZE_BOTH - Yeniden boyutlandırmayı hem dikey hem de yatay eksende açar.
*/
hide: ['heading'], // Opsiyonel - Gizlenecek key'ini yazdığınız tool'ları gizler. Key'ler aşağıdaki tabloda belirtilmiştir.
name: 'body', // Opsiyonel - Textarea'nın `name` attribute'unun alacağı değer. Form işlemleri yapıyorsanız ihtiyacınız olacaktır.
});
</script>
</body>
</html>
Tool'ların key'leri ve adları
| Anahtar | İsim |
|---|
| heading | Başlıklar |
| bold | Kalın |
| italic | İtalik |
| bold-italic | Kalın İtalik |
| link | Bağlantılar |
| image | Görsel |
| blockquote | Alıntı |
| u-list | Sırasız Liste |
| o-list | Sıralı Liste |
| sl-code | Tek Satır Kod |
| code-block | Kod Bloğu |
Tool'ların metotları
| Tool Anahtarı | Metot | Argümanlar |
|---|
| heading-1 | .addHeading(level: number = 1) | varsayılan (1) |
| heading-2 | .addHeading(level: number = 1) | 2 |
| heading-3 | .addHeading(level: number = 1) | 3 |
| heading-4 | .addHeading(level: number = 1) | 4 |
| heading-5 | .addHeading(level: number = 1) | 5 |
| heading-6 | .addHeading(level: number = 1) | 6 |
| bold | .addBold() | boş |
| italic | .addItalic() | boş |
| bold-italic | .addItalic() | boş |
| normal-link | .addLink(type: number = 0) | varsayılan (0) |
| quick-link | .addLink(type: number = 0) | 1 |
| email | .addEmail() | boş |
| image | .addImage() | boş |
| blockquote | .addBlockquote() | boş |
| u-list | .addUnorderedList() | boş |
| o-list | .addOrderedList() | boş |
| sl-code | .addSingleLineCode() | boş |
| code-block | .addCodeBlock() | boş |
Bonus
Şimdi size markdown için bazı kaynaklar vereceğim. İşinize yarayacağını düşündüğüm kaynaklardır.
- Markdown Cheatsheet :: Markdown referansı.
- Shields.io :: Çoğu projede gördüğünüz badge'leri bulabileceğiniz site.
- Emoji Cheatsheet :: GitHub gibi markdown'da emoji destekleyen sitelerde kullanabileceğiniz emojilerin full listesi.
- GitHub Profile Readme Generator :: GitHub profilinizde kendinizi tanıtan bir README.md dosyası oluşturmak istiyorsanız bu site ile çok hızlı bir şekilde oluşturabilirsiniz. Ben de kendi profilimde kullanıyorum.
- Markdown Guide :: Markdown'ın temel syntax'ini öğrenebileceğiniz bir guide sitesi.
Not: Eğer kullanım aşamasında görünümde veya işlevde bir sıkıntı oluşursa GitHub repo'su üzerinden issue report yapabilirsiniz.
