Javascript để chuyển đổi Markdown / Dệt may sang HTML (và lý tưởng nhất là quay lại Markdown / Dệt may)

84

Có một số trình chỉnh sửa Javascript tốt cho Markdown / Textile (ví dụ: http://attacklab.net/showdown/ , trình chỉnh sửa mà 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à quay lại.

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

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

javascript  jquery  markdown  textile 
— Tom Lehman
nguồn

Câu trả lời:

98

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

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

Chà, có vẻ như nó đang sử dụng PageDown có sẵn theo Giấy phép MIT

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


Tất nhiên, một trình biên tập đầy đủ không chính xác như những gì bạn yêu cầu; nhưng họ phải sử dụng một số loại chức năng để chuyển mã Markdown sang HTML; và, tùy thuộc vào giấy phép của các trình 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 sẽ khá dễ dàng để tích hợp vào ứng dụng của bạn ;-)


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


Ở khía cạnh khác, 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, còn một để hiển thị ... Sẽ tốn nhiều dung lượng hơn, nhưng nó có vẻ ít rủi ro hơn so với "giải mã" HTML. ..

— Pascal MARTIN
nguồn
5
Các liên kết dường như đã thay đổi. Demo có tại 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
1
@John cảm ơn 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 đánh dấu, hay còn gọi là: một số văn bản không được chuyển đổi. Có vẻ như nó thiếu một số cú pháp, điều này thật đáng tiếc. Nó còn thiếu gì nữa?
— Oddman
25

Tôi nghĩ sẽ rất đáng giá khi lập danh sách các giải pháp JavaScript ở đây và kích thước được rút gọn (không nén) và điểm mạnh / điểm yếu của chúng. Kích thước được nén cho mã được rút gọn sẽ bằng khoảng 50% kích thước không được nén. Nó nói gì đến:

  • Sử dụng showdown (28KB) nếu bạn cần hỗ trợ toàn diện và sẽ có tài liệu do người dùng chỉnh sửa hoặc tùy ý.
  • Sử dụng pagedown (8KB) ​​nếu bạn có tài liệu do người dùng chỉnh sửa / tùy ý nhưng không cần những thứ như bảng, danh sách định nghĩa hoặc chú thích cuối trang (ví dụ: nhận xét trên một trang web như StackExchange).
  • Sử dụng riêng tôi hạ thấp (1.3KB) nếu bạn cần chất lượng tương đối cao, và hỗ trợ bảng, nhưng muốn trọng lượng lông và không cần mọi trường hợp cạnh duy nhất giải quyết.
  • Sử dụng một trong những cái khác nếu bạn cần các khả năng độc đáo như bảo mật hoặc khả năng mở rộng.

Tất cả những thứ này đều sử dụng giấy phép MIT, hầu hết là trên npm.

  • hiển thị : 28KB. Về cơ bản là bản vị vàng; nó là cơ sở để phân trang.

  • trang xuống : 8KB. Đây là công cụ hỗ trợ StackExchange, vì vậy bạn có thể tự mình xem nó hỗ trợ những tính năng nào (nó rất mạnh mẽ nhưng thiếu các bảng, danh sách định nghĩa, chú thích, v.v.). Ngoài tập lệnh chuyển đổi 8KB, nó cũng cung cấp các tập lệnh trình soạn thảo và trình làm sạch, cả hai đều được StackExchange sử dụng.

  • rút xuống : 1.3KB. Tiết lộ đầy đủ, tôi đã viết nó. Phạm vi tính năng rộng hơn bất kỳ công cụ chuyển đổi nhẹ nào khác; xử lý hầu hết nhưng không phải tất cả thông số CommonMark. Không được khuyến khích để người dùng chỉnh sửa nhưng rất hữu ích để trình bày thông tin trong ứng dụng web. Không có HTML nội tuyến.

  • markdown-it : 104KB. Tuân theo thông số CommonMark; hỗ trợ phần mở rộng cú pháp; tạo ra đầu ra an toàn theo mặc định. Nhanh; có thể thực sự mạnh mẽ như showdown, nhưng rất lớn. Là cơ sở cho http://dillinger.io/ .

  • đánh dấu : 19KB. Toàn diện; thử nghiệm 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ư sử dụng danh sách không có thứ tự *và một số tính năng phổ biến không hoàn toàn là một phần của thông số kỹ thuật như các khối mã có hàng rào. 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 đó là thử nghiệm.

  • đánh dấu nano : 1,9KB. Phạm vi tính năng giới hạn ở 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 bài kiểm tra đơn vị rất cơ bản của riêng nó. Mạnh mẽ hợp lý nhưng phá vỡ nhiều trường hợp cạnh.

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

  • markdown-js : 54KB (không có sẵn để giảm thiểu tải xuống; 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 rành về nó.

  • tan chảy : 41KB (không có sẵn để giảm thiểu tải xuống; có thể sẽ giảm xuống còn ~ 15KB). jQuery plugin; Markdown Extra (bảng, danh sách định nghĩa, chú thích cuối trang).

  • thống nhất.js : thay đổi, 5-100KB. Một hệ thống dựa trên plugin để chuyển đổi giữa html, markdown và văn xuôi. Tùy thuộc vào những plugin bạn cần (kiểm tra chính tả, tô sáng cú pháp, làm sạch đầu vào), kích thước tệp sẽ khác nhau. Có lẽ được sử dụng phía máy chủ nhiều hơn phía máy khách.

— Adam Leggett
nguồn
Cảm ơn vì điều này, thực sự hữu ích! Tôi vừa sử dụng showdown và fetch(với một chút quét "That’s So Fetch" của Jake Archibald ) để đọc các tệp Markdown trong các trang HTML tĩnh của tôi và chuyển đổi chúng sang HTML. Ngọt ngào :-)
— Dave Everitt
@DaveEveritt tuyệt vời - đừng quên bao gồm polyfill tìm nạp trừ khi bạn đang nhắm mục tiêu một trình duyệt cố định. Điều này sẽ làm việc cho mục đích của bạn và nhỏ: github.com/developit/unfetch
— Adam Leggett
Đã đồng ý và cảm ơn vì liên kết này, mặc dù tôi nghĩ bây giờ chỉ có một số trình duyệt cần điều này - Samsung đang hỗ trợ trong bản phát hành mới và tôi không còn nhắm đến IE nữa, mặc dù tôi biết nhiều nhà phát triển cần… caniuse.com/#feat = fetch
— Dave Everitt
Bạn có kế hoạch thêm các tính năng của <table> vào drawdown không? Tôi đã thử tự thêm nó nhưng nó vượt quá tầm hiểu biết của tôi. ; (
— Victor Lee
1
@VictorLee xong!
— Adam Leggett
13

Dệt may

Bạn có thể tìm thấy một bản triển khai Javascript có vẻ rất tốt của Dệt may ở đây và một bản triển khai khác ở đó (có thể không tốt lắm, nhưng có một trang ví dụ chuyển đổi theo kiểu bạn nhập rất đẹp).

Lưu ý: có một lỗi trong lần triển khai đầu tiên mà tôi tạo liên kết tới: các thanh ngang không được hiển thị chính xác. Để khắc phục, bạn có thể thêm đoạn 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;}
    //...
