Come combinare WMD e prettify, come Stack Overflow?

0

Potresti essere interessato allo Stack Overflow version of WMD on Github. Questa versione potrebbe avere la funzione che stai cercando (ma non ne sono sicuro).

fonte

2009-10-23 07:37:14

3

Con l'aiuto di jquery e utilizzando il plugin timer questo può essere fatto nel modo seguente.

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

Il meccanismo di cui sopra è descritto here Speranza che aiuta.

fonte

2011-09-06 13:54:12

+0

collegamento http://www.codingthewheel.com/archives/syntax-highlighting-stackoverflow-google-prettify, è morto !! –

5

Date un'occhiata al l'editor PageDown Markdown ...

per quanto ne so, WMD è morto, ma PageDown è un fork in base alla sorgente WMD.

È un progetto attivo basato sul lavoro svolto in WMD. Questo si prende cura dell'editor Markdown. Per ottenere l'evidenziazione della sintassi funzionante dovrai anche scaricare l'origine dal progetto Google-Code-Prettify.

Combina demo.html, demo.css, prettify.js, prettify.css nella stessa cartella.

Modificare le importazioni di conseguenza:

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

Nota: Questo presuppone che i file di origine PgGiù si trovano nella directory principale.

Per attivare l'evidenziazione della sintassi, è necessario fare due cose:

aggiungere la classe 'prettyprint' a tutti gli elementi 'codice' generati dal curatore.
Avvia l'evento prettyPrint() dopo aver apportato una modifica.

Se si dà un'occhiata al codice, ho modificato il convertitore non sterilizzate a fare entrambe le cose:

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

Per dare un'idea della flessibilità. Google-Code-Prettify è la stessa libreria che abilita l'evidenziazione della sintassi su code.google.com e stackoverflow.com.

Mi ci è voluto un po 'di tempo per capire come farlo funzionare ma è incredibile quanto sia facile da implementare. Questo è solo un esempio dimostrativo ma non dovrebbe essere troppo difficile per estenderlo ulteriormente.

fonte

2012-08-16 05:57:26

+0

Nota: avevo bisogno di chiamare 'PR.prettyPrint()' invece di solo 'prettyPrint()' per l'anteprima da aggiornare. –

Come combinare WMD e prettify, come Stack Overflow?

risposta

Problemi correlati