মার্কডাউন / টেক্সটাইলকে এইচটিএমএলে রূপান্তর করতে জাভাস্ক্রিপ্ট (এবং, আদর্শভাবে, মার্কডাউন / টেক্সটাইলে ফিরে)


84

মার্কডাউন / টেক্সটাইলের জন্য বেশ কয়েকটি ভাল জাভাস্ক্রিপ্ট সম্পাদক রয়েছে (যেমন: http://attacklab.net/showdown/ , আমি এখন যেটি ব্যবহার করছি) তবে আমার যা দরকার তা হল জাভাস্ক্রিপ্ট ফাংশন যা মার্কডাউন / টেক্সটাইল থেকে একটি স্ট্রিং রূপান্তরিত করে is -> এইচটিএমএল এবং পিছনে।

এটি করার সর্বোত্তম উপায় কী? (আদর্শভাবে এটি jQuery- বান্ধব হবে - যেমন, $("#editor").markdown_to_html())

সম্পাদনা করুন: এটির আরেকটি উপায় হ'ল আমি জাভাস্ক্রিপ্টের প্রয়োগগুলি 'রেলস' textilize()এবং markdown()পাঠ্য সহায়কদের সন্ধান করছি

উত্তর:


98

মার্কডাউন -> এইচটিএমএল-এর জন্য শোডাউন রয়েছে

স্ট্যাকওভারফ্লো নিজেই প্রশ্নোত্তরের জন্য মার্কডাউন ভাষা ব্যবহার করে; আপনি কীভাবে এটি কাজ করে তা একবার দেখার চেষ্টা করেছিলেন?

ঠিক আছে, মনে হয় এটি পেজডাউন ব্যবহার করছে যা এমআইটি লাইসেন্সের অধীন উপলব্ধ

প্রশ্ন কোন ভাল মার্কডাউন জাভাস্ক্রিপ্ট লাইব্রেরি বা নিয়ন্ত্রণ আছে? এবং এর উত্তরগুলি খুব সাহায্য করতে পারে :-)


একজন পূর্ণ সম্পাদক অবশ্যই আপনি যা চেয়েছিলেন ঠিক তা নয়; তবে মার্কডাউন কোডটি এইচটিএমএলে রূপান্তর করতে তাদের অবশ্যই কিছু প্রকারের ফাংশন ব্যবহার করতে হবে; এবং, এই সম্পাদকগুলির লাইসেন্সের উপর নির্ভর করে আপনি সেই ফাংশনটি পুনরায় ব্যবহার করতে সক্ষম হতে পারেন ...

প্রকৃতপক্ষে, আপনি যদি শোডাউন এর কোড উত্সে (ফাইল শোডাউন.জেএস) ঘুরে দেখেন তবে আপনি এই মন্তব্যের এই অংশটি খুঁজে পাবেন:

//
// 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 বাক্য গঠন নয়, তবে আপনার অ্যাপ্লিকেশনটিতে একীভূত করা বেশ সহজ হওয়া উচিত ;-)


টেক্সটাইল সম্পর্কে, দরকারী কিছু খুঁজে পাওয়া কিছুটা কঠিন বলে মনে হচ্ছে :-(


অন্যদিকে, এইচটিএমএল -> মার্কডাউন, আমার ধারণা জিনিসগুলি কিছুটা শক্ত হতে পারে ...

আমি যা করব তা হ'ল মার্কডাউন এবং এইচটিএমএল উভয়ই আমার অ্যাপ্লিকেশন ডেটা স্টোর (ডাটাবেস?) এ সঞ্চয় করা, এবং একটি সম্পাদনার জন্য এবং অন্যটি রেন্ডারিংয়ের জন্য ব্যবহার করা ... আরও জায়গা লাগবে, তবে এটি "ডিক্রিপ্টিং" এইচটিএমএল থেকে কম ঝুঁকিপূর্ণ বলে মনে হচ্ছে। ..


4
লিঙ্কগুলি পরিবর্তন হয়েছে বলে মনে হচ্ছে। ডেমো এ softwaremaniacs.org/playground/showdown-highlight এবং সোর্স কোড পাওয়া যাবে softwaremaniacs.org/playground/showdown-highlight/showdown.js
জন জে Camilleri

4
@ জন আপনার মন্তব্যের জন্য ধন্যবাদ; আমি লিঙ্কটি পরিবর্তন করতে আমার উত্তর সম্পাদনা করেছি ;-)
পাস্কাল মার্টিন

