Pertanyaan Javascript untuk mengonversi Markdown / Tekstil ke HTML (dan, idealnya, kembali ke Markdown / Tekstil)


Ada beberapa Javascript yang bagus editor untuk Markdown / Tekstil (misalnya: http://attacklab.net/showdown/, yang saya gunakan sekarang), tapi yang saya perlukan hanyalah fungsi Javascript yang mengubah string dari Markdown / Tekstil -> HTML dan kembali.

Apa cara terbaik untuk melakukan ini? (Idealnya itu akan ramah jQuery - misalnya, $("#editor").markdown_to_html())

Edit: Cara lain untuk mengatakannya adalah bahwa saya mencari implementasi Javascript dari Rails ' textilize() dan markdown() pembantu teks


76
2017-08-23 21:46


asal


Jawaban:


Untuk Penurunan harga -> HTML, ada Pertikaian

StackOverflow sendiri menggunakan bahasa Markdown untuk pertanyaan dan jawaban; apakah Anda mencoba untuk melihat cara kerjanya?

Yah, sepertinya itu digunakan Halaman bawah yang tersedia di bawah Lisensi MIT

Pertanyaan Apakah ada perpustakaan atau kontrol Markdown Javascript yang baik? dan jawabannya mungkin juga membantu :-)


Editor lengkap, tentu saja, tidak persis seperti yang Anda minta; tetapi mereka harus menggunakan beberapa jenis fungsi untuk mengubah kode Penurunan ke HTML; dan, tergantung pada lisensi dari editor ini, Anda mungkin dapat menggunakan kembali fungsi itu ...

Sebenarnya, jika Anda melihat lebih dekat di Showdown, di sumber kode (file showdown.js), Anda akan menemukan bagian komentar ini:

//
// Showdown usage:
//
//   var text = "Markdown *rocks*.";
//
//   var converter = new Showdown.converter();
//   var html = converter.makeHtml(text);
//
//   alert(html);
//
// Note: move the sample code to the bottom of this
// file before uncommenting it.
//

Ini bukan sintaks jQuery, tetapi harus cukup mudah diintegrasikan ke dalam aplikasi Anda ;-)


