¿Cómo combinar WMD y embellecer, como Stack Overflow?

0

Puede que le interese el Stack Overflow version of WMD on Github. Esta versión puede tener la función que está buscando en ella (pero no estoy seguro).

Fuente

2009-10-23 07:37:14

3

Con la ayuda de jquery y usando el plugin de temporizador, esto se puede hacer de la siguiente manera.

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

El mecanismo de lo anterior se describe here espero que ayude.

Fuente

2011-09-06 13:54:12

+0

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

5

Ven a ver el editor de PageDown de rebajas ...

yo sepa, DMP está muerto, pero PageDown es un tenedor sobre la base de la fuente de armas de destrucción masiva.

Es un proyecto activo basado en el trabajo realizado en WMD. Eso se encarga del editor de Markdown. Para que funcione el resaltado de sintaxis, también deberá descargar la fuente del proyecto Google-Code-Prettify.

Combina el demo.html, demo.css, prettify.js, prettify.css en la misma carpeta.

modificar las importaciones en consecuencia:

<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: Esto supone que los archivos de origen PageDown están en el directorio padre.

Para activar el resaltado de sintaxis, que tendrá que hacer dos cosas:

Añadir la clase 'prettyprint' a todos los elementos de código '' generados por el editor.
Dispare el evento prettyPrint() después de realizar un cambio.

Si se echa un vistazo en el código, he modificado el convertidor no desinfectada para hacer ambas cosas:

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

para darle una idea de la flexibilidad. Google-Code-Prettify es la misma biblioteca que habilita el resaltado de sintaxis en code.google.com y stackoverflow.com.

Me tomó algo de tiempo descubrir cómo hacer que funcione, pero es increíble lo fácil que es implementarlo. Este es solo un ejemplo de demostración, pero no debería ser demasiado difícil extenderlo más.

Fuente

2012-08-16 05:57:26

+0

Nota: Necesitaba llamar a 'PR.prettyPrint()' en lugar de 'prettyPrint()' para que la vista previa se actualizara. –

¿Cómo combinar WMD y embellecer, como Stack Overflow?

Respuesta

Cuestiones relacionadas