Câu hỏi Javascript để chuyển đổi Markdown / Dệt thành HTML (và, lý tưởng, trở lại Markdown / Dệt may)


Có một số Javascript tốt biên tập viên cho Markdown / Textile (ví dụ: http://attacklab.net/showdown/, cái tôi đang sử dụng ngay bây giờ), nhưng tất cả những gì tôi cần là một hàm Javascript chuyển đổi một chuỗi từ Markdown / Textile -> HTML và ngược lại.

Cách tốt nhất để làm điều này là gì? (Lý tưởng nhất là jQuery thân thiện - ví dụ: $("#editor").markdown_to_html())

Chỉnh sửa: Một cách khác để đặt nó là tôi đang tìm kiếm một triển khai Javascript của Rails ' textilize() và markdown() người trợ giúp văn bản


76
2017-08-23 21:46


gốc




Các câu trả lời:


Đối với Markdown -> HTML, có Showdown

Chính StackOverflow sử dụng ngôn ngữ Markdown cho các câu hỏi và câu trả lời; bạn đã cố gắng xem nó hoạt động như thế nào?

Vâng, có vẻ như nó đang sử dụng Trang dươi có sẵn theo Giấy phép MIT

Câu hỏi Có thư viện hoặc kiểm soát Javascript Markdown tốt nào không? và câu trả lời của nó cũng có thể hữu ích :-)


Dĩ nhiên, một trình soạn thảo đầy đủ, không chính xác những gì bạn yêu cầu; nhưng họ phải sử dụng một số loại hàm để chuyển đổi mã Markdown thành HTML; và, tùy thuộc vào giấy phép của những người chỉnh sửa này, bạn có thể sử dụng lại chức năng đó ...

Trên thực tế, nếu bạn xem kỹ Showdown, trong mã nguồn của nó (tệp showdown.js), bạn sẽ tìm thấy phần nhận xét này:

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

Nó không phải là cú pháp jQuery, nhưng nên khá dễ dàng để tích hợp trong ứng dụng của bạn ;-)


Về Dệt may, nó có vẻ là một chút khó khăn hơn để tìm thấy bất cứ điều gì hữu ích :-(


Ở phía bên kia, HTML -> Markdown, tôi đoán mọi thứ có thể khó hơn một chút ...

Những gì tôi sẽ làm là lưu trữ cả Markdown và HTML trong kho dữ liệu ứng dụng của tôi (cơ sở dữ liệu?), Và sử dụng một để chỉnh sửa, và khác để hiển thị ... Sẽ mất nhiều không gian hơn, nhưng nó có vẻ ít rủi ro hơn "giải mã" HTML. ..


95
2017-08-23 22:16



Các liên kết dường như đã thay đổi. Bản trình diễn diễn ra lúc softwaremaniacs.org/playground/showdown-highlight và mã nguồn có thể được tìm thấy tại softwaremaniacs.org/playground/showdown-highlight/showdown.js - John J. Camilleri
@ John cảm ơn cho bình luận của bạn; Tôi đã chỉnh sửa câu trả lời của mình để thay đổi liên kết ;-) - Pascal MARTIN
Rất tiếc, thư viện này dường như không hoạt động đối với các liên kết dựa trên markdown, aka: một số tiếp theo không được chuyển đổi. Đó là thiếu một số cú pháp có vẻ như, đó là không may. Còn thiếu gì nữa? - Oddman
Đây là liên kết Github cho Showdown - github.com/coreyti/showdown - manish_s


Dệt may

Bạn có thể tìm thấy một cách thực hiện Javascript dường như rất tốt đâyvà một số khác ở đó (có thể không tốt như vậy, nhưng có một trang ví dụ chuyển đổi-như-bạn-loại tốt đẹp).

Chú thích: có lỗi trong lần triển khai đầu tiên tôi tạo liên kết tới: thanh ngang không được hiển thị chính xác. Để khắc phục, bạn có thể thêm mã sau vào tệp.

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





Tôi đang sử dụng kịch bản tối giản nhỏ xíu - mmd.js, mà chỉ hỗ trợ một tập hợp con của khả năng Markdown, nhưng điều này có thể là tất cả những gì sẽ cần anyway, do đó, kịch bản này là ít hơn 1kb là tuyệt vời và sẽ không phải là một overkill.

Các tính năng được hỗ trợ

  • Tiêu đề # 
  • Blockquotes >
  • Danh sách đặt hàng 1
  • Danh sách không có thứ tự *
  • Đoạn
  • Liên kết []()
  • Hình ảnh ![]()
  • Inline nhấn mạnh *
  • Inline nhấn mạnh **

Các tính năng không được hỗ trợ

  • Tài liệu tham khảo và ID
  • Thoát khỏi các ký tự Markdown
  • Làm tổ

6
2018-06-05 14:13



Nó thực sự tuyệt vời! - Arthur Araújo
Chúng tôi có thể cài đặt mmd.js bằng cách sử dụng cài đặt npm không? Thực sự muốn thử nó trong dự án của tôi. - sudhir shakya


