Markdown и 1С:Предприятие. Визуализация разметки MD в поле HTML документа

Программирование - Практика программирования

57
Пример работы с документами Markdown (MD) на платформе 1С:Предприятие 8. Используется поле HTML документа, подключение JavaScript библиотеки преобразования разметки Markdown в HTML.

Популярный формат разметки текстовых документов Markdown (MD) широко используется при оформлении документации, пояснительных записок и других сопровождающих текстовых документов. Команды разметки просты и легко запоминаются. Markdown удобен тем, что документацию можно сразу писать вставляя команды разметки, читаемость plain текста от этого не ухудшается. Посоветую хорошую шпаргалку по разметке MD, сам ей иногда пользуюсь.

Пример документа с разметкой MD
 
 

Мне Markdown понадобился, когда встал вопрос о ведении истории изменений changelog в тиражной обработке. История изменений в обработке ведется в макете текстового документа и выше приведен пример, как выглядит эта история. Практически сразу возникла задача отображения этой истории пользователю обработки. Решение я искал в готовых конверторах MD to HTML на платформе 1С:Предприятие, но поиски не привели к результату. Помощь пришла с другой стороны. На хакатоне IsThisDesign я поделился проблемой и коллеги дали мне правильную идею, которая сработала.

Несколько слов о хакатоне IsThisDesign
 
 

Визуализация разметки Markdown

Идея, положенная в данный проект, это применить библиотеку конвертации Markdown в HTML на JavaScript и воспользоваться полем HTML документа для исполнения этого скрипта.

Пример обработки, которая реализует идею, доступен во вложенных файлах. Этот проект на GitHub

Библиотека конвертации Markdown в HTML

Не мудря взял самую популярную на GitHub JavaScript библиотеку Showdown, которая имеет более 6900 звездочек. Файл скрипта этой библиотеки showdown.js располагается в папке проекта showdown/dist/

Шаблон обработки для тестирования

Для тестирования была доработана обработка из проекта 1C_HTML_JavaScript_Test

Хранение скриптов

Скрипты библиотеки Showdown и функции вызова методов библиотеки хранятся в макетах обработки как текстовые документы.

Здесь макет:

  • Showdown - скрипт библиотеки Showdown
  • MD_Convert - скрипт привязанный к кнопке HTML документа и реализующий вызов методов библиотеки
  • STYLY - CSS разметка

Вызов методов библиотеки

HTML документ имеет следующую размету:

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="GENERATOR" content="MSHTML 11.00.9600.19003">
    <base href="/redirect.php?url=djhjb25maWc6Ly9jMWQzZTdkMi03MTUwLTQ3ZmMtOGRjYy0xNThlMjBlNTE5OTUvbWRvYmplY3QvaWQ2MTI5YzI1Ni1iMWVjLTRlMTYtOTUxMi0xNDljNjhkMzdjYWUvOGViNGZhZDEtMWZhNi00MDNlLTk3MGYtMmMxMmRiYjQzZTIz">
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style" />
</head>

<body>

    <textarea id="sourceTA" rows="10" cols="82"></textarea>
    <hr/>
    <button id="runBtn" onClick="MD_Convert()">Конвертировать MD в HTML</button>
    <hr/>
    <div id="targetDiv"></div>
    
    <script src="Showdown"></script>
    <script src="MD_Convert"></script>
</body>

</html>

На кнопку runBtn повешен скрипт, который вызывает методы библиотеки и результат работы вставляет в элемент <DIV>

function MD_Convert() {
    var text = document.getElementById('sourceTA').value,
        target = document.getElementById('targetDiv'),
        converter = new showdown.Converter(),
        html = converter.makeHtml(text);

    target.innerHTML = html;
}

 

57

Скачать файлы

Наименование Файл Версия Размер
Markdown и 1С:Предприятие. Визуализация разметки MD в поле HTML документа.:
.epf 59,86Kb
12.06.18
5
.epf 59,86Kb 5 Скачать

См. также

Комментарии
Избранное Подписка Сортировка: Древо
1. 1c-intelligence 5661 13.06.18 07:44 Сейчас в теме
Как раз такая задача возникла - готовый markdown в 1С показывать. Спасибо за материал!
Evil Beaver; Scorpion4eg; infosoft-v; +3 Ответить
14. infosoft-v 283 13.06.18 18:18 Сейчас в теме
(1) Буду рад, если пригодиться.
2. olegtymko 123 13.06.18 11:33 Сейчас в теме
Интересно наблюдать на результат одного из обсуждений второго дня isthisdesign=) Однозначно плюс!
Evil Beaver; artbear; infosoft-v; +3 Ответить
3. Infactum 265 13.06.18 15:02 Сейчас в теме
Мне Markdown понадобился, когда встал вопрос о ведении истории изменений changelog в тиражной обработке. История изменений в обработке ведется в макете текстового документа и выше приведен пример, как выглядит эта история.

Обработка может и окажется кому-то полезной, но в вашем случае подход не выглядит верным.
Зачем городить огород с обработкой конвертации, если у Showdown есть CLI утилита? А далее.. раз у вас тиражная обработка, то она должна быть в гите. Должен быть настроен процесс ее "сборки" и тестирования. Один из этапов сборки как раз будет заключаться в том, чтобы MD файл с историей отрендерить в html, а потом уже этот html как макет запихнуть в обработку.
kuntashov; artbear; +2 Ответить
16. infosoft-v 283 13.06.18 18:29 Сейчас в теме
(3) Егор, спасибо за идею. Подумаю над ней. Пока вижу неудобный для меня момент, это наличие отдельного от обработки MD файла с историей. Все хранить в обработке, пока, мне кажется более удобным.
17. Infactum 265 13.06.18 18:38 Сейчас в теме
(16) Файл вовсе не отдельный. Это часть репозитория будет. Можно и вовсе никакой файл не хранить, а брать информацию из описания релиз коммита.
Хранить механизм отрисовки в обработке/конфигурации можно, если он необходим самой обработке/конфигурации для непосредственного исполнения её задач. В вашем случае вы отдаете пользователю совершенно ненужный мусор. Вместо крохотной html странички - огромная (относительно, конечно) библиотека и механизм работы с ней.
infosoft-v; +1 Ответить
13. BlizD 550 13.06.18 15:55 Сейчас в теме
Спасибо, за статью.

Решали такую же задачу в конфигурации infostart.ru/public/552480/
Правда использовали другую библиотеку github.com/chjj/marked (16к звезд у нее)

Если кому интересно, то можно посмотреть вот в этом методе:
узОбщийМодульСервер.ПолучитьHTMLMarkdown(ТекстСодержания);

P.S. какой то глюк форума, не могу указать ссылки в разметке (не добавляется сообщение с ними).
Прикрепленные файлы:
DrAku1a; botokash; Denchik1388; JohnyDeath; Evil Beaver; infosoft-v; +6 Ответить
15. infosoft-v 283 13.06.18 18:25 Сейчас в теме
(13) Спасибо за уточнение. Библиотека, которую вы рекомендуете компактнее той, которую использую я (5000 строк против 1500).
Попробую применить ее. Место лишним не бывает :-)
19. infosoft-v 283 02.07.18 22:12 Сейчас в теме
(13) Антон, попробовал библиотеку, которую вы рекомендовали. Отличная библиотека. Спасибо за совет.
20. BlizD 550 03.07.18 08:27 Сейчас в теме
(19)
Евгений, спасибо. Рад, что помог.
18. nomadon 310 14.06.18 15:18 Сейчас в теме
Оставьте свое сообщение