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

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

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

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

Ответы

Ответ 1

Для Markdown → HTML существует Showdown

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

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

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

Полный редактор, конечно, не совсем то, что вы просили; но они должны использовать какую-то функцию для преобразования кода 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, но его приложение должно быть легко интегрировано, -)

О Текстиле, кажется, немного сложнее найти что-нибудь полезное: - (

С другой стороны, HTML → Markdown, я думаю, что вещи могут быть немного сложнее...

Что я буду делать, так это хранить Markdown и HTML в моем хранилище данных приложений (база данных?) и использовать его для редактирования, а другой для рендеринга... Будет занимать больше места, но он кажется менее рискованным, чем "дешифрование" HTML...

Ответ 2

Textile

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

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

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;}
    //...

Ответ 3

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

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

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

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

Ссылки и идентификаторы
Скрытие символов Markdown
Вложение

Ответ 4

Легко использовать 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');
});

Ответ 5

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

Ответ 6

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

Ответ 7

Я подумал, что было бы целесообразно составить список здесь решений JavaScript там и их уменьшенный (несжатый) размер и сильные/слабые стороны. Сжатый размер для мини-кода будет составлять около 50% несжатого размера. Что касается этого, я рекомендую pagedown (8 КБ), если вам нужна всесторонняя поддержка, потому что пользователи будут редактировать документы на вашем сайте, и я рекомендую использовать собственную прокрутку (1.3 KB), если вы представляете информацию в веб-приложении, которое не редактируется пользователем; делает правильную вещь для подавляющего большинства случаев, будучи чрезвычайно маленьким. Я считаю, что практически все они являются лицензией MIT.

npm также имеет широкий спектр сценариев для этой цели в разных состояниях качества.

showdown: 28 КБ. В основном золотой стандарт; это основа для pagedown.
pagedown: 8KB. Это то, что обладает возможностями StackExchange, поэтому вы можете сами убедиться, какие функции он поддерживает. Он довольно всеобъемлющий и чрезвычайно надежный. В дополнение к 8KB-конвертеру script он также предлагает скрипты редактора и sanitizer, оба из которых также использует StackExchange.
markdown-it: 104KB. Выполняет спецификацию CommonMark; поддерживает расширения синтаксиса. Быстро; на самом деле может быть столь же надежным, как вскрытие, но очень большим. Является основой для http://dillinger.io/.
marked: 19 КБ. Всестороннее; протестирован против пакета unit test; поддерживает пользовательские правила lexer.
micromarkdown: 5KB. Поддерживает множество функций, но не хватает некоторых распространенных, таких как неупорядоченные списки, используя * и некоторые общие, которые не являются строго частью спецификации, например, защищенных блоков кода. Многие ошибки, исключая исключения из большинства более длинных документов. Я считаю это экспериментальным.
nano-markdown: 1.9KB. Область действия ограничена вещами, используемыми большинством документов; более надежный, чем микромаркетинг, но не идеальный; использует свой собственный базовый unit test. Разумно устойчив, но ломается во многих случаях.
drawdown: 1.3KB. Полное раскрытие, я написал это. Более широкая область возможностей и более надежная, чем нано-уценка, в то время как меньше; обрабатывает большинство, но не все спецификации CommonMark. Неправильно обрабатывает несколько краевых случаев; не рекомендуется для редактируемых пользователем документов, но очень полезно для представления информации в веб-приложениях. Нет встроенного HTML.
mmd.js: 800 байт. Результатом является попытка сделать минимально возможный парсер, который все еще функционирует. Поддерживает небольшое подмножество; документ должен быть адаптирован для него.
markdown-js: 54 КБ (недоступно для загрузки, уменьшено, вероятно, будет уменьшено до ~ 20 КБ). Выглядит довольно всеобъемлющим и включает тесты, но я не очень хорошо знаком с ним.
meltdown: 41 КБ (недоступно для загрузки, уменьшено, вероятно, будет уменьшено до ~ 15 КБ). Плагин jQuery; Markdown Extra (таблицы, списки определений, сноски).

Ответ 8

Я нашел этот вопрос интригующим, поэтому решил что-то начать (заменяет теги markdown 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

EDIT: Новое в V 0.024 - Автоматическое удаление скрытых меток разметки

Ответ 9

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

Ответ 10

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

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

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

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

Ответ 11

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

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

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