Markdown/Textile을 HTML로 변환하는 자바스크립트(그리고 이상적으로 Markdown/Textile로 다시 변환)
Markdown / Textile(예: http://attacklab.net/showdown/, 제가 지금 사용하고 있는 자바스크립트 에디터가 여러 개 있지만, Markdown / Textile -> HTML에서 문자열을 변환해 주는 자바스크립트 함수만 있으면 됩니다.
이것을 가장 (를 들어, ?) (jQuery-friendly)입니다. 예를 들어,$("#editor").markdown_to_html())
Edit : Rails 의 자바스크립트 구현을 찾고 있는 것도 다른 방법입니다.textilize()그리고.markdown() 도움말
Markdown -> HTML의 경우, Showdown이 있습니다.
스택 오버플로우 자체는 질문과 답변에 마크다운 언어를 사용합니다. 어떻게 작동하는지 살펴보셨나요?
MIT 라이선스로 이용 가능한 PageDown을 이용하고 있는 것 같습니다.
질문 좋은 마크다운 자바스크립트 라이브러리나 컨트롤이 있습니까?답변도 도움이 될 수 있습니다 :-)
물론 전체 편집기는 당신이 요구했던 것과는 다릅니다. 그러나 그들은 마크다운 코드를 HTML로 변환하기 위해 어떤 종류의 기능을 사용해야 합니다. 그리고 이 편집기들의 라이선스에 따라, 당신은 그 기능을 다시 사용할 수 있을지도 모릅니다.
실제로 Showdown을 자세히 살펴보면 코드 소스(file 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 -> 마크다운, 일이 좀 더 어려울 수도 있을 것 같은데...
제가 할 일은 마크다운과 HTML을 모두 제 애플리케이션 데이터 저장소(데이터베이스 ?)에 저장하고, 하나는 편집에 사용하고, 다른 하나는 렌더링에 사용하는 것입니다.더 많은 공간이 필요하지만 HTML을 "복호화"하는 것보다 덜 위험해 보입니다.
저는 자바스크립트 솔루션의 목록을 작성하는 것이 가치가 있다고 생각했습니다. 그리고 최소(압축되지 않은) 크기와 강점/약점을 여기에 작성하는 것도 가치가 있다고 생각했습니다.최소화된 코드의 압축된 크기는 압축되지 않은 크기의 약 50%입니다.결과는 다음과 같습니다.
- 포괄적인 지원이 필요하고 사용자가 편집하거나 임의의 문서를 사용하지만 크기/대역폭에 크게 신경 쓰지 않는 경우 마크다운-잇(104KB)을 사용합니다.
- 자체 도면 사용(1.3)KB) 비교적 높은 품질과 테이블 지원이 필요하지만 깃털 무게를 원하며 변환 이외의 다른 기능이 필요하지 않거나 모든 에지 케이스를 처리해야 하는 경우.
- 보안 또는 확장성과 같은 고유한 기능이 필요한 경우 다른 기능 중 하나를 사용합니다.
이들은 모두 MIT 라이선스를 사용하며 대부분 npm에 있습니다.
마크다운-잇: 104KB.CommonMark 마이그레이션 이후 StackExchange의 권한을 부여합니다.CommonMark 사양을 따르며 이제는 거의 골드 표준이 되었습니다. 구문 확장을 지원하며 기본적으로 안전한 출력을 생성합니다.빠르고, 대결만큼 강하지만, 매우 큽니다.많은 특징(예: 동기화된 스크롤)을 가지고 있습니다.이것은 또한 http://dillinger.io/ 의 기초가 됩니다.
대결: 28KB.포괄적인 CommonMark 지원을 받고 있으며 이전에는 금본위제였습니다. Markdown보다 상당히 작지만 속도는 느립니다.그것이 페이지 다운의 기본입니다.
페이지 다운: 8KB.CommonMark 마이그레이션 전에 Powered Stack Exchange.매우 견고하지만 표, 정의 목록, 각주 등이 누락되어 있습니다.8KB 컨버터 스크립트 외에 편집기 및 세정기 스크립트도 제공합니다.
드로우다운 : 1.3KB. 전체 공개, 제가 작성했습니다.다른 경량 변환기보다 더 넓은 기능 범위. 모든 CommonMark 사양을 처리하지는 않지만 대부분의 기능을 처리합니다.사용자 편집에는 권장되지 않지만 웹 앱에서 정보를 표시하는 데 매우 유용합니다.인라인 HTML이 없습니다.
표시: 19KB.포괄적이고, 단위 테스트 제품군과 비교하여 테스트되며, 맞춤형 렉서 규칙을 지원합니다.
마이크로마크 다운: 5KB.많은 기능을 지원하지만 다음을 사용하는 순서 없는 목록과 같은 일반적인 기능은 없습니다.
*울타리가 쳐진 코드 블록처럼 규격의 일부가 아닌 일반적인 것들도 있습니다.대부분의 긴 문서에 예외를 두는 버그가 많습니다.실험적으로 생각합니다.나노 마크다운: 1.9KB. 기능 범위는 대부분의 문서에서 사용하는 것으로 제한되며 마이크로마크다운보다 강력하지만 완벽하지는 않습니다. 자체의 매우 기본적인 단위 테스트를 사용합니다.비교적 견고하지만 많은 에지 케이스에서 깨집니다.
mmd.js: 800바이트.가능한 한 가장 작은 파서를 만들기 위한 노력의 결과로 여전히 작동합니다.작은 부분 집합을 지원하므로 문서를 조정해야 합니다.
markdown-js: 54KB(최소 다운로드에 사용할 수 없음, ~20KB로 최소화됨).꽤 포괄적으로 보이고 검사도 포함되어 있습니다만, 저는 잘 모릅니다.
멜트다운: 41KB (최소화된 다운로드에 사용할 수 없음, 아마도 ~15KB로 최소화됨).jQuery 플러그인; Markdown Extra(테이블, 정의 목록, 각주).
unified.js: 다양하며 5-100KB입니다.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;}
//...
나는 마크다운 가능성의 일부만 지원하는 작은 미니멀리즘 스크립트 - 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');
});
이 질문이 흥미롭기 때문에 무언가를 시작하기로 결정했습니다(대체만 가능).strong그리고.italic마크다운 태그).regexes를 이용한 해결책을 고안하기 위해 한 시간 동안 노력한 끝에 포기하고 다음과 같은 결과를 얻었는데, 이는 잘 작동하는 것 같습니다.그렇기는 하지만, 이 제품은 더욱 최적화될 수 있을 것이며, 이러한 형태로 실제 제품이 얼마나 탄력적일지는 확신할 수 없습니다.
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의 새로운 기능 - 닫히지 않은 마크다운 태그 자동 제거
Showdown Attacklab-Link가 중단되었으니 https://github.com/coreyti/showdown 을 이용하여 전환을 요구합니다. :)
이것은 전체 요청을 다루지는 않지만(편집자가 아닙니다), textile-js는 자바스크립트 렌더링 라이브러리입니다. https://github.com/borgar/textile-js데모는 http://borgar.github.io/textile-js/ 에서 확인할 수 있습니다.
마크다운의 한 줄을 받아들여 적절한 HTML로 번역되는 간단한 마크다운 파서 함수를 작성해 보겠습니다. 간단히 하기 위해 구문에서 마크다운의 한 가지 기능인 헤더만 지원합니다.
머리글은 해시(1-6) 다음에 공백, 텍스트 순으로 지정됩니다.해시 수에 따라 HTML 출력의 헤더 수준이 결정됩니다.
function markdownParser(markdown) {
const htmlText = markdown
.replace(/^# (.*$)/gim, '<h1>$1</h1>')
.replace(/^## (.*$)/gim, '<h2>$1</h2>')
.replace(/^### (.*$)/gim, '<h3>$1</h3>')
.replace(/^#### (.*$)/gim, '<h4>$1</h4>')
.replace(/^##### (.*$)/gim, '<h5>$1</h5>')
.replace(/^###### (.*$)/gim, '<h6>$1</h6>')
return htmlText.trim()
}
markdown-js는 좋은 자바스크립트 markdown parser로 테스트가 있는 활성 프로젝트입니다.
Mylyn의 일부인 Eclipse WikiText 라이브러리를 살펴보셨습니까?그것은 많은 위키 구문에서 xhtml과 xdocs/D로 변환될 것입니다.ITA. 되게 멋있어요.
http://help.eclipse.org/galileo/topic/org.eclipse.mylyn.wikitext.help.ui/help/Markup-Conversion.html
HTML->textile 문제에 대한 해결책을 찾은 사람이 있습니까?현재 사용 중인 모든 문서는 M$ Word 형식이며, 공동 유지보수를 위해 Redmine Wiki에 도입하고 싶습니다.변환할 수 있는 도구를 찾지 못했습니다.미디어위키 형식의 텍스트를 생성하는 오픈 오피스 확장자를 찾았지만 Redmin Wiki는 섬유 부분 집합을 사용합니다.
미디어위키, 워드, XDocs 또는 HTML에서 섬유로 변환하는 도구를 아는 사람?
섬유의 경우:
최근 HTML에서 텍스타일로 변환기를 패치했습니다. https://github.com/cmroanirgo/to-textile
HTML에 대한 텍스타일 역을 위해서, 저는 다른 답변들이 이미 언급된 https://github.com/borgar/textile-js, 을 사용하고 추천합니다.
karim79에 의한 답변이 유용하다는 것을 알았습니다.제가 조금 수정해서 제 버전을 공유하고 싶습니다.아마 누군가에게 도움이 될 겁니다.
답변을 자바스크립트에서 PHP로 수정하였습니다(질문에 PHP 태그가 없는 것으로 알고 있습니다).
저도 변했어요.while()로.for()이유:
- "********"와 같은 중단 없는 별표 시퀀스를 교체하고 싶지 않았습니다.
- 짝이 없는 "*"을 제거하고 싶지 않았습니다.
예를 들어, 두 개 사이의 거리가 먼 *의 것을 모두 소비하여 "강화"시킬 것입니다.하지만 왓츠앱도 이렇게 행동한다고 생각합니다.
저는 제가 한 것보다 루프의 종료를 강제하는 더 나은 방법이 있다고 생각합니다. 저는 단지 "만약 그것이 깨지지 않았다면, 고치지 말라"는 규칙을 따랐을 뿐입니다.제안을 받게 되어 기쁩니다.
function md2html($text = "") {
// I constantly check for length of text, instead of assigning the value to a var (which would be more efficient) because the length changes with every replacement!
for ($i = 0; $i < strlen($text); $i++) {
if (($beg = strpos($text,"*",$i)) !== FALSE){
if (($seq = strspn($text,"*",$beg)) > 1)
$i = $beg + $seq; // skip sequence
else {
if (($end = strpos($text,"*",$beg + 1)) !== FALSE){ // found a second one
$length = $end - $beg - 1;
$innerText = substr($text,$beg+1,$length);
$strongified = "<strong>$innerText</strong>";
// following the original answer I should do something like
// $text = substr($text,0,$beg) . $strongified . substr($text,$end+1);
// but I assume the following is better:
$text = substr_replace($text,$strongified,$beg,$length+2); // adding to length to include both asterisks
$i = $end + 16; // the real position in the string has now increased due to replacement
} else
$i = strlen($text); // force end of for loop
}
} else
$i = strlen($text);
}
for ($i = 0; $i < strlen($text); $i++) {
if (($beg = strpos($text,"_",$i)) !== FALSE){
if (($seq = strspn($text,"_",$beg)) > 1)
$i = $beg + $seq;
else {
if (($end = strpos($text,"_",$beg + 1)) !== FALSE){
$length = $end - $beg - 1;
$innerText = substr($text,$beg+1,$length);
$italicized = "<em>$innerText</em>";
$text = substr_replace($text,$italicized,$beg,$length+2);
$i = $end + 10;
} else
$i = strlen($text);
}
} else
$i = strlen($text);
}
return $text;
}
언급URL : https://stackoverflow.com/questions/1319657/javascript-to-convert-markdown-textile-to-html-and-ideally-back-to-markdown-t
'programing' 카테고리의 다른 글
| ajax를 통해 FormData 개체와 추가 매개 변수 전송 (0) | 2023.09.06 |
|---|---|
| 장고: 색인 작성: 비고유, 다중 열 (0) | 2023.09.06 |
| XSD 파일을 XLS로 변환하는 방법 (0) | 2023.09.06 |
| Xcode/LLDB: 방금 발생한 예외에 대한 정보를 얻는 방법은 무엇입니까? (0) | 2023.09.06 |
| __inline_의 의미는 무엇입니까? (0) | 2023.09.06 |