1 В head страницы добавляем:
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2/webcomponents-loader.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@1/src/zero-md.min.js"></script>Можно добавить в head всех страниц через редактирование секции «Вставка кода в head» которая находится по пути: Мои сайты> Мой сайт>Настройки сайта>Еще>HTML-КОД ДЛЯ ВСТАВКИ ВНУТРЬ HEAD или по прямой ссылке: https://tilda.cc/projects/editheadcode/?projectid=АЙДИ_ТВОЕГО_ПРОЕКТА
2 Добавляем html-block на страницу...
либо с текстом в markdown:
<zero-md>
<template>
<xmp>
# `This` is my [markdown](https://example.com)
H~~ell~~o *W*o**r**l***d***!
</xmp>
</template>
</zero-md>либо с ссылкой на markdown файл на внешнем ресурсе:
<zero-md src="https://www.example.com/my-markdown.md"></zero-md>Markdown файлы удобно хранить на github.com, либо в проекте/репозитории либо в гистах.
Если нужно скрыть файл от публичного доступа, то можно создать приватный репозиторий, положить туда файл, открыть его, и кликнуть по кнопке RAW и из аддрессной строки скопировать ссылку с токеном для доступа, ну и вставить ее в src="..." для тега <zero-md> ;)
Ссылки:
Если нужно больше чем поддерживает базовый синтаксис Markdown, то можно использовать версию zero-md от automician, которая поддерживает чуть больше функционала (какого? - смотри разделы ниже).
Принцип работы тот же что и с официальной версией. Отличие в установке кода в секцию «Вставка кода в head»:
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2/webcomponents-loader.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/gh/automician/zero-md@4e5b78b9df818dc440d2cc7352d82ab20d3a8b95/build/zero-md.min.js"></script>или более полный пример с дополнительными настройками:
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2/webcomponents-loader.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/gh/automician/zero-md@4e5b78b9df818dc440d2cc7352d82ab20d3a8b95/build/zero-md.min.js"></script>
<script>
window.ZeroMd = {
config: {
baseUrl: 'https://raw.githubusercontent.com/KnowledgeExpert/selenidejs/master/docs/',
anchorIdsToLowerCase: false,
indentInsideTocByPixels: 20
}
};
</script>Просто добавь в любом месте статьи на markdown [TOC] и в результате он превратится в список оглавлений встречающихся в статье со ссылками соответственно.
<script>
window.ZeroMd = {
config: {
indentInsideTocByPixels: 20
}
};
</script>
По умолчанию, если не прописать – будет равно 40
<script>
window.ZeroMd = {
config: {
anchorIdsToLowerCase: false
}
};
</script>
По умолвчанию все айди в оглавлениях, по которым потом можно ссылаться на эти оглавления через [текст оглавления](#id-оглавления) – будут мелким шрифвтом. Что бы это отключить используется в конфиге опция: anchorIdsToLowerCase: false
Допустим у нас есть оглавление в маркдаун:
## Раздел о чем то важномИ мы хотим сослаться на него из другого раздела:
## Раздел о чем то важном
Бла бла бла
## Еще один раздел
Вот мы упоминали о [важном](#раздел-о-чем-то-важном) ранее...В таком случае нам нужно указать как ссылку на идентификатор (id) c «текстом оглавления мелким шрифтом с дефисами вместо любого символа который не является валидной частью слова».
Часто удобней, самому указать значение этого «айди», и это можно сделать так:
## Раздел о чем то важном {#important}
Бла бла бла
## Еще один раздел
Вот мы упоминали о [важном](#important) ранее...Допустим мы хотим отобразить на нашем сайте на тильда – документацию к библиотеке SelenideJs. Доки живут по адресу: https://github.com/KnowledgeExpert/selenidejs/tree/master/docs
Там сейчас три статьи с документацией в формате markdown:
- CONTRIBUTING.md
- TUTORIAL_JS.md
- TUTORIAL_TS.md
Если мы хотим добавить их на сайт с тильдой, нам придется использовать прямые ссылки на них соответственно:
- https://raw.githubusercontent.com/KnowledgeExpert/selenidejs/master/docs/CONTRIBUTING.md
- https://raw.githubusercontent.com/KnowledgeExpert/selenidejs/master/docs/TUTORIAL_JS.md
- https://raw.githubusercontent.com/KnowledgeExpert/selenidejs/master/docs/TUTORIAL_TS.md
то есть создать на тильда-странице (или страницах) html-блоки с полными длиннющими адрессами:
<zero-md src="
https://raw.githubusercontent.com/KnowledgeExpert/selenidejs/master/docs/CONTRIBUTING.md
"></zero-md><zero-md src="
https://raw.githubusercontent.com/KnowledgeExpert/selenidejs/master/docs/TUTORIAL_JS.md
"></zero-md><zero-md src="
https://raw.githubusercontent.com/KnowledgeExpert/selenidejs/master/docs/TUTORIAL_TS.md
"></zero-md>Так много кода будет сложней поддерживать. Если что-то поменяется и наши доку переедут на другой адрес, придется редактировать все блоки...
Это решается добавлением в секцию «Вставка кода в head» следующего:
<script>
window.ZeroMd = {
config: {
baseUrl: 'https://raw.githubusercontent.com/KnowledgeExpert/selenidejs/master/docs/'
}
};
</script>Теперь можно оставить только:
<zero-md src="
CONTRIBUTING.md
"></zero-md><zero-md src="
TUTORIAL_JS.md
"></zero-md><zero-md src="
TUTORIAL_TS.md
"></zero-md>В качестве исключения из общего правила, "полный URL" для определенный статей, все еще будет работать. То есть, либо вставляем "краткую относительную ссылку", либо "полную абсолютную ссылку".
Удобно сохранять исходники под системой контроля версий - Git и сохранять на каком то git-сервере, например Github. (если это только один файл, то можно и просто сохранить его на gist.github.com)
Если не нужно "скрывать" исходники, то прекрасно подойдет "публичный репозиторий" на github.com Если нужно "скрывать" исходники хоть как-то, то вместо github.com лучше использовать приватные репозитории на gitlab.com и получать доступ к страницам в нем по токену с доступом только на чтение. Но этот способ у меня пока не завелся, хотя по докам гитлаба - он должен работать.
Быстро познакомится с гитом можно по моему видео на 50 минут тут или нагуглить похожее. Или еще лучше - пройти бесплатный курс на hexlet.io на 6 часов: Системы контроля версий (GIT)
Спасибо большое!