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

84

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

これを行うための最良の方法は何ですか？（ -例えば、理想的には、jQueryの優しいだろう$("#editor").markdown_to_html()）

編集：別の言い方をすれば、RailsのJavascript実装textilize()とmarkdown()テキストヘルパーを探しているということです。

javascript  jquery  markdown  textile 
— トム・レーマン
ソース

回答:

98

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

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

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

質問良いMarkdownJavascriptライブラリまたはコントロールはありますか？そしてその答えも役立つかもしれません:-)


もちろん、完全なエディタはあなたが求めていたものとは異なります。ただし、Markdownコードを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を「復号化」するよりもリスクが少ないようです。 ..

— パスカルマーティン
ソース
5
リンクが変更されたようです。デモはsoftwaremaniacs.org/playground/showdown-highlightにあり、ソースコードはsoftwaremaniacs.org/playground/showdown-highlight/showdown.jsにあります
— John J. Camilleri 2011
1
@ジョンコメントありがとうございます; リンクを変更するために回答を編集しました;
— Pascal MARTIN
残念ながら、このライブラリはマークダウンベースのリンクでは機能しないようです。別名：一部のテキストは変換されません。残念ながら、構文の一部が欠落しているようです。他に何が欠けていますか？
— オッドマン2013
25

ここにJavaScriptソリューションのリストを作成し、それらの縮小された（圧縮されていない）サイズと長所/短所をリストすることは価値があると思いました。縮小されたコードの圧縮サイズは、非圧縮サイズの約50％になります。結局のところ：

  • 包括的なサポートが必要で、ユーザーが編集したドキュメントや任意のドキュメントがある場合は、対決（28KB）を使用してください。
  • ユーザーが編集した/任意のドキュメントがあるが、表、定義リスト、脚注（StackExchangeなどのサイトのコメントなど）などは必要ない場合は、ページダウン（8KB）を使用します。
  • 適度に高品質でテーブルをサポートする必要があるが、フェザー級が必要で、すべてのエッジケースに対処する必要がない場合は、独自のドローダウン（1.3KB）を使用してください。
  • セキュリティや拡張性などの独自の機能が必要な場合は、他のいずれかを使用してください。

これらはすべてMITライセンスを使用しており、ほとんどがnpmにあります。

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

  • ページダウン：8KB。これがStackExchangeの原動力であるため、StackExchangeがサポートする機能を自分で確認できます（非常に堅牢ですが、テーブル、定義リスト、脚注などがありません）。8KBのコンバータースクリプトに加えて、StackExchangeも使用するエディタースクリプトとサニタイザースクリプトも提供します。

  • ドローダウン：1.3KB。完全開示、私はそれを書きました。他のどの軽量コンバーターよりも広い機能範囲。CommonMark仕様のすべてではありませんがほとんどを処理します。ユーザーの編集にはお勧めしませんが、Webアプリで情報を表示するのに非常に役立ちます。インラインHTMLはありません。

  • マークダウン-それ：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の間で変換するためのプラグインベースのシステム。必要なプラグイン（スペルチェック、構文の強調表示、入力のサニタイズ）に応じて、ファイルサイズは異なります。おそらく、クライアント側よりもサーバー側の方が多く使用されています。

— アダムレゲット
ソース
これをありがとう、本当に便利です！私は対決を使用し、fetch（JakeArchibaldの「That'sSoFetch」を少しスキャンして）Markdownファイルを静的HTMLページに読み込み、HTMLに変換しました。甘い：
— DaveEveritt19年
@DaveEveritt素晴らしい-固定ブラウザをターゲットにしているのでない限り、フェッチポリフィルを含めることを忘れないでください。これはあなたの目的のために働くと小さなあるでしょう：github.com/developit/unfetch
— アダム・レゲット
同意し、リンクに感謝しますが、これが必要なブラウザはごくわずかだと思います-Samsung
— DaveEveritt19年
ドローダウンに<table>機能を追加する予定はありますか？自分で追加してみましたが、理解が行き過ぎです。;（
— ビクターリー
1
@VictorLee完了！
— Adam Leggett
13

繊維

テキスタイルの非常に優れたJavascript実装がここにあり、別の実装があります（あまり良くないかもしれませんが、入力に応じて変換する優れたサンプルページがあります）。

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

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
ソース
9

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

サポートされている機能

  • ヘッダー #
  • ブロッククォート >
  • 注文リスト 1
  • 順序付けられていないリスト *
  • 段落
  • リンク []()
  • 画像 ![]()
  • インライン強調 *
  • インライン強調 **

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

  • 参照とID
  • マークダウン文字のエスケープ
  • ネスティング
— vsync
ソース
本当にすごい！
— アーサー・アラウージョ
npm installを使用してmmd.jsをインストールできますか？本当に私のプロジェクトで試してみたいです。
— sudhir shakya 2017
1
adamvleggett.github.io/drawdownはそれほど大きくはありませんが、より多くのMarkdownをより柔軟にサポートします。
— AdamLeggett19年
4

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');
});
— マティアス・ビネンス
ソース
2

この質問に興味をそそられたので、何かを始めることにしました（タグの置き換え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

編集：V0.024の新機能-閉じられていないマークダウンタグの自動削除

— karim79
ソース
1

markdown-jsは、テストを備えたアクティブなプロジェクトである、優れたjavascriptマークダウンパーサーです。

— フォス
ソース
0

Mylynの一部であるEclipseWikiTextライブラリを見たことがありますか。多くのwiki構文からxhtmlおよびxdocs / DITAに変換されます。かっこいいですね。

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

HTML->テキスタイルの問題の解決策を見つけた人はいますか？現在のドキュメントはすべてM $ Word形式であり、共同メンテナンスのためにRedmineWikiに取り入れたいと考えています。変換を行うツールは見つかりませんでした。mediawiki形式のテキストを生成するOpenOffice拡張機能が見つかりましたが、RedmineWikiはテキスタイルのサブセットを使用しています。

ツールの誰もが知っていることが改宗TO繊維のMediaWikiから、ワード、をxdocs、またはHTML？

— スティーブンギッセンダナー
ソース
— はい
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.