जावास्क्रिप्ट को मार्कडाउन / टेक्सटाइल को HTML में बदलने के लिए (और, आदर्श रूप से, मार्कडाउन / टेक्सटाइल में वापस)


84

मार्काडाउन / टेक्सटाइल के लिए कई अच्छे जावास्क्रिप्ट एडिटर हैं (जैसे: http://attacklab.net/showdown/ , जिसको मैं अभी उपयोग कर रहा हूं), लेकिन मुझे केवल एक जावास्क्रिप्ट फ़ंक्शन की आवश्यकता है जो मार्कडाउन (टेक्सटाइल) से एक स्ट्रिंग को परिवर्तित करता है। -> एचटीएमएल और वापस।

ऐसा करने का सबसे अच्छा तरीका क्या है? (आदर्श रूप से यह jQuery के अनुकूल होगा - उदाहरण के लिए, $("#editor").markdown_to_html())

संपादित करें: इसे लगाने का एक और तरीका यह है कि मैं रेल्स के पाठ textilize()और markdown()पाठ सहायकों के एक जावास्क्रिप्ट कार्यान्वयन के लिए देख रहा हूं

जवाबों:


98

Markdown -> HTML के लिए, Showdown है

StackOverflow स्वयं मार्कडाउन भाषा का उपयोग प्रश्नों और उत्तरों के लिए करता है; क्या आपने देखा कि यह कैसे काम करता है?

खैर, ऐसा लगता है कि यह पेजडाउन का उपयोग कर रहा है जो एमआईटी लाइसेंस के तहत उपलब्ध है

प्रश्न क्या कोई अच्छी मार्कडाउन जावास्क्रिप्ट लाइब्रेरी या नियंत्रण है? और इसके जवाब मदद कर सकते हैं, :-)


एक पूर्ण संपादक, निश्चित रूप से, वास्तव में वही नहीं है जो आपने मांगा था; लेकिन उन्हें HTML में मार्कडाउन कोड को बदलने के लिए किसी प्रकार के फ़ंक्शन का उपयोग करना चाहिए; और, इन संपादकों के लाइसेंस के आधार पर, आप उस फ़ंक्शन का पुनः उपयोग करने में सक्षम हो सकते हैं ...

वास्तव में, यदि आप इसके कोड स्रोत (फ़ाइल showdown.js) में शोडाउन पर एक नज़र डालते हैं , तो आपको टिप्पणी का यह भाग मिलेगा:

//
// 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.
//

यह jQuery वाक्यविन्यास नहीं है, लेकिन आपके आवेदन में एकीकृत करने के लिए काफी आसान होना चाहिए ;-)


टेक्सटाइल के बारे में, यह उपयोगी कुछ भी खोजने के लिए थोड़ा कठिन लगता है :-(


दूसरे पक्ष में, HTML -> मार्कडाउन, मुझे लगता है कि चीजें थोड़ी कठिन हो सकती हैं ...

मैं अपने ऐप्लिकेशन डेटा स्टोर (डेटाबेस?) में मार्कडाउन और एचटीएमएल दोनों को स्टोर करूंगा, और एक को एडिटिंग के लिए उपयोग करूंगा, और दूसरे को रेंडर करने के लिए ... अधिक जगह लेगा, लेकिन यह "डीक्रिप्ट" एचटीएमएल की तुलना में कम जोखिम भरा लगता है। ..


5
लगता है लिंक बदल गए हैं। डेमो softwaremaniacs.org/playground/showdown-highlight पर है और सोर्स कोड softwaremaniacs.org/playground/showdown-highlight/showdown.js
जॉन जे। कैमिलेरी

1
@ जॉन आपकी टिप्पणी के लिए धन्यवाद; मैंने लिंक बदलने के लिए अपने उत्तर को संपादित कर लिया है ;-)
पास्कल मार्टिन

दुर्भाग्य से यह पुस्तकालय मार्कडाउन-आधारित लिंक के लिए काम नहीं करता है, उर्फ: कुछ पाठ रूपांतरित नहीं होते हैं। यह कुछ वाक्यविन्यास याद आ रहा है, जो दुर्भाग्यपूर्ण है। और क्या याद आ रही है?
विषमकाल

25

