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

Question 1

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

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

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

Question 2

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을 "복호화"하는 것보다 덜 위험 해 보입니다. ..

Question 3

여기에 JavaScript 솔루션과 축소 된 (압축되지 않은) 크기 및 강점 / 약점 목록을 작성하는 것이 가치가 있다고 생각했습니다. 축소 된 코드의 압축 크기는 압축되지 않은 크기의 약 50 %입니다. 결과 :

포괄적 인 지원이 필요하고 사용자가 편집하거나 임의의 문서를 갖게 될 경우 쇼다운 (28KB)을 사용하십시오 .
사용 PageDown 키 (8킬로바이트)는 사용자 편집 / 임의의 문서를 가지고 있지만 (StackExchange 같은 사이트에 예를 들어 의견을) 테이블, 정의 목록 또는 각주 같은 것들을 필요하지 않은 경우.
합리적으로 높은 품질과 테이블 지원이 필요하지만 깃털 무게를 원하고 모든 단일 가장자리 케이스를 처리 할 필요가없는 경우 자체 드로 다운 (1.3KB)을 사용하십시오 .
보안 또는 확장 성과 같은 고유 한 기능이 필요한 경우 다른 하나를 사용하십시오.

이들 모두는 MIT 라이선스를 사용하며 대부분은 npm에 있습니다.

대결 : 28KB. 기본적으로 골드 스탠다드; 페이지 다운의 기초입니다.
페이지 다운 : 8KB. 이것이 StackExchange의 힘이므로 어떤 기능을 지원하는지 직접 확인할 수 있습니다 (매우 강력하지만 테이블, 정의 목록, 각주 등이 누락 됨). 8KB 변환기 스크립트 외에도 StackExchange에서도 사용하는 편집기 및 새니 타이 저 스크립트도 제공합니다.
드로 다운 : 1.3KB. 나는 그것을 썼다. 다른 경량 변환기보다 더 넓은 기능 범위; CommonMark 사양의 전부는 아니지만 대부분을 처리합니다. 사용자 편집에는 권장되지 않지만 웹 앱에서 정보를 표시하는 데 매우 유용합니다. 인라인 HTML이 없습니다.
markdown-it : 104KB. CommonMark 사양을 따릅니다. 구문 확장을 지원합니다. 기본적으로 보안 출력을 생성합니다. 빠른; 실제로 대결만큼 강력하지만 매우 큽니다. http://dillinger.io/ 의 기초입니다 .
표시 : 19KB. 포괄적; 단위 테스트 스위트에 대해 테스트되었습니다. 사용자 지정 렉서 규칙을 지원합니다.
마이크로 마크 다운 : 5KB. 많은 기능을 지원하지만 정렬되지 않은 목록 *과 같은 일반적인 기능과 펜싱 코드 블록과 같은 사양의 일부가 아닌 일반적인 기능이 누락되었습니다 . 대부분의 긴 문서에서 많은 버그가 예외를 발생시킵니다. 실험적이라고 생각합니다.
나노 마크 다운 : 1.9KB. 기능 범위는 대부분의 문서에서 사용되는 것으로 제한됩니다. 마이크로 마크 다운보다 더 강력하지만 완벽하지는 않습니다. 매우 기본적인 단위 테스트를 사용합니다. 합리적으로 견고하지만 많은 경우에서 중단됩니다.
mmd.js : 800 바이트. 여전히 작동하는 가능한 가장 작은 파서를 만들기위한 노력의 결과입니다. 작은 하위 집합을 지원합니다. 문서가 이에 맞게 조정되어야합니다.
markdown-js : 54KB (최소화 된 다운로드에 사용할 수 없음, ~ 20KB로 축소 될 수 있음). 꽤 포괄적이고 테스트가 포함되어 있지만 잘 알지 못합니다.
멜트 다운 : 41KB (다운로드에 사용할 수 없음, 축소됨, 아마도 ~ 15KB로 축소됨). jQuery 플러그인; Markdown Extra (표, 정의 목록, 각주).
unified.js : 다양 함, 5-100KB. html, markdown 및 prose를 변환하기위한 플러그인 기반 시스템입니다. 필요한 플러그인 (맞춤법 검사, 구문 강조 표시, 입력 삭제)에 따라 파일 크기가 달라집니다. 아마도 클라이언트 측보다 서버 측에서 더 많이 사용되었을 것입니다.

Question 4

직물

겉보기에 매우 훌륭한 텍스타일의 자바 스크립트 구현을 여기 에서 찾을 수 있고 다른 하나는 거기에서 찾을 수 있습니다 .

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

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

Question 5

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

지원되는 기능

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

지원되지 않는 기능

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

Question 6

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

Question 7

Showdown Attacklab-Link가 다운되었으므로 변환 요구 사항에 대해 https://github.com/coreyti/showdown 을 사용 하십시오. :)

Question 8

전체 요청을 처리하지는 않지만 (편집기가 아님) textile-js는 자바 스크립트 렌더링 라이브러리입니다 : https://github.com/borgar/textile-js . http://borgar.github.io/textile-js/ 에서 데모를 볼 수 있습니다.

Question 9

이 질문이 흥미로워 서 시작하기로 결정했습니다 (대체 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

편집 : V 0.024의 새로운 기능-닫히지 않은 마크 다운 태그 자동 제거

Question 10

markdown-js 는 테스트가있는 활성 프로젝트 인 멋진 자바 스크립트 마크 다운 파서입니다.

Question 11

Mylyn의 일부인 Eclipse WikiText 라이브러리를 보셨습니까? 많은 위키 구문에서 xhtml 및 xdocs / DITA로 변환됩니다. 멋지네요.

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

HTML-> textile 문제에 대한 해결책을 찾은 사람이 있습니까? 현재 모든 문서는 M $ Word 형식이며 공동 유지 관리를 위해 Redmine Wiki로 가져오고 싶습니다. 변환 할 도구를 찾지 못했습니다. 우리는 mediawiki 형식의 텍스트를 생성하는 Open Office 확장을 찾았지만 Redmine Wiki는 섬유의 하위 집합을 사용합니다.

도구의 사람을 알고 그 변환 TO 섬유 미디어 위키에서, 워드, XDocs, 또는 HTML?

Question 12

섬유 용 :

최근에 HTML to Textile 변환기를 함께 패치했습니다 : https://github.com/cmroanirgo/to-textile

HTML에 대한 역방향 Textile의 경우 다른 답변에서 이미 언급 한 https://github.com/borgar/textile-js를 사용하고 권장 합니다.