Tôi nghĩ rằng nó sẽ là đáng giá để làm cho một danh sách ở đây của các giải pháp JavaScript ra khỏi đó và kích thước minified (uncompressed) của họ và điểm mạnh / điểm yếu. Kích thước nén cho mã được rút gọn sẽ chiếm khoảng 50% kích thước không nén. Những gì nó đi xuống là tôi khuyên bạn nên trang dươi (8KB) ​​nếu bạn cần hỗ trợ toàn diện vì người dùng sẽ chỉnh sửa tài liệu trên trang web của bạn và tôi khuyên bạn nên sử dụng tài liệu của riêng mình kéo xuống (1.3KB) nếu bạn đang trình bày thông tin trong một ứng dụng web không phải là người dùng đã chỉnh sửa; làm điều đúng cho phần lớn các trường hợp trong khi cực kỳ nhỏ. Tôi tin rằng hầu như tất cả đều là giấy phép MIT.

npm cũng có nhiều kịch bản lệnh cho mục đích này, ở các trạng thái khác nhau về chất lượng.

  • cuộc thách đấu: 28KB. Về cơ bản là tiêu chuẩn vàng; nó là cơ sở cho pagedown.

  • trang dươi: 8KB. Đây là những gì quyền hạn StackExchange, vì vậy bạn có thể xem cho chính mình mà các tính năng hỗ trợ. Nó khá toàn diện và cực kỳ mạnh mẽ. Ngoài kịch bản chuyển đổi 8KB, nó cũng cung cấp các trình soạn thảo và các tập lệnh khử trùng, cả hai trong đó StackExchange cũng sử dụng.

  • markdown-it: 104KB. Theo thông số CommonMark; hỗ trợ phần mở rộng cú pháp. Nhanh; thực sự có thể mạnh mẽ như cuộc thách, nhưng rất lớn. Là cơ sở cho http://dillinger.io/.

  • được đánh dấu: 19KB. Toàn diện; thử nghiệm đối với bộ thử nghiệm đơn vị; hỗ trợ các quy tắc lexer tùy chỉnh.

  • micromarkdown: 5KB. Hỗ trợ rất nhiều tính năng, nhưng thiếu một số tính năng phổ biến như danh sách không theo thứ tự sử dụng * và một số thông thường không phải là một phần của thông số kỹ thuật như các khối mã có rào chắn. Nhiều lỗi, ném ngoại lệ trên hầu hết các tài liệu dài hơn. Tôi coi nó là thử nghiệm.

  • đánh dấu nano: 1,9KB. Phạm vi tính năng giới hạn đối với những thứ được hầu hết các tài liệu sử dụng; mạnh mẽ hơn micromarkdown nhưng không hoàn hảo; sử dụng thử nghiệm đơn vị rất cơ bản của riêng nó. Hợp lý mạnh mẽ nhưng phá vỡ trên nhiều trường hợp cạnh.

  • kéo xuống: 1,3KB. Tiết lộ đầy đủ, tôi đã viết nó. Phạm vi tính năng rộng hơn và mạnh mẽ hơn so với đánh dấu nano trong khi nhỏ hơn; xử lý hầu hết nhưng không phải tất cả thông số CommonMark. Xử lý một vài trường hợp cạnh không chính xác; không được đề xuất cho tài liệu đã chỉnh sửa của người dùng nhưng rất hữu ích khi trình bày thông tin trong các ứng dụng web. Không có HTML nội dòng.

  • mmd.js: 800 byte. Kết quả của một nỗ lực để làm cho trình phân tích cú pháp nhỏ nhất có thể vẫn còn hoạt động. Hỗ trợ một tập con nhỏ; tài liệu cần phải được điều chỉnh cho nó.

  • markdown-js: 54KB (không có sẵn để tải xuống được rút gọn; có thể sẽ giảm xuống ~ 20KB). Trông khá toàn diện và bao gồm các bài kiểm tra, nhưng tôi không quen lắm với nó.

  • cuộc khủng hoảng: 41KB (không có sẵn để tải xuống được rút gọn; có thể sẽ giảm xuống ~ 15KB). Plugin jQuery; Markdown Extra (bảng, danh sách định nghĩa, chú thích).


5
2017-10-16 02:40





Thật dễ dàng để sử dụng Showdown có hoặc không có jQuery. Dưới đây là ví dụ về 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





Showdown Attacklab-Link đã ngừng hoạt động để sử dụng https://github.com/coreyti/showdown cho nhu cầu chuyển đổi của bạn :)


4
2018-04-24 09:19



github.com/fivesixty/mdext dường như được duy trì nhiều hơn. - Kragen Javier Sitaker


Điều này không giải quyết toàn bộ yêu cầu (nó không phải là một trình soạn thảo), nhưng dệt-js là một thư viện dựng hình javascript: https://github.com/borgar/textile-js. Một cuộc biểu tình có sẵn tại http://borgar.github.io/textile-js/


3
2018-01-31 19:34



Đối với tôi thư viện này không giải thích đúng danh sách được đánh số (sử dụng #). - david


Tôi thấy câu hỏi này hấp dẫn, vì vậy tôi quyết định bắt đầu một cái gì đó (chỉ thay thế strong và italic thẻ đánh dấu). Đã dành một giờ cố gắng để đưa ra một giải pháp bằng cách sử dụng regexes, tôi đã từ bỏ và kết thúc với những điều sau đây, mà dường như làm việc độc đáo. Điều đó nói rằng, nó chắc chắn có thể được tối ưu hóa hơn nữa và tôi không chắc chắn như thế nào trong thế giới thực đàn hồi nó sẽ ở dạng này:

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

Mã kiểm tra:

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

Đầu ra:

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: Mới trong V 0.024 - Tự động loại bỏ các thẻ markdown không khép kín


1
2017-08-23 23:29