Как я могу обернуть мою уценку в HTML-div?

Question

Я использую 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.

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

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

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

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

</div>

Answer 1

уценка

Для уценки это по замыслу. В разделе " Встроенный HTML " ссылки "Уценка":

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

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

В отличие от тегов HTML уровня блока, синтаксис Markdown обрабатывается внутри тегов уровня span.

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

CommonMark

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

<div>

*Emphasized* text.

</div>

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

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

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

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

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

Answer 2

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

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

Примечание: цитаты, как в 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.

Answer 3

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

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

Answer 4

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

Пытаться <DIV> вместо <div> и посмотрим, что получится.

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

Answer 5

В моем случае (на GitHub) проблема была решена, когда я добавил новую строку между тегами html и текстом уценки.

Answer 6

Глядя на документы для расширения помечены и изменяя 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);
});