Prettify нуждается в class="prettyprint"
для добавления в <pre>
или <code>
. Как это сделать WMD сделать это?Как совместить ОМУ и префикс, например, переполнение стека?
ответ
Возможно, вас заинтересует Stack Overflow version of WMD on Github. Эта версия может иметь функцию, которую вы ищете в ней (но я не уверен).
С помощью 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 Надеюсь, что это помогает.
Посмотрите на редактор 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 находятся в родительском каталоге.
Чтобы включить подсветку синтаксиса, вам нужно сделать две вещи:
- Добавьте класс «prettyprint» ко всем элементам «CODE», генерируемых редактором.
- Пожарайте событие 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()' для предварительного просмотра. –
ссылка http://www.codingthewheel.com/archives/syntax-highlighting-stackoverflow-google-prettify, is dead !! –