Markdown to BBCode converter

  • Konuyu başlatan Konuyu başlatan 662
  • Başlangıç Tarihi Başlangıç Tarihi
  • Mesaj Mesaj 10
  • Görüntüleme Görüntüleme 324
  • Etiketler Etiketler
    bbcode
6

662

Uzman
Katılım
21 Aralık 2023
Mesajlar
1.910
Makaleler
24
Çözümler
53
Beğeniler
2.694

Konu Başlıkları Gizle

  1. 1 Neler yapılabiliyor
  2. 2 Çalışmayan öğeler
Foruma katıldığımdan bu güne kadar editörde Markdown desteği gelmesini istemiştim. Başlarda bu öneri uygulansa da sonraki zamanlarda uyumsuzluk sorunları yüzünden bu özellik kaldırıldı maalesef. Ben de makale yazarken kullanım kolaylığı sağladığı için bunun otomatik dönüştürülmesini sağlayan basit bir site hazırladım. İlk kez web üzerinde "metin editörü" yapacağım için çok büyük katkıları oldu projenin(Regex öğrendim az buçuk:p). Çok sade olduğunu ben de biliyorum, katkıda bulunursanız da çok sevinirim.
Website adresi: Markdown to BBCode

Neler yapılabiliyor​

Siteyi tamamen kendi kullanım alışkanlıklarıma uygun yaptığım için sizin aradığınız bazı özellikler olmayabilir. Fakat genel olarak tüm öğeleri ekledim. Markdown editörü olarak Ghostwriter kullandığım için başka editör kullanıcılarna farklı gelebilir.


  1. Listeler.
  2. URL ekleme.
  3. Kod blokları.
  4. Yazı stilleri: italik yazı, kalın yazı, üstü çizgili, alttan çizgili.

Çalışmayan öğeler​

  1. İçiçe(Nested) listeler. Bunu yapmaya çalıştığımda garip sonuçlar veriyor. IQ seviyem bunu yapmaya yetmedi maalesef:rofl:.
  2. Fotoğraf. Techolay özeli için konuşmam gerekirse, fotoğraflar nasıl sitede listeleniyor bu konuda bilgim yok maalesef.
  3. Medya içerikleri. Kimsenin kullandığını sanmıyorum aslında.
Siteye katkıda bulunmak ve hata bildirimi için projenin GitHub sayfasında başlık açabilir veya pull request atabilirsiniz.
GitHub sayfası: GitHub - kaanchinar/mdtobb: Markdown to Bulletin Board Code converter website


Not: Bu konuyu da kendi projemi kullanarak yazdım:hehehe:. Projeyi beğendiyseniz yıldızlamayı unutmayın.
 
Son düzenleyen: Moderatör:
Elinize sağlık, küçük ve işlevli olmasından dolayı eğlenceli bir proje olmuş.

Bence listeleri işleme yönteminiz mantıklı. Recursive yapmanın pratik olacağını düşünmüştüm, bir baktım ki öyle yapmışsınız zaten.

İç içe listelerin üstesinden gelmek için şöyle bir yöntem düşündüm: O açma etiketi kalmayana kadar etiketin sonuncusunu ve ondan sonra ilk gelen -zaten tek olmalı- kapatma etiketini bul, içini işle.
Parantez eşleştirme problemi özünde, en pratik nasıl yapılabileceğini düşünürken böyle bir yol geldi aklıma.

Not: Önerdiğim değişiklik uygulandıktan sonra elle <ul> / <ol> / <li> yazınca sonsuz döngü oluyor ve uygulama patlıyor... : D

İlk düşündüğüm yöntem, ilk açma etiketiyle son kapatma etiketini bulmaktı. Ne kadar hatalı olduğunu fark etmemiştim hatta doğru çözümmüşçesine sadece bunu söyleyip yollayacaktım mesajımı.

Yaptığım değişikliklerle kodun yeni hâli şöyle oldu:

JavaScript: 
function convertLists(input) {
  const convertListItems = (text) => {
    while (text.includes("<li>")) {
      text = text.replace(/(<li>)(?![\s\S]*\1)([\s\S]*?)<\/li>/g, (match, ...groups) => {
        const processedContent = convertLists(groups[1]);
        return `[*]${processedContent}`;
      });
    }
    return text;
  };

  const convertListsUnified = (text) => {
    while (text.includes("<ul>") || text.includes("<ol>")) {
      text = text.replace(/(<(ul|ol)>)(?![\s\S]*\1)([\s\S]*?)<\/\2>/g, (match, ...groups) => {
        const listType = groups[1];
        const content = groups[2];
        const processedContent = convertListItems(content);
        const bbCodeTag = listType === "ol" ? "[list=1]" : "[list]";
        return `${bbCodeTag}${processedContent}[/list]`;
      });
    }
    return text;
  };

  return convertListsUnified(input);
}

Yardım aldığım kaynağı da paylaşayım: Find Last Occurrence of Regex Word

Şu da bayağı yardımcı bir siteymiş: regex101: build, test, and debug regex

