Dupe: How do I set an HTML class attribute in Markdown?
No, Markdown's syntax can't. You can set ID values with Markdown Extra through.
You can use regular HTML if you like, and add the attribute markdown="1"
to continue markdown-conversion within the HTML element. This requires Markdown Extra though.
<p class='specialParagraph' markdown='1'>
**Another paragraph** which allows *Markdown* within it.
</p>
<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>
Raw HTML is actually perfectly valid in markdown. For instance:
Normal *markdown* paragraph.
<p class="myclass">This paragraph has a class "myclass"</p>
Just make sure the HTML is not inside a code block.
If your environment is JavaScript, use markdown-it along with the plugin 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>
jsfiddle
Note: Be aware of the security aspect when allowing attributes in your markdown!
Disclaimer, I'm the author of markdown-it-attrs.
If your flavour of markdown is kramdown, then you can set css class like this:
{:.nameofclass}
paragraph is here
Then in you css file, you set the css like this:
.nameofclass{
color: #000;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With