Markdown / Textile을 HTML로 변환하는 Javascript (이상적으로는 Markdown / Textile로 다시 변환)

Markdown / Textile을 HTML로 변환하는 Javascript (이상적으로는 Markdown / Textile로 다시 변환)

---

Markdown / Textile에 대한 몇 가지 좋은 자바 스크립트 편집기 (예 : http://attacklab.net/showdown/ , 지금 사용하고있는 것)가 있지만 필요한 것은 Markdown / Textile에서 문자열을 변환하는 자바 스크립트 함수뿐입니다. -> HTML 및 뒷면.

이를 수행하는 가장 좋은 방법은 무엇입니까? (이상적으로는 jQuery를 쉬운 것 - 예 $("#editor").markdown_to_html())

편집 : 그것을 넣는 또 다른 방법은 Rails의 Javascript 구현 textilize()및 markdown()텍스트 도우미를 찾고 있다는 것입니다.

---

Markdown-> HTML의 경우 Showdown이 있습니다.

StackOverflow 자체는 질문과 답변에 Markdown 언어를 사용합니다. 어떻게 작동하는지 살펴 보셨나요?

글쎄, 그것은 MIT 라이센스에 따라 사용 가능한 PageDown 을 사용하는 것 같습니다.

문제는 어떤 좋은 마크 다운 자바 스크립트 라이브러리 또는 컨트롤이 있습니까? 그리고 그 대답도 도움이 될 것입니다 :-)

물론 완전한 편집자는 당신이 요구 한 것과는 다릅니다. 그러나 마크 다운 코드를 HTML로 변환하려면 어떤 종류의 기능을 사용해야합니다. 이 편집기의 라이센스에 따라 해당 기능을 다시 사용할 수 있습니다.

