90

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

これを行うための最良の方法は何ですか?(理想的には、jQueryに適しています-例$("#editor").markdown_to_html():)

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

4

12 に答える 12

106

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を「復号化」するよりもリスクが少ないようです。 ..

于 2009-08-23T22:16:09.420 に答える
38

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

  • 包括的なサポートが必要で、ユーザーが編集したドキュメントや任意のドキュメントを使用するが、サイズや帯域幅を過度に気にしない場合は、markdown-it(104KB)を使用します
  • 適度に高品質でテーブルをサポートする必要があるが、フェザー級が必要で、変換以外の機能が必要ない場合、またはすべてのエッジケースに対処する必要がある場合は、独自のドローダウン(1.3KB)を使用してください。
  • セキュリティや拡張性などの独自の機能が必要な場合は、他のいずれかを使用してください。

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

  • マークダウン-それ:104KB。CommonMarkの移行以降、StackExchangeを強化します。CommonMark仕様に従い、現在は多かれ少なかれゴールドスタンダードになっています。構文拡張をサポートします。デフォルトで安全な出力を生成します。速い; 対決と同じくらい頑丈ですが、非常に大きいです。たくさんの機能があります(同期スクロールなど)。http://dillinger.io/の基礎でもあります。

  • 対決:28KB。CommonMarkを包括的にサポートし、以前はゴールドスタンダードでした。Markdownよりも大幅に小さいです-それは遅いです。それはページダウンの基礎です。

  • ページダウン:8KB。CommonMark移行前のPoweredStackExchange 。非常に堅牢ですが、テーブル、定義リスト、脚注などがありません。8KBのコンバータースクリプトに加えて、エディターおよびサニタイザースクリプトも提供します。

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

  • マーク:19KB。包括的; ユニットテストスイートに対してテスト済み。カスタムレクサールールをサポートします。

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

  • ナノマークダウン:1.9KB。機能範囲は、ほとんどのドキュメントで使用されるものに限定されています。マイクロマークダウンよりも堅牢ですが、完璧ではありません。独自の非常に基本的な単体テストを使用します。適度に堅牢ですが、多くのエッジケースで機能しません。

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

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

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

  • Unified.js:さまざま、5〜100KB。html、markdown、およびproseの間で変換するためのプラグインベースのシステム。必要なプラグイン(スペルチェック、構文強調表示、入力サニタイズ)に応じて、ファイルサイズは異なります。おそらく、クライアント側よりもサーバー側で多く使用されています。

于 2016-10-16T02:40:24.560 に答える
14

繊維

テキスタイルの非常に優れた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;}
    //...
于 2010-01-18T18:45:24.093 に答える
11

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

サポートされている機能

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

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

  • 参照とID
  • マークダウン文字のエスケープ
  • ネスティング
于 2014-06-05T14:13:02.530 に答える
5

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');
});
于 2010-05-02T18:13:19.177 に答える
4

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

于 2011-04-24T09:19:06.533 に答える
3

これはリクエスト全体に対応しているわけではありませんが(エディターではありません)、textile-jsはjavascriptレンダリングライブラリです:https ://github.com/borgar/textile-js 。デモはhttp://borgar.github.io/textile-js/で入手できます。

于 2014-01-31T19:34:09.930 に答える
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の新機能-閉じられていないマークダウンタグの自動削除

于 2009-08-23T23:29:32.457 に答える
1

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

于 2011-09-19T06:04:08.997 に答える
1

1行のマークダウンを取り込んで適切なHTMLに変換する簡単なマークダウンパーサー関数を書いてみましょう。簡単にするために、構文ではマークダウンの1つの機能(ヘッダー)のみをサポートします。

ヘッダーは、(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() 
}
于 2021-06-19T13:09:12.817 に答える
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はテキスタイルのサブセットを使用しています。

mediawiki、Word、 XDocs、またはHTMLからテキスタイルに変換するツールを知っている人はいますか?

于 2010-12-09T17:33:20.767 に答える
0

テキスタイルの場合:

最近、HTMLからテキスタイルへのコンバーターにパッチを適用しました:https ://github.com/cmroanirgo/to-textile

テキスタイルからHTMLへの逆変換には、https://github.com/borgar/textile-jsを使用してお勧めします。これについては、他の回答ですでに説明されています。

于 2017-03-25T03:25:18.880 に答える