LINUX.ORG.RU
Форум — Web-development  

Как использовать markdown-it?

 , ,


0

1

Вот есть такой язык разметки Commonmark, ставящий перед собой цель унифицировать синтаксис Маркдауна. И есть для него парсер, который называется markdown-it.

Один из авторов этого парсера - Vit, возможно и второй автор тоже общается здесь, но по аватарке я его не знаю.

Вопрос - а как этим парсером пользоваться?

То есть, вопрос можно разбить на две части.

# 1

Можно ли преобразовать файл из маркдауна в HTML через командную строку?

Если использовать просто стандартный парсер, то есть Commonmark.js, то это делается так:

commonmark input.md > output.html

А как быть, если я хочу чтобы преобразование было сделано через markdown-it?

# 2

Допустим я хочу иметь такой HTML-файл, внутри которого я буду в текстовом редакторе писать маркдаун-разметку, а при запуске в браузере, этот файл показывал бы уже отформатированный HTML. Сейчас для этого я просто копирую код с официальной демо-страницы, элементу <textarea> задаю свойство display: none через CSS, и готово. Но, может быть, есть более умный и красивый способ?

Deleted

Последнее исправление: myLogin (всего исправлений: 1)

# 1

https://github.com/markdown-it/markdown-it/blob/6.0.0/package.json#L17

npm install -g markdown-it
markdown-it -h


Но вообще имей в виду, что парсер точили как библиотеку, а не как утилиту. Поэтому фичи CLI очень обкоцанные, внешних расширений там нет.

# 2

Там есть билды для браузера, можно воткнуть в страницу код, чтобы при открытии пробегал по блокам `.markdown` и конвертил их в html.

Это если индексация поисковиками пофик.

Vit ★★★★★
()

А что там парсить то? 


console.log(
`
  textarea: i am textarea
  div: i am 
    multiistring
      div
  fuck: i am fuck
`
 .replace(/(\w+?):([\s\S]*?)(?=\w+?:|$)/gi, "<$1>$2</$1>")
)
Или это parser of markdown from down to down (with love)?

Предупреждать надо.

filequest
()
Ответ на: комментарий от Vit

Индексация поисковиками - значения не имеет. Я его хочу использовать просто на десктопе, для личных небольших документов.

Под сборками для браузера ты вот это имел в виду?

browser (CDN):
- jsDeliver CDN
- cdnjs.com CDN

Окей, тогда я сделал вот такую тестовую страницу, но она почему-то не парсится:


<!doctype html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/markdown-it/6.0.0/markdown-it.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/6.0.0/markdown-it.js"></script>
    </head>
    <body>

        <div class="markdown">
            # Header
        </div>

    </body>
</html>
Deleted
()
Ответ на: комментарий от Deleted

Ты загрузил библиотеки, но не вызвал их. Извини, но писать за тебя код я не буду.

Загугли «markdown editor» Возможно в твоем случае так будет проще.

Vit ★★★★★
()
Последнее исправление: Vit (всего исправлений: 1)
Ответ на: комментарий от filequest

Ананiмус, ты же ушел отсюда, громко хлопнув дверью. Зачем вернулся?

Deleted
()
Ответ на: комментарий от Vit

Спасибо, теперь буду искать как эти библиотеки вызывать.

Самое сложное, зачастую - это не решить проблему, а найти ее и понятным языком сформулировать. И в этом смысле ты мне уже здорово помог.

Отличный проект, надеюсь он принесет авторам дополнительные деньги и известность.

Deleted
()
Ответ на: комментарий от Deleted

Хотя, если кто-то все-таки поможет сэкономить время и покажет как вызвать эти библиотеки, будет очень круто.

Deleted
()
Ответ на: комментарий от Deleted

Там доки есть. + сорцы демки. Разобрать более чем реально.

Если в трекер пишут вопросы и я вижу, что человек реально читал доки и пытался что-то сделать - помощь оказывается всегда. Но совсем с нуля в стиле «научите программировать» - просто нет времени, сорри.

Vit ★★★★★
()
Ответ на: комментарий от Vit

Я с уважением отношусь к чужому времени, поэтому, так как ты уже ответил выше, что сниппет за спасибо писать не будешь, я и не ожидал этого ))

Я имел в виду что если кто-то другой этим проектом здесь пользуется, то может быть, этот человек напишет. Ну, мало ли.

Deleted
()
Ответ на: комментарий от Deleted 
var md = new markdownit();
var markdownElements = document.getElementsByClassName("markdown");
var element;
var markdownPadding = '';
var innerHtml;
for (var i = 0; i < markdownElements.length; i++) {
  element = markdownElements[i];
  innerHtml = element.innerHTML;
  if (markdownPadding = innerHtml.match(/^\s+/)) {
    innerHtml = innerHtml.replace(new RegExp(markdownPadding, "g"), "\n");
  }
  element.innerHTML = md.render(innerHtml);
}

в конец страницы добавь, тестил только в хроме, ну и очевидно можно как то более по русски сделать, но думать лень.

zz ★★★★
()
Ответ на: комментарий от zz

Спасибо, все работает. Теперь разбираться будет еще проще!

Deleted
()
14 июля 2016 г.
Ответ на: комментарий от Vit

Огромное спасибо за markdown-it.

Прикрутил к своему проекту, но мучает вопрос, как все таки предотвратить вывод emoji, обычное экранирование не работает, а брать выражение в обратную кавычку не совсем то, что нужно.

surefire ★★★
()
Ответ на: комментарий от surefire

Заэскейпить так просто нельзя, т.к. подмена происходит слишком поздно, когда `\` уже обработали и вырезали. Типа, пробежаться по текстовым нодам и дернуть регулярку намного проще, чем проверять emoji на этапе токенизации.

Приведи примеры коллизий. В тикете по ссылке было что-то не совсем здоровое, поэтому никто не заморачивался.

Vit ★★★★★
()
Ответ на: комментарий от Vit

Я хочу текстом написать смайл без преобразования :о в emoji на выходе. 

\:o
так не работает и всё равно преобразует в смайл.

`:o`

так оборачивает смайл в <code>:o</code> и меняет стиль.

А я просто хочу текст, а не картинку на выходе. Как этого добиться?

surefire ★★★
()
Ответ на: комментарий от surefire

Я хочу текстом написать смайл без преобразования :о в emoji на выходе.

На простое «хочу» есть простой ответ - «так нельзя». Чтобы можно было эскейпить, надо серьезно преписывать плагин.

Либо переопредели алиасы, чтобы конфликтные последовательности вроде ":o" вообще не использовались.

У меня на форуме в редакторе есть галочка «отключить смайлеги»

Vit ★★★★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Web-development