1. Zuhause
  2. Frage und Antwort
  3. Wie kombiniert man WMD und verschönern, wie Stack Overflow?

Wie kombiniert man WMD und verschönern, wie Stack Overflow?

2009-10-23 28 views

Antwort

3

Mit Hilfe von jquery und mit dem Timer-Plugin kann dies auf folgende Weise geschehen.

<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>

Der Mechanismus der oben beschriebenen here Hoffe, es hilft.

Quelle

2011-09-06 13:54:12

+0

link http://www.codingthewheel.com/archives/syntax-highlighting-stackoverflow-google-prettify, ist tot !! –

5

Werfen Sie einen Blick auf die PageDown Markdown-Editor ...

AFAIK, ist WMD tot, aber BildAb ist eine Gabel auf der Quelle WMD basiert.

Es ist ein aktives Projekt, das auf der Arbeit in WMD basiert. Das kümmert sich um den Markdown-Editor. Damit die Syntaxhervorhebung funktioniert, müssen Sie auch die Quelle aus dem Projekt Google-Code-Prettify herunterladen.

Kombinieren Sie die Dateien demo.html, demo.css, prettify.js, prettify.css in demselben Ordner.

die Importe entsprechend ändern:

<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>

Hinweis: Dies setzt voraus, dass die Bild-ab-Quelldateien in dem übergeordneten Verzeichnis sind.

Syntaxhervorhebung aktivieren, müssen Sie zwei Dinge tun:

  1. Fügen Sie den ‚Schöndruck‘ Klasse für alle durch den Editor generierten Elemente ‚Code‘.
  2. Aktivieren Sie das Ereignis prettyPrint(), nachdem eine Änderung vorgenommen wurde.

Wenn Sie einen Blick auf den Code nehmen, modifizierte ich den nicht-hygienisiert Konverter, beides zu tun:

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();

Sie die Flexibilität eine Idee zu geben. Google-Code-Prettify ist dieselbe Bibliothek, die Syntax-Highlighting auf code.google.com und stackoverflow.com ermöglicht.

Es hat eine Weile gedauert, bis ich herausgefunden habe, wie man es zum Laufen bringt, aber es ist erstaunlich, wie einfach es zu implementieren ist. Dies ist nur ein Demo-Beispiel, aber es sollte nicht zu schwer sein, es weiter zu erweitern.

Quelle

2012-08-16 05:57:26

+0

Hinweis: Ich musste 'PR.prettyPrint()' anstatt nur 'prettyprint()' aufrufen, damit die Vorschau aktualisiert wird. –

Verwandte Themen

 Verwandte Themen