Javascript для преобразования Markdown / Textile в HTML (и, в идеале, обратно в Markdown / Textile)

Есть несколько хороших редакторов Javascript для Markdown / Textile (например: http://attacklab.net/showdown/ , тот, который я использую прямо сейчас), но все, что мне нужно, это функция Javascript, которая преобразует строку из Markdown / Textile -> HTML и обратно.

Как лучше всего это сделать? (В идеале это было бы jQuery-friendly - например, $("#editor").markdown_to_html())

Изменить: еще один способ выразиться в том, что я ищу реализацию Javascript для Rails textilize()и markdown()текстовых помощников.

Для Markdown -> HTML есть Showdown

Сам StackOverflow использует язык Markdown для вопросов и ответов; вы пытались посмотреть, как это работает?

Что ж, похоже, он использует PageDown, доступный по лицензии MIT.

Вопрос: есть ли хорошая библиотека или элемент управления Markdown Javascript? и его ответы тоже могут помочь :-)

Разумеется, полноценный редактор - это не совсем то, о чем вы просили; но они должны использовать какую-то функцию для преобразования кода Markdown в HTML; и, в зависимости от лицензии этих редакторов, вы можете повторно использовать эту функцию ...

На самом деле, если вы внимательно посмотрите на Showdown в его исходном коде (файл showdown.js) , вы найдете эту часть комментария:

//
// Showdown usage:
//
//   var text = "Markdown *rocks*.";
//
//   var converter = new Showdown.converter();
//   var html = converter.makeHtml(text);
//
//   alert(html);
//
// Note: move the sample code to the bottom of this
// file before uncommenting it.
//

Это не синтаксис jQuery, но его довольно легко интегрировать в ваше приложение ;-)

