Question

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

Answer 1

Dupe：How do I set an HTML class attribute in Markdown?

本身？不，但是......

不，Markdown的语法不能。你可以通过Markdown Extra来set ID values。

如果您愿意，可以use regular 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>

Answer 2

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

Normal *markdown* paragraph.

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

确保HTML不在代码块中。

Answer 3

Markdown 应具备此功能，但事实并非如此。相反，你会遇到特定于语言的Markdown超集：

PHP： Markdown Extra
Ruby： Kramdown，Maruku

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

Answer 4

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

Answer 5

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

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

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

Answer 6

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

{:.nameofclass}
paragraph is here

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

.nameofclass{
   color: #000;
  }

Answer 7

如上所述，降价本身会让你不知所措。但是，根据实现情况，有一些解决方法：

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

以下是解决方法：

<DIV class=foo>

  Paragraphs here inherit class foo from above.

</div>

这样做的缺点是输出代码有<p>个标记包裹<div>行（两者都是，第一个因为它不是，第二个因为它不匹配。没有浏览器融合关于我发现的这个，但代码不会验证。无论如何，MD倾向于放入备用的<p>标签。

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

<div markdown="1" class=foo>

  Paragraphs here inherit class foo from above.

</div>

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

Answer 8

在超薄降价中，这是

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

翻译为：

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

Answer 9

还应该提到<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编辑器中似乎都是这种情况。

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版本......

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

10 个答案:

本身？不，但是......

可能的解决方案:(未经测试且适用于<blockquote>）

可能的解决方案:(未经测试且适用于`<blockquote>`）