Как я могу поместить мою уценку в HTML-div?

Я использую MarkEd, который реализует уценку GitHub.

У меня есть рабочая уценка:

## Test heading
a paragraph.
## second heading
another paragraph

Что создает:

<h2 id="test-heading">Test heading</h2>
<p>a paragraph.</p>
<h2 id="second-heading">second heading</h2>
<p>another paragraph</p>

Я хотел бы обернуть эту секцию уценки в div, например:

<div class="blog-post">
## Test heading
a paragraph.
## second heading
another paragraph
</div>

Однако это возвращает следующий HTML:

<div class="blog-post">
## Test heading
a paragraph.
## second heading
another paragraph
</div>

Например, в HTML отсутствует метка, буквально '## Test heading'.

Как я могу правильно обернуть мою уценку в div?

Я нашел следующее обходное решение, однако оно является уродливым, а не фактическим исправлением:

<div class="blog-post">
<div></div>

## Test heading
a paragraph.
## second heading
another paragraph

</div>

Ответы

Ответ 1

Markdown

Для Markdown, это по дизайну. Из раздела Inline HTML ссылки Markdown:

Обратите внимание, что синтаксис форматирования Markdown не обрабатывается в блочных HTML-тегах. Например, вы не можете использовать стиль Markdown в блоке HTML.

Но он явно разрешен для тегов на уровне уровня:

В отличие от HTML-тегов на уровне блоков, синтаксис Markdown обрабатывается в тегах на уровне диапазона.

Итак, в зависимости от вашего прецедента, вы можете избежать использования span вместо div.

CommonMark

Если библиотека, которую вы используете, реализует CommonMark, вам повезло. Пример 108 и 109 спецификации что если вы сохраняете пустую строку между блоком HTML и кодом уценки, содержимое будет анализироваться как Markdown:

<div>

*Emphasized* text.

</div>

должен работать, а следующее не должно:

<div>
*Emphasized* text.
</div>

И снова, в соответствии с тем же разделом в ссылке, некоторые реализации распознают дополнительный атрибут markdown=1 в теге HTML, чтобы включить синтаксический анализ Markdown внутри него.

Хотя он пока не работает в StackOverflow:

Тестирование ** Markdown ** внутри красно-фонового div.

Ответ 2

Markdown Extra необходим для работы форматирования Markdown внутри блоков HTML, пожалуйста, проверьте приведенную здесь документацию → https://michelf.ca/projects/php-markdown/extra/

Markdown Extra дает вам возможность поместить текст в формате Markdown внутри любой тег уровня блока. Вы делаете это, добавляя атрибут уценки к тег со значением 1 - который дает markdown = "1"

Ответ 3

GitHub Pages поддерживает атрибут markdown="1" для анализа уценки внутри элементов HTML, например

<div class="tip" markdown="1">Have **fun!**</div>

Примечание. По состоянию на 2019/03 год это не работает на github.com, только на страницах GitHub.

Примечание. Кавычки, как в markdown="1", не требуются в HTML5, но если вы не используете кавычки (markdown=1), GitHub не распознает его как HTML. Кроме того, поддержка глючит прямо сейчас. Скорее всего, вы получите неправильный вывод, если ваш HTML-элемент больше одного абзаца. Например, из-за ошибок я не смог встроить список Markdown в div.

Если вы оказались в среде, в которой markdown="1" не работает, но span работает, другой вариант - использовать <span style="display:block"> чтобы классы уровня блока были совместимы с ним, например,

<span style="display:block" class="note">It **works!**</span>

Совет: <span class="note"></span> короче, чем <div class="note" markdown="1"></div>, поэтому, если вы управляете CSS, вы можете использовать <span> и добавить display: block; на ваш CSS.

Ответ 4

Последний вариант:

Некоторые библиотеки могут быть чувствительны к регистру.

Попробуйте <DIV> вместо <div> и посмотрите, что произойдет.

У Markdownsharp есть эта особенность - хотя в StackOverflow они все равно удаляют все DIV, так что не ожидайте, что это сработает здесь.

Ответ 5

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

const marked = require('marked');
const renderer = new marked.Renderer();
renderer.html = (mixedContent) => mixedContent.replace(/[^<>]+?(?=<)/g, (match) => {
    const tokens = marked.lexer(match);
    return marked.parser(tokens);
});

редактировать

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

const marked = require('marked');
const renderer = new marked.Renderer();
renderer.html = (mixedContent) => mixedContent.replace(/\n\n[^<>]+?\n\n(?=<)/g, (match) => {
    const tokens = marked.lexer(match);
    return marked.parser(tokens);
});