मैंने सोचा कि जावास्क्रिप्ट समाधानों की सूची यहां और उनके लघु (असम्पीडित) आकार और ताकत / कमजोरियों के बारे में सूची बनाना सार्थक होगा। कीमा बनाया हुआ कोड के लिए संकुचित आकार असम्पीडित आकार का लगभग 50% होगा। क्या यह नीचे आता है:

  • यदि आपको व्यापक समर्थन की आवश्यकता है और उपयोगकर्ता संपादित या मनमाने दस्तावेज़ होंगे, तो शोडाउन (28KB) का उपयोग करें ।
  • यदि आप उपयोगकर्ता द्वारा संपादित / मनमाने दस्तावेज हैं, तो पृष्ठांकित (8KB) ​​का उपयोग करें, लेकिन तालिका, परिभाषा सूची, या फ़ुटनोट्स (जैसे StackExchange जैसी साइट पर टिप्पणियां) जैसी चीज़ों की आवश्यकता नहीं है।
  • मेरे अपने का प्रयोग करें गिरावट (1.3KB) यदि आप यथोचित उच्च गुणवत्ता, और मेज समर्थन की जरूरत है, लेकिन पंख वजन चाहते हैं और हर एक किनारे मामले संबोधित जरूरत नहीं है।
  • यदि आपको सुरक्षा या विस्तार क्षमता जैसी अद्वितीय क्षमताओं की आवश्यकता है, तो दूसरों का उपयोग करें।

ये सभी एमआईटी लाइसेंस का उपयोग करते हैं, अधिकांश एनपीएम पर हैं।

  • प्रदर्शन : 28KB। मूल रूप से सोने का मानक; यह पृष्ठांकित के लिए आधार है।

  • पृष्ठांकित : 8KB। यह वह शक्तियाँ है जो StackExchange है, इसलिए आप अपने लिए देख सकते हैं कि यह कौन सी सुविधाओं का समर्थन करता है (यह बहुत ही मजबूत लेकिन अनुपलब्ध तालिकाओं, परिभाषा सूचियों, फुटनोट्स आदि) है। 8KB कनवर्टर स्क्रिप्ट के अलावा, यह संपादक और सैनिटाइज़र स्क्रिप्ट भी प्रदान करता है, जिसमें दोनों StackExchange भी उपयोग करते हैं।

  • ड्रॉडाउन : 1.3KB। पूरा खुलासा, मैंने इसे लिखा था। किसी भी अन्य हल्के कनवर्टर की तुलना में व्यापक सुविधा गुंजाइश; सभी को संभालता है, लेकिन सभी कॉमनमार्क कल्पना को नहीं। उपयोगकर्ता संपादन के लिए अनुशंसित नहीं है, लेकिन वेब एप्लिकेशन में जानकारी प्रस्तुत करने के लिए बहुत उपयोगी है। कोई इनलाइन HTML नहीं।

  • markdown-it : 104KB कॉमनमार्क कल्पना का अनुसरण करता है; सिंटैक्स एक्सटेंशन का समर्थन करता है; डिफ़ॉल्ट रूप से सुरक्षित आउटपुट पैदा करता है। तेज; वास्तव में तसलीम की तरह मजबूत हो सकता है, लेकिन बहुत बड़ा। Http://dillinger.io/ का आधार है ।

  • चिह्नित : 19KB। व्यापक; यूनिट टेस्ट सूट के खिलाफ परीक्षण किया गया; कस्टम लेसर नियमों का समर्थन करता है।

  • माइक्रोमार्कडाउन : 5KB। बहुत सी विशेषताओं का समर्थन करता है, लेकिन कुछ सामान्य लोगों को याद कर रहा है जैसे कि अनियंत्रित सूचियों का उपयोग करना *और कुछ सामान्य ऐसे जो कड़ाई से अटके हुए कोड ब्लॉक की तरह कल्पना का हिस्सा नहीं हैं। कई कीड़े, सबसे लंबे दस्तावेजों पर अपवाद फेंकता है। मैं इसे प्रायोगिक मानता हूं।

  • नैनो- मार्कडाउन: 1.9KB। फ़ीचर स्कोप ज्यादातर दस्तावेज़ों द्वारा उपयोग की जाने वाली चीजों तक सीमित है; माइक्रोमार्कडाउन की तुलना में अधिक मजबूत लेकिन सही नहीं; अपनी खुद की बहुत ही बुनियादी इकाई परीक्षण का उपयोग करता है। यथोचित रूप से मजबूत लेकिन कई किनारे मामलों में टूट जाता है।

  • mmd.js : 800 बाइट्स। सबसे छोटे संभव पार्सर को बनाने के प्रयास का परिणाम जो अभी भी कार्यात्मक है। एक छोटी उपसमूह का समर्थन करता है; इसके लिए दस्तावेज़ को सिलवाया जाना चाहिए।

  • markdown-js : 54KB (डाउनलोड करने के लिए उपलब्ध नहीं; शायद ~ 20KB के लिए छोटा होगा)। बहुत व्यापक दिखता है और इसमें परीक्षण शामिल हैं, लेकिन मैं इससे बहुत परिचित नहीं हूं।

  • मेल्टडाउन : 41KB (डाउनलोड के लिए उपलब्ध नहीं; संभवत: ~ 15KB तक छोटा होगा)। jQuery प्लगइन; मार्कडाउन एक्स्ट्रा (टेबल, परिभाषा सूचियाँ, फुटनोट्स)।

  • यूनिफाइडjs : बदलता है, 5-100KB। Html, markdown, और गद्य के बीच परिवर्तित करने के लिए एक प्लगइन-आधारित प्रणाली। आपको कौन से प्लगइन्स की आवश्यकता है (स्पेल-चेकिंग, सिंटैक्स-हाइलाइटिंग, इनपुट सैनिटाइजिंग) के आधार पर फ़ाइल का आकार अलग-अलग होगा। संभवतः क्लाइंट-साइड की तुलना में अधिक सर्वर-साइड का उपयोग किया जाता है।


