Как объединить ОМП и преттификацию, как переполнение стека? - PullRequest
Новая
       22

Как объединить ОМП и преттификацию, как переполнение стека?

9 голосов
/ 23 октября 2009

Prettify необходимо добавить class="prettyprint" к <pre> или <code>. Как позволить WMD сделать это?

Ответы [ 3 ]

5 голосов
/ 16 августа 2012

Взгляните на PageDown Редактор уценок ...

AFAIK, ОМУ умерло, но 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 ко всем элементам кода, сгенерированным редактором.
  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.

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

3 голосов
/ 06 сентября 2011

С помощью 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>

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

0 голосов
/ 23 октября 2009

Вас может заинтересовать версия WMD Stack Overflow на Github . Эта версия может иметь функцию, которую вы ищете (но я не уверен).

...