দুর্ভাগ্যক্রমে এই লাইব্রেরিটি মার্কডাউন-ভিত্তিক লিঙ্কগুলির জন্য কাজ করে না বলে মনে হয়, ওরফে: কিছু পাঠ্য রূপান্তরিত হয় না। এটি মনে হচ্ছে এমন কিছু সিনট্যাক্স হারিয়েছে যা দুর্ভাগ্যজনক। এটি আর কি অনুপস্থিত?
ওডম্যান

26

আমি ভেবেছিলাম এখানে জাভাস্ক্রিপ্ট সমাধানগুলির তালিকা এবং তাদের ক্ষুদ্রায়িত (সঙ্কুচিত) আকার এবং শক্তি / দুর্বলতাগুলির জন্য এখানে একটি তালিকা তৈরি করা সার্থক হবে। মিনিফাইড কোডের জন্য সংকুচিত আকারটি কমপ্রেসড আকারের প্রায় 50% হয়ে থাকবে be এটি নেমে আসে কি:

  • আপনার যদি বিস্তৃত সহায়তার প্রয়োজন হয় এবং ব্যবহারকারী সম্পাদিত বা স্বেচ্ছাচারী দলিল থাকতে পারে তবে শোডাউন (28 কেবি) ব্যবহার করুন ।
  • পেজডাউন (8 কেবি) ব্যবহার করুন যদি আপনার ব্যবহারকারীর সম্পাদিত / স্বেচ্ছাসেবী দলিল থাকে তবে টেবিল, সংজ্ঞা তালিকা বা পাদটীকা (যেমন স্ট্যাকএক্সচেঞ্জের মতো কোনও সাইটে মন্তব্য) এর মতো জিনিসগুলির প্রয়োজন না হয়।
  • আমার নিজস্ব ব্যবহারের কমানোর প্রক্রিয়া (1.3KB) আপনি যুক্তিসঙ্গতভাবে উচ্চ মানের, এবং টেবিল সমর্থন প্রয়োজন, কিন্তু পালক ওজন চান এবং প্রতি একক প্রান্ত ক্ষেত্রে সুরাহা প্রয়োজন হবে না।
  • সুরক্ষা বা প্রসারযোগ্যতার মতো অনন্য দক্ষতার প্রয়োজন হলে অন্য একটির ব্যবহার করুন।