इसके लिए धन्यवाद, वास्तव में उपयोगी! मैंने अभी-अभी मार्कडाउन फाइलों को मेरे स्टैटिक HTML पेजों में पढ़ने और उन्हें HTML में बदलने के लिए शोकेड और fetch( जेक आर्चीबाल्ड के "दैट सो फेट" के एक छोटे से स्कैन के साथ ) का उपयोग किया। स्वीट :-)
डेव एवरिट

@DaveEveritt महान - जब तक आप निश्चित ब्राउज़र को लक्षित नहीं कर रहे हैं, तब तक एक पॉलीफ़िल शामिल करना न भूलें। यह आपके उद्देश्य के लिए काम करेगा और यह छोटा है: github.com/developit/unfetch
एडम लेगेट

सहमत, और लिंक के लिए धन्यवाद, हालांकि मुझे लगता है कि केवल कुछ ब्राउज़रों को अब इसकी आवश्यकता है - सैमसंग नई रिलीज़ में समर्थन कर रहा है और मैं अब IE के लिए लक्ष्य नहीं कर रहा हूं, हालांकि मुझे पता है कि कई देवों
डेव एवरिट

क्या आपके पास ड्राडाउन पर <table> सुविधाओं को जोड़ने की योजना है ? मैंने इसे खुद से जोड़ने की कोशिश की लेकिन यह मेरी समझ पर हावी है। ; (
विक्टर ली

1
@VictorLee किया!
एडम लेगेट

13

कपड़ा

आप यहाँ टेक्सटाइल का एक बहुत अच्छा जावास्क्रिप्ट कार्यान्वयन पा सकते हैं , और एक और वहाँ (शायद इतना अच्छा नहीं है, लेकिन एक अच्छा कन्वर्ट-ए- यू -टाइप उदाहरण पृष्ठ है)।

नोट: पहले कार्यान्वयन में एक बग है मैंने एक लिंक बनाया: क्षैतिज सलाखों को सही तरीके से प्रस्तुत नहीं किया गया है। इसे ठीक करने के लिए, आप फ़ाइल में निम्न कोड जोड़ सकते हैं।

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;}
    //...

9

मैं छोटे न्यूनतर स्क्रिप्ट - mmd.js का उपयोग कर रहा हूं , जो केवल मार्कडाउन संभावनाओं के सबसेट का समर्थन करता है, लेकिन यह सब हो सकता है कि किसी को वैसे भी आवश्यकता होगी, इसलिए यह स्क्रिप्ट जो 1kb से कम है वह अद्भुत है और एक ओवरकिल नहीं होगी।

