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

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

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

Edit: другой способ сказать, что я ищу Javascript реализация Rails'textilize() и markdown() текст хелперы

11 ответов


для Markdown - > HTML, есть разборки

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

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

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


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

на самом деле, если вы внимательно посмотрите на 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...


текстильной

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

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

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

  • заголовки #
  • Blockquotes >
  • упорядоченные списки 1
  • списки неупорядоченный *
  • пункты
  • ссылки []()
  • изображения ![]()
  • встроенный упор *
  • встроенный упор **

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

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

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

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

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

  • pagedown: 8KB. Это то, что powers StackExchange, поэтому вы можете сами увидеть, какие функции он поддерживает. Оно довольно всесторонне и весьма робастно. В дополнение к сценарию конвертера 8KB он также предлагает скрипты редактора и дезинфицирующего средства, оба из которых также использует StackExchange.

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

  • С пометкой: 19 КБ. Всесторонний; протестирован против unit test suite; поддерживает пользовательские правила lexer.

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

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

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

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

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

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


легко используйте разборки с или без 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 метки markdown). Потратив час на разработку решения с использованием регулярных выражений, я сдался и закончил следующим, что, похоже, работает хорошо. Тем не менее, он, безусловно, может быть дополнительно оптимизирован, и я не уверен, насколько он будет устойчив к реальному миру в этой форме:

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

изменить: New in V 0.024-автоматическое удаление незамкнутых тегов markdown


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


вы смотрели на библиотеку Eclipse WikiText, которая является частью Mylyn. Он будет конвертировать из многих синтаксиса wiki в 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

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