Как конвертировать уценку в HTML в Javascript, используя Remarkable

Markdown — это один из наиболее часто используемых языков разметки в Интернете. Это отлично подходит для подмножества задач, в основном постов в блогах и комментариев. С помощью нескольких дополнительных символов Markdown делает быстрое и красивое форматирование документов. Markdown может быть преобразован в HTML во многих языках программирования, конечно, мы не можем забыть наш любимый Javascript. Если вы хотите легко преобразовать уценку в HTML с помощью Javascript в браузере, Node.js или другой среде выполнения Javascript, мы рекомендуем вам использовать Remarkable.

Замечательный парсер уценки сделан правильно. Его действительно быстро и легко расширить, поскольку он не платит за скорость за свою гибкость, потому что он написан в мономорфном стиле и эффективно использует встроенные кэши JIT. Он имеет настраиваемый синтаксис, это означает, что вы можете добавлять новые правила и даже заменять существующие. Следует Спецификации CommonMark.

Требования

Чтобы легко преобразовать уценку в HTML в Javascript, вам понадобится, как уже упоминалось ранее, замечательно. Вы можете скачать библиотеку с помощью NPM:

npm install remarkable --save

Или с беседкой:

bower install remarkable --save

Или, если вы не используете менеджер пакетов, используйте CDN (или скачайте скрипт из репозитория в Github здесь):

Для получения дополнительной информации о библиотеке, посетите Официальный репозиторий Github здесь.

Использование Remarkable

Замечательный может быть легко в самом простом выражении в следующем примере:

// If you use require (Node etc), require as first the module and then create the instance
var Remarkable = require('remarkable');
// If you're in the browser, the Remarkable class is already available in the window
var md = new Remarkable();
// Outputs: Remarkable rulezz!
console.log(md.render('# Remarkable rulezz!'));

Замечательно настраивается для работы так же, как Github ароматизированная уценка, однако теги HTML запрещены. Вы можете настроить Remarkable в конструкторе или с помощью метода set.

Заметка

Если вы беспокоитесь о производительности вашего приложения, для достижения максимальной производительности не изменяйте Remarkable экземпляр на лету. Если вам нужно несколько конфигураций, создайте несколько экземпляров и инициализируйте каждый из них конфигурацией, которая идеально подходит для этого экземпляра.

Кастомизация замечательная в конструкторе

Как уже упоминалось, вы можете изменить параметры замечательные через конструктор:

// Actual default values
var md = new Remarkable({
html: false, // Enable HTML tags in source
xhtmlOut: false, // Use '/' to close single tags (
)
breaks: false, // Convert '\n' in paragraphs into
linkify: false, // Autoconvert URL-like text to links
// Enable some language-neutral replacement + quotes beautification
typographer: false,
// Double + single quotes replacement pairs, when typographer enabled,
// and smartquotes on. Set doubles to '«»' for Russian, '„“' for German.
quotes: '“”‘’'
});
console.log(md.render('# Remarkable rulezz!'));

Настройка замечательно через заданный метод

В качестве альтернативы вы можете изменить свойства на лету, используя метод set:

var md = new Remarkable();
md.set({
html: true,
breaks: true
});

Подсветка синтаксиса кода

По умолчанию замечательные фрагменты кода процесса, такие как github, например, следующая уценка:

# Remarkable rulezz!
```javascript
alert(window.location.host)
```

Будет преобразован в следующий HTML-код:

Remarkable rulezz!
alert(window.location.host)
[/ NOEDIT]
Что облегчает подсветку кода с помощью плагинов, таких как Prism.js или же HighlightJS. Однако, если вы хотите напрямую вернуть выделенную разметку (код, уже отформатированный с помощью диапазонов выделения и т. Д.), Вы можете использовать функцию выделения, которая позволяет настроить способ обработки строки кода (эта функция особенно полезна на сервере. сторона, например, NodeJS). В следующем примере показано, как напрямую выделить код с помощью HighlightJS:
Заметка
Выделить следует вернуть экранированный HTML или », если исходная строка не изменилась.
var md = new Remarkable({
// Modify the generated HTML by highlighting the code directly
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(lang, str).value;
} catch (err) {}
}
try {
return hljs.highlightAuto(str).value;
} catch (err) {}
return ''; // use external default escaping
}
});
// rest of your code
Который с примером уценки должен генерировать следующий HTML:
Remarkable rulezz!
alert(window.location.host)
[/ NOEDIT]
Довольно легко, верно?
Использование плагинов
Замечательно позволяет использовать плагины и даже создавать свои собственные плагины. Чтобы зарегистрировать их в замечательном просто, используйте use метод:
var md = new Remarkable();
md.use(plugin1)
.use(plugin2, opts)
.use(plugin3);
Например, чтобы добавить довольно замечательный плагин (использовал предварительную разметку с помощью Remarkable с использованием пользовательских правил рендеринга) вы можете просто использовать следующий код:
var prettify = require('pretty-remarkable');
var Remarkable = require('remarkable');
var md = new Remarkable();
// register the plugin
md.use(prettify);
// use
var result = md.render('\n\n\n# foo\n\n\nbar\n# baz');
//=> '# foo\n\nbar\n\n# baz'