148

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

4

10 回答 10

83

Dupe：如何在 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>

可能的解决方案：（未经测试并用于<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>
于 2009-06-29T15:32:18.057 回答
82

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

Normal *markdown* paragraph.

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

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

于 2009-06-29T15:30:41.367 回答
19

如果您的环境是 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 的作者。

于 2016-08-29T20:51:09.363 回答
10

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

{:.nameofclass}
paragraph is here

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

.nameofclass{
   color: #000;
  }
于 2018-04-06T16:41:51.797 回答
8

Markdown应该有这个能力，但它没有。相反，您会遇到特定语言的 Markdown 超集：

PHP: Markdown Extra
Ruby: Kramdown , Maruku

但是如果你需要遵守真正的 Markdown 语法，你就会被插入原始的 HTML 所困，这是不太理想的。

于 2013-12-02T16:52:14.063 回答
6

这是@Yarin 回答后kramdown 的一个工作示例。

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

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

于 2017-10-08T10:02:20.340 回答
3

如上所述，降价本身会让你坚持下去。但是，根据实施情况，有一些解决方法：

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

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

<DIV class=foo>

  Paragraphs here inherit class foo from above.

</div>

这样做的缺点是输出代码有<p>包装<div>行的标签（它们都有标签，第一个是因为它不匹配，第二个是因为它不匹配。我发现没有浏览器对此大惊小怪，但代码不会t validate. 无论如何，MD 倾向于放入备用<p>标签。

几个版本的 markdown 实现了约定<tag markdown="1">，在这种情况下 MD 将在标签内进行正常处理。上面的例子变成：

<div markdown="1" class=foo>

  Paragraphs here inherit class foo from above.

</div>

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

于 2014-01-25T22:23:29.477 回答
2

在苗条的降价中使用这个：

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

转换为：

<h1 class="cool-heading">Some Title</h1>
于 2018-07-17T12:10:51.763 回答
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 编辑器中都是如此。

于 2019-10-17T23:23:35.453 回答
0

如果您只需要一个用于 Javascript 目的的选择器（就像我所做的那样），您可能只想使用href属性而不是 aclass或id：

只需这样做：

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

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

因此，在您的 Javascript 或 jQuery 中，您可以执行以下操作：

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

    ... do your thing ...

    event.preventDefault();
});

至少这在我的 Markdown 版本中有效......

于 2018-06-07T18:12:56.620 回答