실제로 Showdown을 자세히 살펴보면 코드 소스 (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-> Markdown은 좀 더 어려울 것 같습니다.

내가 할 일은 내 응용 프로그램 데이터 저장소 (데이터베이스?)에 Markdown과 HTML을 모두 저장하고 하나는 편집에 사용하고 다른 하나는 렌더링에 사용하는 것입니다. 더 많은 공간을 차지하지만 HTML을 "복호화"하는 것보다 덜 위험 해 보입니다. ..

---

직물

겉보기에 매우 훌륭한 텍스타일의 자바 스크립트 구현을 여기 에서 찾을 수 있고 다른 하나는 거기에서 찾을 수 있습니다 (아마도 좋지는 않지만 입력 한대로 변환하는 예제 페이지가 있습니다).

참고 : 링크를 만든 첫 번째 구현에 버그가 있습니다. 가로 막대가 올바르게 렌더링되지 않습니다. 이를 수정하기 위해 파일에 다음 코드를 추가 할 수 있습니다.

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

---

여기에 JavaScript 솔루션과 축소 된 (비 압축) 크기 및 강점 / 약점 목록을 작성하는 것이 가치가 있다고 생각했습니다. 축소 된 코드의 압축 크기는 압축되지 않은 크기의 약 50 %입니다. 그것은 무엇에 내려 오는 것은 내가 추천 할 것입니다 PageDown 키 사용자가 사이트에 문서를 편집 할 수 있기 때문에 당신이 포괄적 인 지원을 필요로하는 경우 (8킬로바이트)를, 나는 내 자신의 추천 삭감 당신이 웹 응용 프로그램에 정보를 제공하는 경우 즉 (1.3KB)를 사용자가 편집하지 않았습니다. 극히 작 으면서 대부분의 경우에 옳은 일을합니다. 나는 거의 모든 것이 MIT 라이센스라고 믿습니다.

npm은 또한 다양한 품질 상태에서 이러한 목적을위한 다양한 스크립트를 제공합니다.

• 대결 : 28KB. 기본적으로 골드 스탠다드; 페이지 다운의 기초입니다.

• 페이지 다운 : 8KB. 이것이 StackExchange의 힘이므로 어떤 기능을 지원하는지 직접 확인할 수 있습니다. 매우 포괄적이고 매우 강력합니다. 8KB 변환기 스크립트 외에도 StackExchange도 사용하는 편집기 및 새니 타이 저 스크립트도 제공합니다.

• markdown-it : 104KB. CommonMark 사양을 따릅니다. 구문 확장을 지원합니다. 빠른; 실제로 대결만큼 강력하지만 매우 큽니다. http://dillinger.io/ 의 기초입니다 .

• 표시 : 19KB. 포괄적; 단위 테스트 스위트에 대해 테스트되었습니다. 사용자 지정 렉서 규칙을 지원합니다.

• 마이크로 마크 다운 : 5KB. 많은 기능을 지원하지만 정렬되지 않은 목록을 사용하는 것과 같은 일반적인 기능 *과 펜싱 코드 블록과 같은 사양의 일부가 아닌 일반적인 기능이 누락되었습니다 . 대부분의 긴 문서에서 많은 버그가 예외를 발생시킵니다. 실험적이라고 생각합니다.

• 나노 마크 다운 : 1.9KB. 기능 범위는 대부분의 문서에서 사용되는 것으로 제한됩니다. 마이크로 마크 다운보다 더 강력하지만 완벽하지는 않습니다. 매우 기본적인 단위 테스트를 사용합니다. 합리적으로 견고하지만 많은 경우에서 중단됩니다.

• 드로 다운 : 1.3KB. 나는 그것을 썼다. 기능 범위가 더 넓고 나노 마크 다운보다 더 강력하지만 작습니다. CommonMark 사양의 전부는 아니지만 대부분을 처리합니다. 몇 가지 엣지 케이스를 잘못 처리합니다. 사용자 편집 문서에는 권장되지 않지만 웹 앱에서 정보를 표시하는 데 매우 유용합니다. 인라인 HTML이 없습니다.

• mmd.js : 800 바이트. 여전히 작동하는 가능한 가장 작은 파서를 만들기위한 노력의 결과입니다. 작은 하위 집합을 지원합니다. 문서는 이에 맞게 조정되어야합니다.

• markdown-js : 54KB (최소화 된 다운로드에 사용할 수 없음, ~ 20KB로 축소 될 수 있음). 꽤 포괄적이고 테스트가 포함되어 있지만 익숙하지 않습니다.

• 멜트 다운 : 41KB (다운로드에 사용할 수 없음, 축소됨, ~ 15KB로 축소됨). jQuery 플러그인; Markdown Extra (표, 정의 목록, 각주).

---

저는 Markdown 가능성의 하위 집합 만 지원하는 작은 최소한의 스크립트 인 mmd.js를 사용하고 있지만 어쨌든 이것이 필요한 전부일 수 있으므로 1kb 미만인이 스크립트는 놀랍고 과도하지 않을 것입니다.

지원되는 기능

• 헤더 #
• 인용구 >
• 정렬 된 목록 1
• 정렬되지 않은 목록 *
• 단락
• 연결 []()
• 이미지 ![]()
• 인라인 강조 *
• 인라인 강조 **

지원되지 않는 기능

• 참조 및 ID
• 마크 다운 문자 이스케이프
• 중첩

---

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

---

The Showdown Attacklab-Link is down so use https://github.com/coreyti/showdown for your conversion needs :)

---

This doesn't address the entire request (it isn't an editor), but textile-js is a javascript rendering library: https://github.com/borgar/textile-js. A demonstration is available at http://borgar.github.io/textile-js/

---

I found this question intriguing, so I decided to start something off (only replaces strong and italic markdown tags). Having spent an hour trying to devise a solution using regexes, I gave up and ended up with the following, which seems to work nicely. That said, it can surely be further optimized and I'm not sure as to just how real-world resilient it will be in this form:

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

Test code:

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

Output:

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: New in V 0.024 - Automatic removal of unclosed markdown tags

---

markdown-js is a nice javascript markdown parser, an active project with tests.

---

Have you looked at the Eclipse WikiText library that is part of Mylyn. It will convert from many wiki syntax to xhtml and to xdocs/DITA. It looks way cool.

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

Has anyone found a solution to the HTML->textile problem? All of our current documentation is in M$ Word format and we would love to bring it into Redmine Wiki for collaborative maintenance. We have not found any tool that will make the conversion. We have found the Open Office extension that produces mediawiki formatted text but Redmine Wiki uses a subset of textile.

Anyone know of a tool that converts TO textile from mediawiki, Word, XDocs, or HTML?

---

For Textile:

I've recently patched together an HTML to Textile converter: https://github.com/cmroanirgo/to-textile

For the reverse Textile to HTML, I use and recommend https://github.com/borgar/textile-js, which other answers have already mentioned.

참고URL : https://stackoverflow.com/questions/1319657/javascript-to-convert-markdown-textile-to-html-and-ideally-back-to-markdown-t