1. 首頁
  2. 問答
  3. 如何結合WMD和美化，如堆棧溢出？

如何結合WMD和美化，如堆棧溢出？

2009-10-23 97 views

回答

3

在jquery的幫助下，使用timer插件，可以通過以下方式完成。

<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 希望它能幫助。

來源

2011-09-06 13:54:12

+0

鏈接http://www.codingthewheel.com/archives/syntax-highlighting-stackoverflow-google-prettify，已經死了！ – 2015-10-20 03:05:03

5

看看在PageDown降價編輯器...

據我所知，大規模殺傷性武器是死的，但PageDown鍵是基於大規模殺傷性武器來源叉子。

這是一個基於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>

注：此假定下頁源文件中的父目錄。

要啓用語法高亮，你需要做兩件事情：

  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-16 05:57:26

+0

注意：我需要調用'PR.prettyPrint（）'而不是'prettyPrint（）'來預覽刷新。 – 2017-01-15 12:26:58

相關問題

 相關問題