9

Prettifyはまたはclass="prettyprint"に追加する必要があります。WMDにこれをさせる方法は?<pre><code>

4

3 に答える 3

5

PageDown Markdown エディターを見てみましょう...

私の知る限り、WMD は死んでいますが、PageDown は WMD ソースに基づくフォークです。

これは、WMD で行われた作業に基づくアクティブなプロジェクトです。これで Markdown エディターが処理されます。構文の強調表示を機能させるには、 Google-Code-Prettifyプロジェクトからソースをダウンロードする必要もあります。

demo.html、demo.css、prettify.js、prettify.css を同じフォルダにまとめます。

それに応じてインポートを変更します。

<link rel="stylesheet" href="demo.css" />
<link rel="stylesheet" href="prettify.css" />

<script src="../Markdown.Converter.js"></script>
<script src="../Markdown.Sanitizer.js"></script>
<script src="../Markdown.Editor.js"></script>
<script src="prettify.js"></script>

注: これは、PageDown ソース ファイルが親ディレクトリにあることを前提としています。

構文の強調表示を有効にするには、次の 2 つのことを行う必要があります。

  1. エディターによって生成されたすべての「コード」要素に「prettyprint」クラスを追加します。
  2. 変更が行われた後に prettyPrint() イベントを発生させます。

コードを見ると、サニタイズされていないコンバーターを変更して、両方を行うようにしています。

var converter2 = new Markdown.Converter();
converter2.hooks.chain("postConversion", function (text) {
    return text.replace(/<pre>/gi, "<pre class=prettyprint>");
});

var editor2 = new Markdown.Editor(converter2, "-second");
editor2.hooks.chain("onPreviewRefresh", function () {
    prettyPrint();
});
editor2.run();

柔軟性のアイデアを提供します。Google-Code-Prettify は、code.google.com と stackoverflow.com で構文の強調表示を有効にする同じライブラリです。

それを機能させる方法を理解するのに少し時間がかかりましたが、実装がいかに簡単かは驚くべきことです. これはデモの例にすぎませんが、さらに拡張するのは難しくありません。

于 2012-08-16T05:57:26.107 に答える
3

jquery とタイマー プラグインを使用すると、次の方法でこれを行うことができます。

<html>
  <head>
    <title>My Page Title</title>
    <link rel="stylesheet" type="text/css" href="wmd/wmd.css" />
    <script type="text/javascript" src="wmd/showdown.js"></script>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.timers.js"></script>
    <link href="lib/prettify/prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="lib/prettify/prettify.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            $('#wmd-input').keydown(function() {
                $(this).stopTime();
                $(this).oneTime(1000, function() {  styleCode(); });
            });
        });
        function styleCode(){

            $("#wmd-preview pre").addClass("prettyprint");
            $("#wmd-preview code").html(prettyPrintOne($("#wmd-preview code").html()));
        }
    </script>
  </head>
  <body onload="prettyPrint()">

    <div style="width:400px;min-height: 500px;">
        <div id="wmd-button-bar" class="wmd-panel"></div>
        <br/>
        <textarea id="wmd-input" class="wmd-panel"></textarea>
        <br/>
        <div id="wmd-preview" class="wmd-panel"></div>
        <br/>
        <div id="wmd-output" class="wmd-panel"></div>   
    </div>

    <script type="text/javascript" src="lib/wmd/wmd.js"></script>
  </body>

上記の仕組みはこちらに書いてあります お 役に立てば幸いです。

于 2011-09-06T13:54:12.270 に答える
0

Github の Stack Overflow バージョンの WMD に興味があるかもしれません。このバージョンには、探している機能が含まれている可能性があります (ただし、確かではありません)。

于 2009-10-23T07:37:14.263 に答える