2009-10-23 1 views

ответ

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> 

Механизм выше описан here Надеюсь, что это помогает.

+0

ссылка http://www.codingthewheel.com/archives/syntax-highlighting-stackoverflow-google-prettify, is dead !! –

5

Посмотрите на редактор PageDown Markdown ...

AFAIK, WMD мертв, но PageDown развилка на основе источника ОМП.

Это активный проект, основанный на работе, проделанной в ОМУ. Это касается редактора 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 находятся в родительском каталоге.

Чтобы включить подсветку синтаксиса, вам нужно сделать две вещи:

  1. Добавьте класс «prettyprint» ко всем элементам «CODE», генерируемых редактором.
  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.

Мне потребовалось некоторое время, чтобы выяснить, как заставить его работать, но удивительно, насколько легко его реализовать. Это только демонстрационный пример, но не слишком сложно его расширить.

+0

Примечание: Мне нужно было вызвать 'PR.prettyPrint()' вместо просто 'prettyPrint()' для предварительного просмотра. –