web-dev-qa-db-ja.com

Markdown / TextileをHTMLに変換する（そして、理想的には、Markdown / Textileに戻す）JavaScript

Markdown/Textile用の優れたJavascripteditorsがいくつかあります（例： http://attacklab.net/showdown/ 、現在使用しているもの）、必要なのは、Markdown/Textile-> HTMLから文字列を変換するJavascript関数だけです。

これを行う最良の方法は何ですか？ （理想的には、jQueryフレンドリです-例えば、$("#editor").markdown_to_html()）

Edit：別の言い方をすると、Railsのtextilize()とmarkdown()テキストヘルパー

javascriptjquerymarkdowntextile
79
Tom Lehman

Markdown-> HTMLの場合、 Showdown があります

StackOverflow自体は、質問と回答にMarkdown言語を使用します。それがどのように機能するか見てみましたか？

まあ、それはMITライセンスの下で利用可能な PageDown を使用しているようです

質問 良いMarkdown Javascriptライブラリまたはコントロールはありますか？ とその答えも役立ちます:-)


もちろん、完全な編集者は、あなたがまさに求めていたものではありません。しかし、Markdownコードを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-> Markdownでは、物事は少し難しいかもしれません...

私がすることは、MarkdownとHTMLの両方をアプリケーションデータストア（データベース？）に保存し、一方を編集用に使用し、もう一方をレンダリング用に使用することです。 ..

95
Pascal MARTIN

繊維

あなたはテキスタイルの非常に素晴らしいJavascript実装を見つけることができます here 、および別のもの there ）。

注：にリンクを作成した最初の実装にはバグがあります。水平バーは正しくレンダリングされません。修正するには、ファイルに次のコードを追加します。

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

私は小さなミニマルなスクリプトを使用しています- mmd.js 、これはMarkdownの可能性のサブセットのみをサポートしますが、これはとにかく必要なものはすべてあるので、1kb未満のこのスクリプトは驚くべきものであり、やりすぎになることはありません。

サポートされている機能

  • ヘッダー_#_
  • ブロック引用_>_
  • 順序付きリスト_1_
  • 順不同リスト_*_
  • 段落
  • リンク[]()
  • 画像![]()
  • インライン強調_*_
  • インライン強調_**_

サポートされていない機能

  • 参照とID
  • Markdownキャラクターのエスケープ
  • ネスティング
9
vsync

ここにあるJavaScriptソリューションとそれらの縮小（非圧縮）サイズと強み/弱みのリストを作成する価値があると思いました。縮小されたコードの圧縮サイズは、非圧縮サイズの約50％です。結局のところ、ユーザーがサイト上のドキュメントを編集するために包括的なサポートが必要な場合、pagedown（8KB）をお勧めします。ユーザーが編集していないWebアプリで情報を提示する場合、所有drawdown（1.3KB）。非常に小さいながら、ほとんどの場合に正しいことを行います。これらのほとんどすべてがMITライセンスです。

npmには、さまざまな品質の状態で、この目的のためにさまざまなスクリプトも用意されています。

  • showdown ：28KB。基本的にゴールドスタンダード。これはページダウンの基礎です。

  • ページダウン ：8KB。これがStackExchangeの原動力であるため、サポートされている機能を自分で確認できます。非常に包括的で非常に堅牢です。 8KBコンバータースクリプトに加えて、StackExchangeも使用するエディタースクリプトとサニタイザースクリプトも提供します。

  • markdown-it ：104KB。 CommonMark仕様に従います。構文拡張をサポートします。速い;実際にはショーダウンと同じくらい堅牢ですが、非常に大きい場合があります。 http://dillinger.io/ の基礎です。

  • マーク付き ：19KB。包括的な;単体テストスイートに対してテスト済み。カスタムレクサールールをサポートします。

  • マイクロマークダウン ：5KB。多くの機能をサポートしていますが、*を使用した順序付けられていないリストのような一般的なものと、フェンスコードブロックのような仕様の一部ではない一般的なものがありません。多くのバグは、最も長いドキュメントで例外をスローします。実験的だと思います。

  • nano-markdown ：1.9KB。ほとんどのドキュメントで使用されるものに限定された機能範囲。マイクロマークダウンよりも堅牢ですが、完璧ではありません。独自の非常に基本的な単体テストを使用します。適度に堅牢ですが、多くのEdgeの場合に壊れます。

  • ドローダウン ：1.3KB。完全な開示、私はそれを書いた。ナノマークダウンよりも機能範囲が広く、堅牢でありながら小型です。 CommonMark仕様のすべてではありませんが、ほとんどを処理します。いくつかのEdgeケースを誤って処理します。ユーザーが編集したドキュメントにはお勧めしませんが、Webアプリで情報を表示するのに非常に役立ちます。インラインHTMLはありません。

  • mmd.js ：800バイト。引き続き機能する最小のパーサーを作成する努力の結果。小さなサブセットをサポートします。ドキュメントはそれに合わせて調整する必要があります。

  • markdown-js ：54KB（縮小されたダウンロードには使用できません。おそらく20KBに縮小されます）。かなり包括的に見え、テストが含まれていますが、私はそれにあまり詳しくありません。

  • メルトダウン ：41KB（縮小されたダウンロードには使用できません。おそらく〜15KBに縮小されます）。 jQueryプラグイン; Markdown Extra（テーブル、定義リスト、脚注）。

9
Adam Leggett

jQueryの有無にかかわらずShowdownを使用 に簡単です。 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
Mathias Bynens

Showdown Attacklab-Linkがダウンしているため、変換のニーズに https://github.com/coreyti/showdown を使用してください:)

4
Bijan

これはリクエスト全体に対処するものではありません（エディターではありません）が、textile-jsはJavaScriptレンダリングライブラリです https://github.com/borgar/textile-js 。デモは http://borgar.github.io/textile-js/ で入手できます。

3
Nathan

markdown-js は、ニースjavascriptマークダウンパーサーであり、テストを行うアクティブなプロジェクトです。

1
foz

この質問に興味をそそられたので、何かを始めることにしました（strongとitalicマークダウンタグのみを置き換えます）。正規表現を使用してソリューションを考案しようとして1時間を費やした後、私はあきらめて、次のようになりました。そうは言っても、確実にさらに最適化することができ、この形式で実際にどの程度回復できるかはわかりません。

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の新機能-閉じられていないマークダウンタグの自動削除

1
karim79

テキスタイルの場合：

最近、HTMLからTextileへのコンバーターをパッチしました： https://github.com/cmroanirgo/to-textile

HTMLへの逆のテキスタイルについては、他の回答で既に言及されている https://github.com/borgar/textile-js を使用し、推奨します。

0
cmroanirgo

Mylynの一部であるEclipse WikiTextライブラリを見ましたか。多くのwiki構文から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はテキスタイルのサブセットを使用します。

MediaWiki、Word、XDocs、またはHTMLから[〜＃〜] to [〜＃〜]（-＃=]テキスタイルを変換するツールを知っている人はいますか？

0
Stephen Gissendaner