Могу ли я определить имя класса в абзаце с помощью Markdown?

Можно ли определить имя класса в абзаце с помощью Markdown? Если да, то как?

Ответ 1

Dupe: Как установить атрибут класса HTML в Markdown?

Врожденная? Нет, но...

Нет, синтаксис Markdown не может. Вы можете установить значения идентификатора с помощью Markdown Extra.

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

<p class='specialParagraph' markdown='1'>
**Another paragraph** which allows *Markdown* within it.
</p>

Возможное решение: (не проверено и предназначено для `<blockquote>`)

В Интернете я нашел следующее:

Функция

function _DoBlockQuotes_callback($matches) {

    ...cut...

    //add id and class details...
    $id = $class = '';
    if(preg_match_all('/\{(?:([#.][-_:a-zA-Z0-9 ]+)+)\}/',$bq,$matches)) {
        foreach ($matches[1] as $match) {
            if($match[0]=='#') $type = 'id';
            else $type = 'class';
            ${$type} = ' '.$type.'="'.trim($match,'.# ').'"';
        }
        foreach ($matches[0] as $match) {
            $bq = str_replace($match,'',$bq);
        }
    }

    return _HashBlock(
        "<blockquote{$id}{$class}>\n$bq\n</blockquote>"
    ) . "\n\n";
}

Markdown

>{.className}{#id}This is the blockquote

Результат

<blockquote id="id" class="className">
    <p>This is the blockquote</p>
</blockquote>

Ответ 2

Необработанный HTML действительно отлично действует в уценке. Например:

Normal *markdown* paragraph.

<p class="myclass">This paragraph has a class "myclass"</p>

Просто убедитесь, что HTML не находится внутри блока кода.

Ответ 3

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

PHP: Markdown Extra
Ruby: Kramdown, Maruku

Но если вам нужно соблюдать истинный синтаксис Markdown, вы застряли с вставкой необработанного HTML, который менее идеален.

Ответ 4

Если в вашей среде используется JavaScript, используйте markdown-it вместе с плагином markdown-it-attrs:

const md = require('markdown-it')();
const attrs = require('markdown-it-attrs');
md.use(attrs);

const src = 'paragraph {.className #id and=attributes}';

// render
let res = md.render(src);
console.log(res);

Выход

<p class="className" id="id" and="attributes">paragraph</p>

jsfiddle

Примечание: Помните об аспекте безопасности при разрешении атрибутов в уценке!

Отказ от ответственности, я автор markdown-it-attrs.

Ответ 5

Вот рабочий пример для kramdown после ответа @Yarin.

A simple paragraph with a class attribute.
{:.yourClass}

Ссылка: https://kramdown.gettalong.org/syntax.html#inline-attribute-lists

Ответ 6

Если ваш вид уценки - kramdown, вы можете установить класс css следующим образом:

{:.nameofclass}
paragraph is here

Затем в файле CSS вы устанавливаете CSS следующим образом:

.nameofclass{
   color: #000;
  }

Ответ 7

Как уже упоминалось выше, сама уценка оставляет вас нависшей над этим. Однако в зависимости от реализации есть некоторые обходные пути:

Как минимум одна версия MD считает, что <div> является тегом уровня блока, но <div> является просто текстом. Однако все броузеры не чувствительны к регистру. Это позволяет сохранить простоту синтаксиса MD за счет добавления тегов контейнера div.

Итак, обходной путь:

<DIV class=foo>

  Paragraphs here inherit class foo from above.

</div>

Недостатком этого является то, что выходной код имеет теги <p>, обертывающие строки <div> (оба из них, первые, потому что это не так, а второе, потому что они не совпадают). 's нашел, но код не будет проверяться. MD имеет тенденцию помещать запасные теги <p> в любом случае.

Несколько версий markdown реализуют соглашение <tag markdown="1">, и в этом случае MD будет выполнять обычную обработку внутри тега. Вышеприведенный пример:

<div markdown="1" class=foo>

  Paragraphs here inherit class foo from above.

</div>

Текущая версия Fletcher MultiMarkdown позволяет атрибутам следовать ссылке, если ссылаются ссылки.

Ответ 8

В тонкой уценке используйте это:

markdown:
  {:.cool-heading}
  #Some Title

переводится как:

<h1 class="cool-heading">Some Title</h1>

Ответ 9

Не в Markdown. Вместо этого используйте Текстиль:

This is a standard paragraph.

p(a-class). This is a paragraph with a class.

создает следующий html:

<p>Note that this paragraph has no class.</p>

<p class="a-class">This is a paragraph with a class.</p>

Ответ 10

Если вам просто нужен селектор для целей Javascript (как я это сделал), вы можете просто использовать атрибут href вместо class или id:

Просто сделайте это:

<a href="#foo">Link</a>

Markdown не будет игнорировать или удалять атрибут href, как это происходит с классами и идентификаторами.

Таким образом, в вашем Javascript или JQuery вы можете сделать следующее:

$('a[href$="foo"]').click(function(event) {

    ... do your thing ...

    event.preventDefault();
});

По крайней мере, это работает в моей версии Markdown...

Ответ 11

Также следует отметить, что теги <span> позволяют внутри них - элементы уровня блока изначально сводят к нулю MD внутри них, если только вы не настроите их так, но встроенные стили изначально разрешат MD внутри них. Поэтому я часто делаю что-то похожее на...

This is a superfluous paragraph thing.

<span class="class-red">And thus I delve into my topic, Lorem ipsum lollipop bubblegum.</span>

And thus with that I conclude.

Я не уверен на 100%, является ли это универсальным, но, похоже, имеет место во всех редакторах MD, которые я использовал.