Tentang Tekstil, tampaknya akan sedikit lebih sulit untuk menemukan sesuatu yang berguna :-(


Di sisi lain, HTML -> Markdown, saya kira hal-hal mungkin sedikit lebih sulit ...

Apa yang akan saya lakukan adalah menyimpan Markdown dan HTML di penyimpanan data aplikasi saya (database?), Dan menggunakan satu untuk mengedit, dan yang lain untuk rendering ... Akan mengambil lebih banyak ruang, tetapi tampaknya kurang berisiko daripada "mendekripsi" HTML. ..


95
2017-08-23 22:16



Tekstil

Anda dapat menemukan implementasi Javascript yang tampaknya sangat halus dari Tekstil sini, dan satu lagi sana (mungkin tidak begitu bagus, tetapi memiliki halaman contoh konversi-as-you-type yang bagus).

catatan: ada bug di implementasi pertama saya membuat tautan ke: bar horizontal tidak ditampilkan dengan benar. Untuk memperbaikinya, Anda dapat menambahkan kode berikut dalam file.

for(i=0;i<lines.length;i++) {
    // Add code :Start
    if (lines[i].match(/\s*-{4,}\s*/)){
      html+="<hr/>\n";
      continue;
    }
    // Add code :End
    if (lines[i].indexOf("[") == 0) {continue;}
    //...

12
2018-01-18 18:45



Saya menggunakan skrip minimalis kecil - mmd.js, yang hanya mendukung sebagian dari kemungkinan penurunan harga, tetapi ini mungkin semua yang perlu dilakukan, jadi skrip yang kurang dari 1kb ini luar biasa dan tidak akan menjadi berlebihan.

Fitur yang didukung

  • Header # 
  • Blockquotes >
  • Daftar yang dipesan 1
  • Daftar tidak berurutan *
  • Paragraf
  • Tautan []()
  • Gambar ![]()
  • Penekanan inline *
  • Penekanan inline **

Fitur yang tidak didukung

  • Referensi dan ID
  • Escaping dari karakter Markdown
  • Bersarang

6
2018-06-05 14:13



Saya pikir itu akan bermanfaat untuk membuat daftar di sini tentang solusi JavaScript di luar sana dan ukuran dan kekuatan / kelemahan yang mereka minimalkan (tidak terkompresi). Ukuran terkompresi untuk kode yang diperkecil akan sekitar 50% dari ukuran tidak terkompresi. Apa yang turun adalah yang saya sarankan halaman bawah (8KB) ​​jika Anda memerlukan dukungan komprehensif karena pengguna akan mengedit dokumen di situs Anda, dan saya merekomendasikannya sendiri penarikan (1.3KB) jika Anda menyajikan informasi di aplikasi web yang tidak diedit oleh pengguna; melakukan hal yang benar untuk sebagian besar kasus sementara sangat kecil. Saya percaya hampir semua ini adalah lisensi MIT.

npm juga memiliki beragam skrip untuk tujuan ini, dalam berbagai status kualitas.

  • pertikaian: 28KB. Pada dasarnya standar emas; itu adalah dasar untuk pagedown.

  • halaman bawah: 8KB. Inilah kekuatan yang StackExchange, sehingga Anda dapat melihat sendiri fitur yang didukungnya. Ini cukup komprehensif dan sangat kuat. Selain skrip converter 8KB, ia juga menawarkan skrip editor dan pembersih, yang keduanya juga digunakan StackExchange.

  • markdown-it: 104KB. Mengikuti spesifikasi CommonMark; mendukung ekstensi sintaks. Cepat; sebenarnya bisa sekuat showdown, tapi sangat besar. Adalah dasar untuk http://dillinger.io/.

  • ditandai: 19KB. Luas; diuji terhadap unit test suite; mendukung aturan lexer kustom.

  • micromarkdown: 5KB. Mendukung banyak fitur, tetapi tidak memiliki beberapa fitur umum seperti daftar yang tidak diurutkan * dan beberapa yang umum yang tidak benar-benar bagian dari spesifikasi seperti blok kode berpagar. Banyak bug, melempar pengecualian pada dokumen yang paling lama. Saya menganggap itu eksperimental.

  • penurunan harga nano: 1.9KB. Cakupan fitur terbatas pada hal-hal yang digunakan oleh sebagian besar dokumen; lebih kuat dari micromarkdown tetapi tidak sempurna; menggunakan tes unit yang sangat mendasar. Cukup kuat tetapi pecah pada banyak kasus tepi.

  • penarikan: 1.3KB. Pengungkapan penuh, saya menulisnya. Cakupan fitur yang lebih luas dan lebih kuat daripada penurunan-nano sementara lebih kecil; menangani sebagian besar tetapi tidak semua dari spesifikasi CommonMark. Menangani beberapa kasus tepi salah; tidak direkomendasikan untuk dokumen yang diedit pengguna tetapi sangat berguna untuk menyajikan informasi di aplikasi web. Tidak ada HTML sebaris.

  • mmd.js: 800 byte. Hasil dari upaya untuk membuat parser terkecil yang masih berfungsi. Mendukung sebagian kecil; dokumen perlu disesuaikan untuk itu.

  • markdown-js: 54KB (tidak tersedia untuk diunduh, mungkin akan dikurangi menjadi ~ 20KB). Terlihat cukup komprehensif dan termasuk tes, tetapi saya tidak terlalu akrab dengannya.

  • kehancuran: 41KB (tidak tersedia untuk diunduh, mungkin akan dikecilkan ke ~ 15KB). plugin jQuery; Penurunan harga Ekstra (tabel, daftar definisi, catatan kaki).


5
2017-10-16 02:40



Sangat mudah untuk gunakan Showdown dengan atau tanpa jQuery. Berikut contoh jQuery:

// See http://mathiasbynens.be/notes/showdown-javascript-jquery for a plain JavaScript version as well
$(function() {
 // When using more than one `textarea` on your page, change the following line to match the one you’re after
 var $textarea = $('textarea'),
     $preview = $('<div id="preview" />').insertAfter($textarea),
     converter = new Showdown.converter();
 $textarea.keyup(function() {
  $preview.html(converter.makeHtml($textarea.val()));
 }).trigger('keyup');
});

4
2018-05-02 18:13



The Showdown Attacklab-Link turun jadi gunakan https://github.com/coreyti/showdown untuk kebutuhan konversi Anda :)


4
2018-04-24 09:19



Ini tidak menangani seluruh permintaan (bukan editor), tetapi tekstil-js adalah pustaka javascript rendering: https://github.com/borgar/textile-js. Demonstrasi tersedia di http://borgar.github.io/textile-js/


3
2018-01-31 19:34



Saya menemukan pertanyaan ini menarik, jadi saya memutuskan untuk memulai sesuatu (hanya menggantikan strong dan italic tag penurunan harga). Setelah menghabiskan satu jam mencoba menyusun solusi menggunakan regexes, saya menyerah dan berakhir dengan yang berikut, yang tampaknya berfungsi dengan baik. Yang mengatakan, itu pasti dapat lebih dioptimalkan dan saya tidak yakin bagaimana sebenarnya dunia tangguh itu akan dalam bentuk ini:

function mdToHtml(str) {
    var tempStr = str;
    while(tempStr.indexOf("**") !== -1) {
        var firstPos = tempStr.indexOf("**");
        var nextPos = tempStr.indexOf("**",firstPos + 2);
        if(nextPos !== -1) {
            var innerTxt = tempStr.substring(firstPos + 2,nextPos);
            var strongified = '<strong>' + innerTxt + '</strong>';
            tempStr = tempStr.substring(0,firstPos) + strongified + tempStr.substring(nextPos + 2,tempStr.length);
        //get rid of unclosed '**'
        } else {
            tempStr = tempStr.replace('**','');
        }
    }
     while(tempStr.indexOf("*") !== -1) {
        var firstPos = tempStr.indexOf("*");
        var nextPos = tempStr.indexOf("*",firstPos + 1);
        if(nextPos !== -1) {
            var innerTxt = tempStr.substring(firstPos + 1,nextPos);
            var italicized = '<i>' + innerTxt + '</i>';
            tempStr = tempStr.substring(0,firstPos) + italicized + tempStr.substring(nextPos + 2,tempStr.length);
        //get rid of unclosed '*'
        } else {
            tempStr = tempStr.replace('*','');
        }
    }
    return tempStr;
}

Kode pengujian:

    var s = "This would be *italicized* text and this would be **bold** text, This would be *italicized* text and this would be **bold** text, This would be *italicized* text and this would be **bold** text";
    alert(mdToHtml(s));

Keluaran:

This would be <i>italicized</i>text and this would be <strong>bold</strong> text, This would be <i>italicized</i>text and this would be <strong>bold</strong> text, This would be <i>italicized</i>text and this would be <strong>bold</strong> text

EDIT: Baru di V 0,024 - Penghapusan otomatis dari tag markdown tanpa penutup


1
2017-08-23 23:29



markdown-js adalah parser markdown javascript yang bagus, proyek aktif dengan pengujian.


1
2017-09-19 06:04



Pernahkah Anda melihat perpustakaan Eclipse WikiText yang merupakan bagian dari Mylyn. Ini akan mengkonversi dari banyak sintaks wiki ke xhtml dan ke xdocs / DITA. Ini terlihat keren.

http://help.eclipse.org/galileo/topic/org.eclipse.mylyn.wikitext.help.ui/help/Markup-Conversion.html

Adakah yang menemukan solusi untuk masalah tekstil HTML->? Semua dokumentasi kami saat ini dalam format M $ Word dan kami ingin membawanya ke Redmine Wiki untuk pemeliharaan kolaboratif. Kami belum menemukan alat apa pun yang akan melakukan konversi. Kami telah menemukan ekstensi Open Office yang menghasilkan teks berformat mediawiki tetapi Redmine Wiki menggunakan subkumpulan tekstil.

Ada yang tahu alat yang berkonversi UNTUK tekstil dari mediawiki, Word, XDocs, atau HTML?


0
2017-12-09 17:33



Untuk Tekstil:

Saya baru saja menambal bersama-sama sebuah konverter HTML ke Tekstil: https://github.com/cmroanirgo/to-textile

Untuk Tekstil terbalik ke HTML, saya menggunakan dan merekomendasikan https://github.com/borgar/textile-js, jawaban lain telah disebutkan.


0
2018-03-25 03:25