এগুলির সমস্ত এমআইটি লাইসেন্স ব্যবহার করে, বেশিরভাগ এনপিএম হয়।

  • শোডাউন : 28 কেবি। মূলত সোনার মান; এটি পেজ ডাউন করার ভিত্তি।

  • পেজডাউন : 8 কেবি। এটি স্ট্যাকএক্সচেঞ্জকেই শক্তি দেয়, সুতরাং আপনি নিজেরাই দেখতে পারবেন এটির বৈশিষ্ট্যগুলি কী সমর্থন করে (এটি খুব মজবুত তবে সারণী, সংজ্ঞা তালিকাগুলি, পাদটীকা ইত্যাদি) missing 8 কেবি রূপান্তরকারী স্ক্রিপ্ট ছাড়াও, এটি সম্পাদক এবং স্যানিটাইজার স্ক্রিপ্টগুলিও সরবরাহ করে, উভয় স্ট্যাকএক্সচেঞ্জ ব্যবহার করে।

  • ড্র-ডাউন : 1.3KB। সম্পূর্ণ প্রকাশ, আমি এটি লিখেছি। অন্য যে কোনও লাইটওয়েট কনভার্টারের চেয়ে বিস্তৃত বৈশিষ্ট্যের সুযোগ; পরিচালনা করে তবে কমনমার্কের সবগুলিই নয় not ব্যবহারকারী সম্পাদনার জন্য প্রস্তাবিত নয় তবে ওয়েব অ্যাপ্লিকেশনগুলিতে তথ্য উপস্থাপনের জন্য খুব দরকারী। কোনও ইনলাইন এইচটিএমএল নেই।

  • মার্কডাউন -এটি : 104 কেবি। কমনমার্কের অনুমান অনুসরণ করে; সিনট্যাক্স এক্সটেনশন সমর্থন করে; ডিফল্টরূপে নিরাপদ আউটপুট উত্পাদন করে। দ্রুত; প্রকৃতপক্ষে শোডাউনয়ের মতো শক্তিশালী হতে পারে তবে খুব বড়। Http://dillinger.io/ এর ভিত্তি ।

  • চিহ্নিত : 19 কেবি। বিস্তৃত; ইউনিট পরীক্ষা স্যুট বিরুদ্ধে পরীক্ষা; কাস্টম লেক্সার বিধি সমর্থন করে।

  • মাইক্রোমার্কডাউন : 5 কেবি। অনেকগুলি বৈশিষ্ট্য সমর্থন করে, তবে কিছু সাধারণ বিষয়গুলি যেমন আনর্ডারড তালিকাগুলি ব্যবহার করে *এবং কিছু সাধারণগুলি অনুপস্থিত যা বেড কোড ব্লকগুলির মতো নির্দিষ্টভাবে অংশটির অংশ নয়। অনেকগুলি বাগ, বেশিরভাগ দীর্ঘ দস্তাবেজগুলিতে ব্যতিক্রম ছোঁড়ে। আমি এটি পরীক্ষামূলক বিবেচনা করি।

  • ন্যানো- মার্কডাউন: 1.9 কেবি। বৈশিষ্ট্যের সুযোগটি বেশিরভাগ নথি দ্বারা ব্যবহৃত জিনিসগুলির মধ্যে সীমাবদ্ধ; মাইক্রোমার্কডাউন চেয়ে বেশি শক্তিশালী তবে নিখুঁত নয়; তার নিজস্ব খুব বেসিক ইউনিট পরীক্ষা ব্যবহার করে। যুক্তিসঙ্গতভাবে দৃust় তবে অনেক প্রান্তের ক্ষেত্রে ব্রেক।

  • mmd.js : 800 বাইট ক্ষুদ্রতম পার্সার তৈরি করার চেষ্টার ফলাফল যা এখনও কার্যকর still একটি ছোট উপসেট সমর্থন করে; এর জন্য দস্তাবেজটি তৈরি করা দরকার।

  • মার্কডাউন - জেএস: 54 কেবি (ডাউনলোডের জন্য উপলব্ধ নয় মিনাইফড; সম্ভবত min 20KB থেকে ন্যূনতম হবে)। দেখতে বেশ বিস্তৃত দেখায় এবং এতে পরীক্ষাগুলি অন্তর্ভুক্ত থাকে তবে আমি এর সাথে খুব বেশি পরিচিত নই।

  • মেল্টডাউন : 41 কেবি (ডাউনলোডের জন্য উপলব্ধ নয় মিনিফাইড; সম্ভবত min 15KB এ নামিয়ে দেওয়া হবে)। jQuery প্লাগইন; মার্কডাউন অতিরিক্ত (সারণী, সংজ্ঞা তালিকা, পাদটীকা)।

  • unified.js : পরিবর্তিত হয়, 5-100 কেবি। এইচটিএমএল, মার্কডাউন এবং গদ্যের মধ্যে রূপান্তর করার জন্য একটি প্লাগইন ভিত্তিক সিস্টেম। আপনার প্রয়োজনীয় প্লাগইনগুলির উপর নির্ভর করে (বানান-পরীক্ষা, সিনট্যাক্স-হাইলাইটিং, ইনপুট স্যানিটাইজাইজিং) ফাইলের আকার পৃথক হবে। সম্ভবত ক্লায়েন্ট-সাইডের চেয়ে বেশি সার্ভার-সাইড ব্যবহৃত হয়েছে।


