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

Question

我可以使用 Markdown 在段落上定义类名吗？ 如果是这样，怎么办？

Answer 1

欺骗：如何在 Markdown 中设置 HTML 类属性？

---

本地？ 不，但是……

不，Markdown 的语法不能。 您可以通过 Markdown Extra设置 ID 值。

如果您愿意，可以使用常规 HTML，并添加属性 markdown="1" 继续降价转换HTML 元素内。 不过，这需要 Markdown Extra。

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

可能的解决方案：（未经测试，用于

）

我在网上找到了以下内容：

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>

Answer 2

原始 HTML 实际上在 Markdown 中是完全有效的。 例如：

Normal *markdown* paragraph.

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

只需确保 HTML 不在代码块内即可。

Answer 3

如果您的环境是 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 中允许属性时请注意安全问题！

免责声明，我是 markdown-it-attrs 的作者。

Answer 4

如果你的 markdown 风格是 kramdown，那么你可以像这样设置 css 类：

{:.nameofclass}
paragraph is here

然后在你的 css 文件中，你可以这样设置 css：

.nameofclass{
   color: #000;
  }

Answer 5

Markdown应该具有此功能，但它没有。 相反，您只能使用特定于语言的 Markdown 超集：

PHP: Markdown额外
Ruby： Kramdown、Maruku

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

Answer 6

这是一个遵循 @Yarin 答案的 kramdown 的工作示例。

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

参考： https://kramdown.gettalong.org/syntax.html#inline-attribute -列表

Answer 7

正如上面提到的，降价本身让你坚持这一点。 但是，根据实现的不同，有一些解决方法：

至少有一个版本的 MD 认为

是块级标记，但

只是文本。 然而，所有浏览器都不区分大小写。 这允许您保持 MD 的语法简单性，但代价是添加 div 容器标签。

因此，以下是一种解决方法：

<DIV class=foo>

  Paragraphs here inherit class foo from above.

</div>

这样做的缺点是输出代码具有包裹

行的

标记（两者，第一个因为它不是，第二个因为它不匹配，我发现没有浏览器对此大惊小怪，但 MD 往往会放入备用的

标签。无论如何，

Markdown 的多个版本都实现了 约定，在这种情况下，MD 将在标记内进行正常处理。 上面的示例变为：

<div markdown="1" class=foo>

  Paragraphs here inherit class foo from above.

</div>

Fletcher 的当前版本 < em>MultiMarkdown 如果使用引用链接，则允许属性跟随链接。

Answer 8

还应该提到的是 标签允许在它们内部 - 块级项目在它们内部本身就否定 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 编辑器中似乎都是这种情况。

Answer 9

在 slim markdown 中使用：

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

翻译为：

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

Answer 10

如果您只需要用于 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 版本中有效......