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


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

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

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

11 76

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

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

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

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

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

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

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

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

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

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

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

  • С пометкой: 19KB. Всесторонний; протестировано против набора модульных тестов; поддерживает пользовательские правила lexer.

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

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

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

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

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

  • meltdown: 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

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

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

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

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