এই জন্য ধন্যবাদ, সত্যিই দরকারী! মার্কডাউন ফাইলগুলিকে আমার স্ট্যাটিক এইচটিএমএল পৃষ্ঠাগুলিতে পড়তে এবং তাদের এইচটিএমএল রূপান্তর করতে আমি কেবল শ্যাডাউন ব্যবহার করেছি এবং fetch( জ্যাক আর্কিবাল্ডের "এটি তাই ফ্যাচ" এর একটি সামান্য স্ক্যান সহ ) ব্যবহার করেছি। মিষ্টি :-)
ডেভ এভারিট

@ ডেভিভারিট দুর্দান্ত - আপনি যদি একটি স্থির ব্রাউজারটিকে লক্ষ্য না করে থাকেন তবে আনুন পলিফিল অন্তর্ভুক্ত করতে ভুলবেন না। এটি আপনার উদ্দেশ্যটির জন্য কাজ করবে এবং এটি ক্ষুদ্র: github.com/developit/unfetch
অ্যাডাম লেগেট

সম্মত হয়েছে, এবং লিঙ্কটির জন্য ধন্যবাদ, যদিও আমি মনে করি এখন কেবল কয়েকটি ব্রাউজারের এটির
ডেভ এভারিট

উপর <টেবিল> বৈশিষ্ট্য যোগ করার জন্য আপনাকে পরিকল্পনা আছে কমানোর প্রক্রিয়া ? আমি নিজে এটিকে যুক্ত করার চেষ্টা করেছি তবে এটি আমার বোধগম্যতার চেয়ে বেশি। ;
জ্যাক 22

@ অ্যাডাম লেগেট ধন্যবাদ!
জ্যাক 17

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

আমি ক্ষুদ্রতর সংক্ষিপ্ত লিপিটি ব্যবহার করছি - মিমিডি.জেএস , যা কেবল মার্কডাউন সম্ভাবনার একটি উপসেট সমর্থন করে, তবে এটি যে কোনও উপায়েই প্রয়োজন হতে পারে, সুতরাং 1 কেবি এর চেয়ে কম এই স্ক্রিপ্টটি আশ্চর্যজনক এবং ওভারকিল হবে না।

সমর্থিত বৈশিষ্ট্য

  • শিরোনাম #
  • ব্লককোটিস >
  • আদেশ তালিকা 1
  • অর্ডারযুক্ত তালিকা *
  • অনুচ্ছেদ
  • লিঙ্কগুলি []()
  • ছবি ![]()
  • ইনলাইন জোর *
  • ইনলাইন জোর **

অসমর্থিত বৈশিষ্ট্য

  • তথ্যসূত্র এবং আইডি
  • মার্কডাউন অক্ষরগুলি থেকে বেরিয়ে আসা
  • বাসা বাঁধছে

এটা সত্যিই দুর্দান্ত!
আর্থার আরায়েজো

আমরা কি এনএমপি ইনস্টল ব্যবহার করে মিমিডি.জেএস ইনস্টল করতে পারি? আমার প্রকল্পে এটি চেষ্টা করে দেখতে চাই।
সুধীর শাক্য


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

4

শোডাউন অ্যাটাকল্যাব-লিঙ্কটি নিচে রয়েছে তাই আপনার রূপান্তর প্রয়োজনের জন্য https://github.com/coreyti/ শো ডাউন ব্যবহার করুন :)


