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

Question

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

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

Редактировать: Другой способ выразить это в том, что я ищу Javascript-реализацию Rails 'textilize() и markdown() текстовых помощников

Answer 1

для уценки -> HTML, есть вскрытие

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

Ну, похоже, он использует 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, но его довольно легко интегрировать в ваше приложение; -)

Что касается текстиля, кажется, что найти что-то полезное немного сложнее: - (

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

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

Answer 2

Текстиль

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

Answer 3

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

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

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

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

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

Answer 4

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

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

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

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

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

• с маркировкой : 19 КБ. Всестороннее; проверено на соответствие модульному тестированию; поддерживает пользовательские правила лексера.

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

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

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

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

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

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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

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

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