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

Question

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

Answer 1

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>

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-it-attrs的作者.

Answer 4

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

PHP: 降价额外的
红宝石: Kramdown,Maruku

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

Answer 5

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

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

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

Answer 6

如果您的markdown风格是kramdown，则可以这样设置CSS类：

{:.nameofclass}
paragraph is here

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

.nameofclass{
   color: #000;
  }