— glmxndr
nguồn
9

Tôi đang sử dụng tập lệnh tối giản nhỏ bé - mmd.js , chỉ hỗ trợ một tập hợp con các khả năng Markdown, nhưng dù sao thì đây cũng có thể là tất cả những gì người ta cần, vì vậy tập lệnh nhỏ hơn 1kb này thật tuyệt vời và sẽ không quá mức cần thiết.

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

  • Tiêu đề #
  • Những câu chuyện cổ tích >
  • Danh sách có thứ tự 1
  • Danh sách không có thứ tự *
  • Đoạn văn
  • Liên kết []()
  • Hình ảnh ![]()
  • Nhấn mạnh nội tuyến *
  • Nhấn mạnh nội tuyến **

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

  • Tham chiếu và ID
  • Thoát khỏi các ký tự Markdown
  • Làm tổ
— vsync
nguồn
Nó thực sự tuyệt vời!
— Arthur Araújo
Chúng ta có thể cài đặt mmd.js bằng cách sử dụng npm install không? Thực sự muốn thử nó trong dự án của tôi.
— sudhir shakya
1
adamvleggett.github.io/drawdown không lớn hơn nhiều nhưng hỗ trợ nhiều cách Markdown hơn với tính linh hoạt hơn.
— Adam Leggett
4

Thật dễ dàng để sử dụng Showdown có hoặc không có jQuery . Đây là một 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');
});
— Mathias Bynens
nguồn
2

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ế strongvà italicthẻ đánh dấu). Sau một giờ cố gắng tìm 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, có vẻ như hoạt động tốt. Đ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 nó sẽ linh hoạt như thế nào trong thế giới thực ở 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

CHỈNH SỬA: Mới trong V 0.024 - Tự động xóa các thẻ đánh dấu không được đóng

— karim79
nguồn
1

markdown-js là một trình phân tích cú pháp đánh dấu javascript đẹp, một dự án đang hoạt động với các thử nghiệm.

— foz
nguồn
0

Bạn đã xem thư viện Eclipse WikiText là một phần của Mylyn chưa. Nó sẽ chuyển đổi từ nhiều cú pháp wiki sang xhtml và xdocs / DITA. Nó trông rất tuyệt.

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

Có ai tìm ra giải pháp cho vấn đề dệt may HTML-> không? Tất cả tài liệu hiện tại của chúng tôi đều ở định dạng M $ Word và chúng tôi muốn đưa nó vào Redmine Wiki để hợp tác bảo trì. Chúng tôi không tìm thấy bất kỳ công cụ nào sẽ thực hiện chuyển đổi. Chúng tôi đã tìm thấy tiện ích mở rộng Open Office tạo ra văn bản có định dạng mediawiki nhưng Redmine Wiki sử dụng một tập hợp con của dệt may.

Có ai biết về một công cụ chuyển đổi THÀNH dệt từ mediawiki, Word, XDocs hoặc HTML không?

— Stephen Gissendaner
nguồn
— pihentagy,
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.