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

112

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

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

Ваш Ответ

10   ответов
1

В тонкой уценке это:

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

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

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

вы можете просто использоватьhref атрибут вместоclass или жеid:

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

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

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

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

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

    ... do your thing ...

    event.preventDefault();
});

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

3

вы можете установить класс css следующим образом:

{:.nameofclass}
paragraph is here

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

.nameofclass{
   color: #000;
  }
0

текстильный вместо:

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>
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>

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

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

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

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

Я понятия не имел об этом. Хорошо работает сMarkdown Preview (Sublime 3) который использует встроенныйPython Markdown синтаксический анализатор.
65

ер:

Normal *markdown* paragraph.

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

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

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

уценки-он вместе с плагиномуценки-он-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);

Output

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

jsfiddle

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

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

65

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

Natively? No. But...

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

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

<p class='specialParagraph' markdown='1'>
**Another paragraph** which allows *Markdown* within it.
</p>
Possible Solution: (Untested and intended for <blockquote>)

Я нашел следующее онлайн:

Function

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

Result

<blockquote id="id" class="className">
    <p>This is the blockquote</p>
</blockquote>
(Протестировано с парсером MaRuKu) вы можете использовать просто & quot; {. Class-name} & quot; в начале строки текста, чтобы эффект P тег. Часть id, однако, игнорируется.
7

should имеют эту возможность, но это не так. Вместо этого вы застряли с надстройками Markdown для конкретных языков:

PHP: Уценка Экстра
Ruby: Kramdown, Maruku

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

Похожие вопросы