我可以用 Markdown 在段落上定义一个类名吗？

我可以用 Markdown 在段落上定义一个类名吗? 如果可以，怎样定义？

125309 次浏览
小开

原始 HTML 实际上是完全有效的，例如:

Normal *markdown* paragraph.


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

只要确保 HTML 不在代码块中。

小开
最佳答案

骗局: 如何在 Markdown 中设置 HTML 类属性？

本地的? 不，但是..。

不，Markdown 的语法不能，你可以通过 设置 ID 值和 Markdown Ultra。

如果愿意，可以使用 使用常规的 HTML，并添加属性 markdown="1"来继续在 HTML 元素中进行标记转换。但这需要 低价特价。

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

Markdown 应该有这个能力，但是它没有。相反，你被特定语言的 Markdown 超集所困扰:

PHP: < a href = “ http://michelf.ca/Projects/PHP-Markdown/plus/# spe-attr”> Markdown Ultra
鲁比: Kramdown，Maruku

但是如果您需要遵守真正的 Markdown 语法，那么就只能插入原始的 HTML，这不太理想。

小开

正如上面提到的标记本身会让你在这个问题上纠缠不休。然而，根据实现的不同，还是有一些变通方法:

至少有一个版本的 MD 认为 <div>是块级标记，但是 <DIV>只是文本。但是所有的浏览器都不区分大小写。这使您可以保持 MD 的语法简单性，代价是添加 div 容器标记。

因此，下面是一个变通方案:

<DIV class=foo>


Paragraphs here inherit class foo from above.


</div>

这样做的缺点是输出代码包含 <div>行的 <p>标记(两者都包含，第一个是因为它不是，第二个是因为它不匹配。我发现没有浏览器对此大惊小怪，但是代码无法验证。总之，医学博士倾向于放在备用 <p>标签反正。

有几个版本的 markdown 实现了约定 <tag markdown="1">，在这种情况下，MD 将在标记中执行正常的处理。上面的例子就是:

<div markdown="1" class=foo>


Paragraphs here inherit class foo from above.


</div>

当前版本的 Fletcher 的 多重降价允许属性跟随链接，如果使用引用的链接。

小开

如果您的环境是 JavaScript，那么使用 降价和插件 降价促销:

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

注意: 在您的标记中允许属性时要注意安全方面！

免责声明，我是降价促销的作者。

小开

这里是一个工作的例子 kramdown 下面@Yarin 的答案。

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

参考资料: https://kramdown.gettalong.org/syntax.html#inline-attribute-lists

小开

如果你想降价，那么你可以这样设置 css 类:

{:.nameofclass}
paragraph is here

然后在你的 css 文件中，你像这样设置 css:

.nameofclass{
color: #000;
}
小开

如果您只是需要一个用于 Javascript 目的的选择器(就像我一样) ，那么您可能只需要使用一个 href属性，而不是 class或 id:

照我说的做:

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

Markdown 不会像处理类和 id 那样忽略或删除 href属性。

所以在你的 Javascript 或者 jQuery 中你可以这样做:

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


... do your thing ...


event.preventDefault();
});

至少这在我的降价版本中有效。

小开

在 减价中使用:

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

翻译过来就是:

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

还应该提到的是，<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 编辑我已经使用的情况。


提交答案