Prettify需要class="prettyprint"
加入<pre>
或<code>
。如何讓WMD做到這一點?如何結合WMD和美化,如堆棧溢出?
回答
你可能會感興趣Stack Overflow version of WMD on Github。這個版本可能有你正在尋找的功能(但我不確定)。
在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 希望它能幫助。
看看在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>
注:此假定下頁源文件中的父目錄。
要啓用語法高亮,你需要做兩件事情:
- 的「prettyprint」類添加到由編輯器生成的所有「代碼」的元素。
- 更改後觸發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上啓用語法突出顯示的相同庫。
我花了一點時間才弄清楚如何讓它工作,但它是多麼容易實現它是驚人的。這只是一個演示例子,但它不應太難以進一步擴展。
注意:我需要調用'PR.prettyPrint()'而不是'prettyPrint()'來預覽刷新。 – 2017-01-15 12:26:58
- 1. 堆棧溢出堆棧溢出
- 2. UnmarshalJSON堆棧溢出結果
- 3. 堆棧溢出
- 4. 向WMD(堆棧溢出)編輯器添加自定義按鈕
- 5. STArray和堆棧溢出
- 6. 如何縮小堆棧溢出異常?
- 7. 堆棧溢出URL如何工作?
- 8. 如何解決堆棧溢出的Android
- 9. 如何用pthread捕獲堆棧溢出?
- 10. 如何避免遞歸堆棧溢出?
- 11. 如何捕獲堆棧溢出錯誤
- 12. 如何避免Haskell堆棧溢出?
- 13. 如何讓我的堆棧溢出?
- 14. 堆棧溢出C++
- 15. C#堆棧溢出
- 16. Malloc堆棧溢出
- 17. 堆棧溢出C++
- 18. LINQ2SQL堆棧溢出
- 19. 堆棧溢出ToArray()
- 20. C++堆棧溢出
- 21. 堆棧溢出:: regex_replace
- 22. .NET堆棧溢出?
- 23. MPMoviePlayerController堆棧溢出
- 24. ViewDragHelper堆棧溢出
- 25. Lua堆棧溢出
- 26. GinMapProvider堆棧溢出
- 27. Threading.Timer堆棧溢出
- 28. 如何在堆棧溢出發生之前看到堆棧?
- 29. 如何溢出堆棧而不推送新的堆棧幀?
- 30. mbed Region m_data_2堆棧和堆溢出
鏈接http://www.codingthewheel.com/archives/syntax-highlighting-stackoverflow-google-prettify,已經死了! – 2015-10-20 03:05:03