3

এটি পুরো অনুরোধটির সমাধান করে না (এটি কোনও সম্পাদক নয়), তবে টেক্সটাইল-জেএস একটি জাভাস্ক্রিপ্ট রেন্ডারিং লাইব্রেরি: https://github.com/borgar/textile-jsHttp://borgar.github.io/textile-js/ এ একটি বিক্ষোভ পাওয়া যায়


আমার জন্য এই গ্রন্থাগারটি সংখ্যাযুক্ত তালিকা (# ব্যবহার করে) সঠিকভাবে ব্যাখ্যা করে না।
ডেভিড

2

আমি এই প্রশ্নটি আকর্ষণীয় পেয়েছি, তাই আমি কিছু বন্ধ করার সিদ্ধান্ত নিয়েছি (কেবলমাত্র প্রতিস্থাপন strongএবং italicমার্কডাউন ট্যাগগুলি)। রেজিক্সগুলি ব্যবহার করে সমাধানের চেষ্টা করতে এক ঘন্টা ব্যয় করে আমি হাল ছেড়ে দিয়ে নিম্নলিখিতটি দিয়ে শেষ করেছি, যা মনে হয় সুন্দরভাবে কাজ করে। এটি বলেছিল, এটি অবশ্যই আরও অনুকূলিত করা যেতে পারে এবং বাস্তব রূপের দৃili়তাটি এই রূপে ঠিক কী হবে তা সম্পর্কে আমি নিশ্চিত নই:

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.04 এ নতুন - নিরীক্ষিত মার্কডাউন ট্যাগগুলি স্বয়ংক্রিয়ভাবে অপসারণ


1

মার্কডাউন-জেএস একটি দুর্দান্ত জাভাস্ক্রিপ্ট মার্কডাউন পার্সার, পরীক্ষাগুলি সহ একটি সক্রিয় প্রকল্প।


0

আপনি কি ম্যালিনের অংশবিশেষগ্রন্থ উইকিটেক্সট লাইব্রেরিতে দেখেছেন? এটি অনেক উইকি সিনট্যাক্স থেকে এক্সএইচটিএমএল এবং এক্সডোক্স / ডিআইটিএতে রূপান্তরিত করবে। দেখতে সুন্দর লাগছে।

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

এইচটিএমএল-> টেক্সটাইল সমস্যার সমাধান কি কেউ পেয়েছে? আমাদের বর্তমান সমস্ত ডকুমেন্টেশন এম-ওয়ার্ড ফর্ম্যাটে রয়েছে এবং আমরা সহযোগী রক্ষণাবেক্ষণের জন্য এটি রেডমিন উইকিতে আনতে পছন্দ করব। রূপান্তর করতে পারে এমন কোনও সরঞ্জাম আমরা পাইনি। আমরা ওপেন অফিস এক্সটেনশনটি পেয়েছি যা মিডিয়াউইকি ফর্ম্যাট করা পাঠ্য উত্পাদন করে তবে রেডমিন উইকি টেক্সটাইলের একটি উপসেট ব্যবহার করে।

মিডিয়াউইকি, ওয়ার্ড, এক্সডোকস বা এইচটিএমএল থেকে টেক্সটাইলকে রূপান্তর করে এমন একটি সরঞ্জাম সম্পর্কে যে কেউ জানেন ?



0

টেক্সটাইল জন্য:

আমি সম্প্রতি টেক্সটাইল রূপান্তরকারীটির জন্য এইচটিএমএল একত্রিত করেছি: https://github.com/cmroanirgo/to-textile

এইচটিএমএলে বিপরীত টেক্সটাইলের জন্য, আমি https://github.com/borgar/textile-js ব্যবহার এবং সুপারিশ করি , যা অন্যান্য উত্তর ইতিমধ্যে উল্লেখ করেছে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.