समर्थित सुविधाएँ

  • हेडर #
  • ब्लॉक उद्धरण >
  • सूचियों का आदेश दिया 1
  • अनियंत्रित सूची *
  • पैराग्राफ
  • लिंक []()
  • इमेजिस ![]()
  • इनलाइन जोर *
  • इनलाइन जोर **

असमर्थित सुविधाएँ

  • सन्दर्भ और आई.डी.
  • मार्कडाउन पात्रों से बचना
  • घोंसला करने की क्रिया

यह वास्तव में बहुत बढ़िया है!
आर्थर अरुजो

क्या हम npm स्थापित का उपयोग करके mmd.js स्थापित कर सकते हैं? वास्तव में मेरे प्रोजेक्ट में इसे आज़माना चाहेंगे।
सुधीर शाक्य

1
adamvleggett.github.io/drawdown इतना बड़ा नहीं है, लेकिन अधिक लचीलेपन के साथ मार्काडाउन का अधिक समर्थन करता है।
एडम लेगट

4

यह jQuery के साथ या उसके बिना तसलीम का उपयोग करना आसान है । यहाँ एक 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');
});


3

यह संपूर्ण अनुरोध को संबोधित नहीं करता है (यह संपादक नहीं है), लेकिन कपड़ा-जेएस एक जावास्क्रिप्ट प्रतिपादन पुस्तकालय है: https://github.com/borgar/textile-jsHttp://borgar.github.io/textile-js/ पर एक प्रदर्शन उपलब्ध है


मेरे लिए यह लाइब्रेरी सही ढंग से गिने सूचियों (# का उपयोग करके) की व्याख्या नहीं करती है।
डेविड

2

मुझे यह सवाल पेचीदा लगा, इसलिए मैंने कुछ शुरू करने का फैसला किया (केवल प्रतिकृति strongऔर italicमार्कडाउन टैग)। रेगेक्स का उपयोग कर एक समाधान तैयार करने में एक घंटा बिताने के बाद, मैंने हार मान ली और निम्नलिखित के साथ समाप्त हो गया, जो अच्छी तरह से काम करता है। उस ने कहा, यह निश्चित रूप से और अधिक अनुकूलित किया जा सकता है और मुझे यकीन नहीं है कि इस रूप में वास्तविक-विश्व लचीला कैसे होगा:

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;
}

टेस्ट कोड:

    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));

आउटपुट:

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

संपादित करें: वी 0.024 में नया - बिना चिह्नित मार्कडाउन टैग के स्वत: हटाने


1

markdown-js एक अच्छा जावास्क्रिप्ट मार्कडाउन पार्सर है, जो परीक्षण के साथ एक सक्रिय परियोजना है।


0

क्या आपने ग्रहण विकीटेक्स्ट लाइब्रेरी को देखा है जो माइलिन का हिस्सा है। यह कई विकि सिंटैक्स से xhtml और xdocs / DITA में परिवर्तित हो जाएगा। यह अच्छा लग रहा है।

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

क्या किसी को HTML-> कपड़ा समस्या का हल मिल गया है? हमारे सभी मौजूदा दस्तावेज़ एम $ वर्ड प्रारूप में हैं और हम इसे सहयोगी रखरखाव के लिए रेडमाइन विकी में लाना पसंद करेंगे। हमें ऐसा कोई टूल नहीं मिला है जिससे रूपांतरण हो सके। हमें ओपन ऑफिस एक्सटेंशन मिला है जो मीडियाविकि स्वरूपित टेक्स्ट का उत्पादन करता है लेकिन रेडमाइन विकी टेक्सटाइल के सबसेट का उपयोग करता है।

एक उपकरण का किसी को पता है कि धर्मान्तरित करने के लिए कपड़ा MediaWiki से, वर्ड, XDocs, या HTML?



0

कपड़ा के लिए:

मैंने हाल ही में टेक्सटाइल कन्वर्टर के लिए HTML को एक साथ पैच किया है: https://github.com/cmroanirgo/to-textile

HTML के लिए रिवर्स टेक्सटाइल के लिए, मैं https://github.com/borgar/textile-js का उपयोग करता हूं और सलाह देता हूं , जो अन्य उत्तर पहले ही बता चुके हैं।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.