CSS 我可以使用 Markdown 在段落上定义类名吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1058933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I define a class name on paragraph using Markdown?
提问by Ryan Florence
Can I define a class name on paragraph using Markdown? If so, how?
我可以使用 Markdown 在段落上定义类名吗？如果是这样，如何？
采纳答案by Sampson
Dupe: How do I set an HTML class attribute in Markdown?
Dupe：如何在 Markdown 中设置 HTML 类属性？
Natively? No. But...
本土的？不是，但...
No, Markdown's syntax can't. You can set ID valueswith Markdown Extra through.
不，Markdown 的语法不能。您可以通过 Markdown Extra设置 ID 值。
You can use regular HTMLif you like, and add the attribute markdown="1"to continue markdown-conversion within the HTML element. This requires Markdown Extrathough.
如果愿意，您可以使用常规 HTML，并添加属性markdown="1"以在 HTML 元素中继续降价转换。不过，这需要Markdown Extra。
<p class='specialParagraph' markdown='1'>
**Another paragraph** which allows *Markdown* within it.
</p>
Possible Solution: (Untested and intended for <blockquote>)
可能的解决方案：（未经测试且适用于<blockquote>）
I found the following online:
我在网上找到了以下内容：
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>
回答by Matt Bridges
Raw HTML is actually perfectly valid in markdown. For instance:
原始 HTML 在 Markdown 中实际上是完全有效的。例如：
Normal *markdown* paragraph.
<p class="myclass">This paragraph has a class "myclass"</p>
Just make sure the HTML is not inside a code block.
只需确保 HTML 不在代码块内。
回答by arve0
If your environment is JavaScript, use markdown-italong with the plugin markdown-it-attrs:
如果您的环境是 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);
Output
输出
<p class="className" id="id" and="attributes">paragraph</p>
Note:Be aware of the security aspect when allowing attributes in your markdown!
注意：在 Markdown 中允许属性时请注意安全方面！
Disclaimer, I'm the author of markdown-it-attrs.
免责声明，我是 markdown-it-attrs 的作者。
回答by Yarin
Markdown shouldhave this capability, but it doesn't. Instead, you're stuck with language-specific Markdown supersets:
Markdown应该有这个能力，但它没有。相反，你被特定语言的 Markdown 超集困住了：
PHP:Markdown Extra
Ruby:Kramdown, Maruku
But if you need to abide by true Markdown syntax, you're stuck with inserting raw HTML, which is less ideal.
但是，如果您需要遵守真正的 Markdown 语法，则只能插入原始 HTML，这不太理想。
回答by franc
If your flavour of markdown is kramdown, then you can set css class like this:
如果您的降价风格是 kramdown，那么您可以像这样设置 css 类：
{:.nameofclass}
paragraph is here
Then in you css file, you set the css like this:
然后在你的 css 文件中，你像这样设置 css：
.nameofclass{
color: #000;
}
回答by midzer
Here is a working example for kramdown following @Yarin's answer.
以下是@Yarin 回答后的 kramdown 工作示例。
A simple paragraph with a class attribute.
{:.yourClass}
Reference: https://kramdown.gettalong.org/syntax.html#inline-attribute-lists
参考：https: //kramdown.gettalong.org/syntax.html#inline-attribute-lists
回答by Sherwood Botsford
As mentioned above markdown itself leaves you hanging on this. However, depending on the implementation there are some workarounds:
如上所述，降价本身会让你坚持这一点。但是，根据实现，有一些解决方法：
At least one version of MD considers <div>to be a block level tag but <DIV>is just text. All broswers however are case insensitive. This allows you to keep the syntax simplicity of MD, at the cost of adding div container tags.
至少有一个版本的 MD 被认为<div>是块级标签，但<DIV>只是文本。但是，所有浏览器都不区分大小写。这允许您以添加 div 容器标签为代价保持 MD 的语法简单性。
So the following is a workaround:
因此，以下是一种解决方法：
<DIV class=foo>
Paragraphs here inherit class foo from above.
</div>
The downside of this is that the output code has <p>tags wrapping the <div>lines (both of them, the first because it's not and the second because it doesn't match. No browser fusses about this that I've found, but the code won't validate. MD tends to put in spare <p>tags anyway.
这样做的缺点是输出代码有<p>包装<div>行的标签（它们两个，第一个是因为它不匹配，第二个是因为它不匹配。没有浏览器对我发现的这一点大惊小怪，但代码不会） t 验证。<p>无论如何，MD 倾向于放入备用标签。
Several versions of markdown implement the convention <tag markdown="1">in which case MD will do the normal processing inside the tag. The above example becomes:
几个版本的 Markdown 实现了约定，<tag markdown="1">在这种情况下，MD 将在标签内部进行正常处理。上面的例子变成：
<div markdown="1" class=foo>
Paragraphs here inherit class foo from above.
</div>
The current version of Fletcher's MultiMarkdownallows attributes to follow the link if using referenced links.
如果使用引用链接，当前版本的 Fletcher 的MultiMarkdown允许属性跟随链接。
回答by Khalil Gharbaoui
In slim markdownuse this:
在瘦降价中使用这个：
markdown:
{:.cool-heading}
#Some Title
Translates to:
翻译成：
<h1 class="cool-heading">Some Title</h1>
回答by Seraphendipity
It should also be mentioned that <span>tags allow inside them -- block-level items negate MD natively inside them unless you configure them not to do so, but in-line styles natively allow MD within them. As such, I often do something akin to...
还应该提到<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.
I am not 100% sure if this is universal but seems to be the case in all MD editors I've used.
我不是 100% 确定这是否通用，但在我使用过的所有 MD 编辑器中似乎都是这种情况。
回答by Tintin81
If you just need a selector for Javascript purposes (like I did), you might just want to use a hrefattribute instead of a classor id:
如果您只需要一个用于 Javascript 目的的选择器（就像我所做的那样），您可能只想使用href属性而不是 a classor id：
Just do this:
只需这样做：
<a href="#foo">Link</a>
Markdown will not ignore or remove the hrefattribute like it does with classes and ids.
Markdown 不会href像处理类和 ID 那样忽略或删除属性。
So in your Javascript or jQuery you can then do:
因此，在您的 Javascript 或 jQuery 中，您可以执行以下操作：
$('a[href$="foo"]').click(function(event) {
... do your thing ...
event.preventDefault();
});
At least this works in my version of Markdown...
至少这适用于我的 Markdown 版本......
