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


139

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


54
Я не знаю более точного способа задать вопрос: «Могу ли я определить имя класса в абзаце с помощью Markdown?» Вы забыли прочитать название?
Райан Флоренс

[Предвзято] Если вы оказались пользователем Node, пожалуйста, проверьте Rho . Хотя он не на 100% совместим с Markdown, вы все равно можете найти его очень привлекательным, поскольку в его основе лежит функция, которая вам требуется.
Воплощение

Ответы:


76

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";
}

уценка

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

результат

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

2
(Протестировано с парсером MaRuKu) вы можете использовать просто "{.class-name}" в начале строки текста, чтобы произвести эффект тега P. Однако часть id игнорируется.
Дэвид Хатчисон

75

Сырой HTML на самом деле идеально подходит для уценки. Например:

Normal *markdown* paragraph.

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

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


31
Проблема с этим подходом состоит в том, что внутренний текст больше не является уценкой.
akauppi

@akauppi Да; это можно обойти с помощью тега span, хотя.
Seraphendipity

13

Если ваша среда 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.


Уценка Это Скалы !!
Оле

8

У Markdown должна быть такая возможность, но это не так. Вместо этого вы застряли с языком надстроек Markdown:

PHP: Markdown Extra
Ruby: Крамдаун , Маруку

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


7

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

{:.nameofclass}
paragraph is here

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

.nameofclass{
   color: #000;
  }


3

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

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

Таким образом, следующее решение:

<DIV class=foo>

  Paragraphs here inherit class foo from above.

</div>

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

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

<div markdown="1" class=foo>

  Paragraphs here inherit class foo from above.

</div>

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


Примечание: пожалуйста, убедитесь, что вы используете кодовые маркеры; Большая часть этого поста была скрыта, поскольку была интерпретирована как HTML-теги.
Лоуренс Дол

Спасибо - взлом DIV - единственный ответ, который, кажется, работает с pegdown / cegdown. (Pegdown также расширяется с помощью плагинов, так что я мог бы сделать это в долгосрочной перспективе)
Korny

2

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

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

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

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

1

Также следует отметить, что <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, которые я использовал.


0

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

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

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

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

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

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

    ... do your thing ...

    event.preventDefault();
});

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.