По поводу Textile вроде бы немного сложнее найти что-нибудь полезное :-(

С другой стороны, HTML -> Markdown, думаю, все может быть немного сложнее ...

Я бы сохранил и Markdown, и HTML в моем хранилище данных приложения (базе данных?) И использовал бы один для редактирования, а другой для рендеринга ... Это займет больше места, но кажется менее рискованным, чем «расшифровка» HTML. ..

Я подумал, что было бы целесообразно составить здесь список решений JavaScript, их минимизированный (несжатый) размер и сильные / слабые стороны. Сжатый размер минимизированного кода будет составлять около 50% от несжатого размера. К чему это сводится:

• Использование разборок (28KB) , если вам нужна всесторонняя поддержка и будет отредактирован пользователем или произвольные документы.
• Используйте pagedown (8KB), если у вас есть редактируемые пользователем / произвольные документы, но вам не нужны такие вещи, как таблицы, списки определений или сноски (например, комментарии на таком сайте, как StackExchange).
• Используйте мою собственную просадку (1,3 КБ), если вам нужно достаточно высокое качество и поддержка стола, но вам нужен вес и не нужно рассматривать каждый крайний случай.
• Используйте один из других, если вам нужны уникальные возможности, такие как безопасность или расширяемость.

Все они используют лицензию MIT, большинство из них находится на npm.

• вскрытие : 28КБ. В основном золотой стандарт; это основа для pagedown.

• pagedown : 8 КБ. Это то, что поддерживает StackExchange, поэтому вы можете сами увидеть, какие функции он поддерживает (он очень надежен, но в нем отсутствуют таблицы, списки определений, сноски и т. Д.). В дополнение к скрипту конвертера размером 8 Кбайт он также предлагает скрипты редактора и дезинфектора, которые также использует StackExchange.

• просадка : 1,3КБ. Полное раскрытие, я это написал. Более широкий набор функций, чем у любого другого легкого конвертера; обрабатывает большую часть, но не все спецификации CommonMark. Не рекомендуется для редактирования пользователем, но очень полезно для представления информации в веб-приложениях. Нет встроенного HTML.

• markdown-it : 104 КБ. Соответствует спецификации CommonMark; поддерживает расширения синтаксиса; по умолчанию производит безопасный вывод. Быстрый; на самом деле может быть таким же надежным, как вскрытие карт, но очень большим. Является основой для http://dillinger.io/ .

• помечено : 19КБ. Всеобъемлющий; протестирован против набора модульных тестов; поддерживает настраиваемые правила лексера.

• микроразметка : 5 КБ . Поддерживает множество функций, но отсутствуют некоторые общие, такие как использование неупорядоченных списков, *и некоторые общие, которые не являются строго частью спецификации, например изолированные блоки кода. Множество ошибок, исключения для самых длинных документов. Считаю экспериментальным.

• нано- уценка: 1,9 КБ. Объем функций ограничен тем, что используется в большинстве документов; более надежен, чем микромаркдаун, но не идеален; использует собственный очень простой модульный тест. Достаточно надежный, но ломается во многих крайних случаях.

• mmd.js : 800 байт. Результат попытки сделать парсер минимально возможного размера, который все еще работал бы. Поддерживает небольшое подмножество; документ должен быть адаптирован для этого.

• markdown-js : 54 КБ (недоступно для загрузки в уменьшенном виде; вероятно, уменьшится до ~ 20 КБ). Выглядит довольно полно и включает тесты, но я не очень знаком с ним.

• meltdown : 41 КБ (недоступно для загрузки в уменьшенном виде; вероятно, уменьшится до ~ 15 КБ). плагин jQuery; Markdown Extra (таблицы, списки определений, сноски).

• unified.js : варьируется, 5–100 КБ. Система на основе плагинов для преобразования между HTML, уценкой и прозой. Размер файла зависит от того, какие плагины вам нужны (проверка орфографии, выделение синтаксиса, очистка ввода). Вероятно, используется больше на стороне сервера, чем на стороне клиента.

Текстиль

Вы можете найти, казалось бы, очень хорошую реализацию Textile на Javascript здесь и еще одну там (может быть, не так хорошо, но есть хорошая страница с примерами преобразования по мере ввода).

Примечание. В первой реализации, на которую я сделал ссылку, есть ошибка: горизонтальные полосы отображаются неправильно. Чтобы исправить это, вы можете добавить в файл следующий код.

for(i=0;i<lines.length;i++) {
    // Add code :Start
    if (lines[i].match(/\s*-{4,}\s*/)){
      html+="<hr/>\n";
      continue;
    }
    // Add code :End
    if (lines[i].indexOf("[") == 0) {continue;}
    //...

Я использую крошечный минималистичный скрипт - mmd.js , который поддерживает только подмножество возможностей Markdown, но это может быть все, что вам нужно в любом случае, поэтому этот скрипт размером менее 1 Кбайт великолепен и не будет излишним.

Поддерживаемые функции

• Заголовки #
• Цитаты >
• Упорядоченные списки 1
• Неупорядоченные списки *
• Абзацы
• Ссылки []()
• Картинки ![]()
• Встроенный акцент *
• Встроенный акцент **

Неподдерживаемые функции

• Ссылки и идентификаторы
• Экранирование символов Markdown
• Гнездование

Showdown легко использовать с jQuery или без него . Вот пример jQuery:

// See http://mathiasbynens.be/notes/showdown-javascript-jquery for a plain JavaScript version as well
$(function() {
 // When using more than one `textarea` on your page, change the following line to match the one you’re after
 var $textarea = $('textarea'),
     $preview = $('<div id="preview" />').insertAfter($textarea),
     converter = new Showdown.converter();
 $textarea.keyup(function() {
  $preview.html(converter.makeHtml($textarea.val()));
 }).trigger('keyup');
});

Ссылка Showdown Attacklab-Link не работает, поэтому используйте https://github.com/coreyti/showdown для ваших нужд преобразования :)

Это не касается всего запроса (это не редактор), но Textile-js - это библиотека рендеринга javascript: https://github.com/borgar/textile-js . Демонстрация доступна на http://borgar.github.io/textile-js/

Мне этот вопрос показался интригующим, поэтому я решил начать с чего-то (только теги замены strongи italicуценки). Потратив час на попытки разработать решение с использованием регулярных выражений, я сдался и получил следующее, которое, кажется, работает хорошо. Тем не менее, его, безусловно, можно оптимизировать, и я не уверен, насколько он будет устойчивым в реальном мире в этой форме:

function mdToHtml(str) {
    var tempStr = str;
    while(tempStr.indexOf("**") !== -1) {
        var firstPos = tempStr.indexOf("**");
        var nextPos = tempStr.indexOf("**",firstPos + 2);
        if(nextPos !== -1) {
            var innerTxt = tempStr.substring(firstPos + 2,nextPos);
            var strongified = '<strong>' + innerTxt + '</strong>';
            tempStr = tempStr.substring(0,firstPos) + strongified + tempStr.substring(nextPos + 2,tempStr.length);
        //get rid of unclosed '**'
        } else {
            tempStr = tempStr.replace('**','');
        }
    }
     while(tempStr.indexOf("*") !== -1) {
        var firstPos = tempStr.indexOf("*");
        var nextPos = tempStr.indexOf("*",firstPos + 1);
        if(nextPos !== -1) {
            var innerTxt = tempStr.substring(firstPos + 1,nextPos);
            var italicized = '<i>' + innerTxt + '</i>';
            tempStr = tempStr.substring(0,firstPos) + italicized + tempStr.substring(nextPos + 2,tempStr.length);
        //get rid of unclosed '*'
        } else {
            tempStr = tempStr.replace('*','');
        }
    }
    return tempStr;
}

Код теста:

    var s = "This would be *italicized* text and this would be **bold** text, This would be *italicized* text and this would be **bold** text, This would be *italicized* text and this would be **bold** text";
    alert(mdToHtml(s));

Вывод:

This would be <i>italicized</i>text and this would be <strong>bold</strong> text, This would be <i>italicized</i>text and this would be <strong>bold</strong> text, This would be <i>italicized</i>text and this would be <strong>bold</strong> text

РЕДАКТИРОВАТЬ: Новое в V 0.024 - Автоматическое удаление незакрытых тегов уценки

markdown-js - хороший парсер уценки javascript, активный проект с тестами.

Вы смотрели библиотеку Eclipse WikiText, которая является частью Mylyn. Он преобразует синтаксис многих вики в xhtml и xdocs / DITA. Выглядит круто.

http://help.eclipse.org/galileo/topic/org.eclipse.mylyn.wikitext.help.ui/help/Markup-Conversion.html

Кто-нибудь нашел решение проблемы HTML-> Textile? Вся наша текущая документация находится в формате M $ Word, и мы хотели бы перенести ее в Redmine Wiki для совместной поддержки. Мы не нашли ни одного инструмента для преобразования. Мы нашли расширение Open Office, которое создает текст в формате mediawiki, но Redmine Wiki использует подмножество текстиля.

Кто- нибудь знает инструмент , который преобразует К текстилем из MediaWiki, Word, XDocs или HTML?

Для текстиля:

Недавно я скомпилировал конвертер HTML в текстиль: https://github.com/cmroanirgo/to-textile

Для обратного Textile to HTML я использую и рекомендую https://github.com/borgar/textile-js , о котором уже упоминалось в других ответах.