Şunu denedim:
Kod: 
- 1\. madde (Slash'i silince numaralı liste olarak algılıyor...)
  - 1\. alt madde
  - 2\. alt madde
    - 1\. alt alt madde
    - 2\. alt alt madde
  - 3\. alt madde
    - 1\. alt alt madde
    - 2\. alt alt madde
- 2\. madde

1. Numaralılarda
2. Alt madde
3. Yapamadım ya
4. `marked` doğru çıktı
5. vermiyor gibi...
  1. Baksanıza!!!!
  2. asdas
 
Son düzenleme:
662 dedi:
Projeyi beğendiyseniz yıldızlamayı unutmayın.
Genişletmek için tıkla...
Küçültmek için tıkla...
Bayıldım. Eline sağlık. Starladım
cildir.gif
 
brkdnmz dedi:
Elinize sağlık, küçük ve işlevli olmasından dolayı eğlenceli bir proje olmuş.

Bence listeleri işleme yönteminiz mantıklı. Recursive yapmanın pratik olacağını düşünmüştüm, bir baktım ki öyle yapmışsınız zaten.

İç içe listelerin üstesinden gelmek için şöyle bir yöntem düşündüm: O açma etiketi kalmayana kadar etiketin sonuncusunu ve ondan sonra ilk gelen -zaten tek olmalı- kapatma etiketini bul, içini işle.
Parantez eşleştirme problemi özünde, en pratik nasıl yapılabileceğini düşünürken böyle bir yol geldi aklıma.

Not: Önerdiğim değişiklik uygulandıktan sonra elle <ul> / <ol> / <li> yazınca sonsuz döngü oluyor ve uygulama patlıyor... : D

İlk düşündüğüm yöntem, ilk açma etiketiyle son kapatma etiketini bulmaktı. Ne kadar hatalı olduğunu fark etmemiştim hatta doğru çözümmüşçesine sadece bunu söyleyip yollayacaktım mesajımı.

Yaptığım değişikliklerle kodun yeni hâli şöyle oldu:

JavaScript: 
function convertLists(input) {
  const convertListItems = (text) => {
    while (text.includes("<li>")) {
      text = text.replace(/(<li>)(?![\s\S]*\1)([\s\S]*?)<\/li>/g, (match, ...groups) => {
        const processedContent = convertLists(groups[1]);
        return `[*]${processedContent}`;
      });
    }
    return text;
  };

  const convertListsUnified = (text) => {
    while (text.includes("<ul>") || text.includes("<ol>")) {
      text = text.replace(/(<(ul|ol)>)(?![\s\S]*\1)([\s\S]*?)<\/\2>/g, (match, ...groups) => {
        const listType = groups[1];
        const content = groups[2];
        const processedContent = convertListItems(content);
        const bbCodeTag = listType === "ol" ? "[list=1]" : "[list]";
        return `${bbCodeTag}${processedContent}[/list]`;
      });
    }
    return text;
  };

  return convertListsUnified(input);
}

Yardım aldığım kaynağı da paylaşayım: Find Last Occurrence of Regex Word

Şu da bayağı yardımcı bir siteymiş: regex101: build, test, and debug regex

Şunu denedim:
Kod: 
- 1\. madde (Slash'i silince numaralı liste olarak algılıyor...)
  - 1\. alt madde
  - 2\. alt madde
    - 1\. alt alt madde
    - 2\. alt alt madde
  - 3\. alt madde
    - 1\. alt alt madde
    - 2\. alt alt madde
- 2\. madde

1. Numaralılarda
2. Alt madde
3. Yapamadım ya
4. `marked` doğru çıktı
5. vermiyor gibi...
  1. Baksanıza!!!!
  2. asdas
Genişletmek için tıkla...
Küçültmek için tıkla...
Evet, calisti paylastigin kod parcasi. Bunu da projeye ekleyecegim, tesekkurler. Bu arada o regex sitesini uzun zaman once bir YouTube videosunda gormustum, siteyi gelistirirken de bulamadim ama. Cok kullanisli site regex101.
 
Benim için hâyâti bir sorun maalesef. Tüm içeriklerimi .md ile yazıyorum. Maalesef, her site Markdown desteği sağlamıyor. Bunun içinde o sitenin desteklediği içeriye dönüştürmem lazım. Bu da yoruyor adamı. Buna, bu forumda dahildir.

Örnek;​

2024-07-05_10-01.webp
 
662 dedi:
Evet, calisti paylastigin kod parcasi. Bunu da projeye ekleyecegim, tesekkurler. Bu arada o regex sitesini uzun zaman once bir YouTube videosunda gormustum, siteyi gelistirirken de bulamadim ama. Cok kullanisli site regex101.
Genişletmek için tıkla...
Küçültmek için tıkla...

Siteyi ben de paylaştığım StackOverflow başlığında görmüştüm. Gerçekten güzel yapılmış, şaşırdım.

Rica ederim, ben de teşekkür ederim. Şimdi şöyle daha pratik bir çözüm geldi de aklıma, yanlış gelmedi kulağa: RegEx yerine direkt şu üç replace iş görür gibi:
  • text.replace("<ul>", "[list]")
  • text.replace("<ol>", "[list=1]")
  • text.replace("<li>", "[*]")
  • Kapatma etiketleri de [/list] ve boş string ile değiştirilir.
Tabii elle yazılan etiketler bunu da patlatacaktır. Henüz denemedim, aklıma gelmişken hemen yazayım dedim.
 
@Silinen üye # ile <h1> etiketi. Xenforoda <h1> etiketini belirleyen heading yok. Bu yuzden <h2> daha uygun. Ek olarak #, yani <h1> semantik web sayfalarinda bir kez bulunur. Bu da forumda konu basligi anlamina geliyor.
 

Benzer konular

A
  • Çözüldü
Çözüldü WordPress Gütenberg Markdown yapıştırma sorunu
Mesaj
2
Görüntüleme
172
agg1401
A

Yeni konular

Yeni mesajlar

Geri
Yukarı Alt