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


84

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

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

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

Ответы:


98

Для 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. ..


5
Ссылки вроде изменились. Демо находится на softwaremaniacs.org/playground/showdown-highlight, а исходный код можно найти на softwaremaniacs.org/playground/showdown-highlight/showdown.js
Джон Дж. Камиллери,

1
@John спасибо за ваш комментарий; Я отредактировал свой ответ, чтобы изменить ссылку ;-)
Паскаль МАРТИН

К сожалению, эта библиотека не работает для ссылок на основе уценки, иначе говоря: некоторый текст не конвертируется. Кажется, что в нем отсутствует какой-то синтаксис, что прискорбно. Чего еще не хватает?
Oddman

25

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


Спасибо за это, действительно полезно! Я просто использовал вскрытие и fetch(с небольшим сканированием "Это так Fetch" Джейка Арчибальда ), чтобы прочитать файлы Markdown на моих статических HTML-страницах и преобразовать их в HTML. Sweet :-)
Дэйв Эверитт

@DaveEveritt отлично - не забудьте включить полифилл выборки, если вы не ориентируетесь на фиксированный браузер. Это будет работать для ваших целей и крошечное: github.com/developit/unfetch
Адам Леггетт

Согласен, спасибо за ссылку, хотя я думаю, что сейчас это нужно только нескольким браузерам - Samsung поддерживает в новой версии, и я больше не стремлюсь к IE, хотя я знаю, что многим разработчикам необходимо… caniuse.com/#feat = fetch
Дэйв Эверитт

Есть ли у вас планы по добавлению функций <table> при просадке ? Я пробовал добавить это сам, но это выходит за рамки моего понимания. ; (
jack

@AdamLeggett Спасибо!
jack

13

Текстиль

Вы можете найти, казалось бы, очень хорошую реализацию 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;}
    //...

9

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

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

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

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

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

Это действительно здорово!
Arthur Araújo

Можно ли установить mmd.js с помощью npm install? Очень хотелось бы попробовать это в своем проекте.
Судхир Шакья

1
adamvleggett.github.io/drawdown не намного больше, но поддерживает гораздо больше 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');
});


3

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


На мой взгляд, эта библиотека неправильно интерпретирует нумерованные списки (с использованием #).
Дэвид

2

Мне этот вопрос показался интригующим, поэтому я решил начать с чего-то (только теги замены 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 - Автоматическое удаление незакрытых тегов уценки



0

Вы смотрели библиотеку 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?



Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.