Can I define a class name on paragraph using Markdown?

Can I define a class name on paragraph using Markdown? If so, how?

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

##Natively? No. But...

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>

##Possible Solution: (Untested and intended for <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;
  }

Markdown should have this capability, but it doesn't. Instead, you're stuck with language-specific Markdown supersets:

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.

Here is a working example for kramdown following @Yarin's answer.

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

Reference: https://kramdown.gettalong.org/syntax.html#inline-attribute-lists

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.

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

<div markdown="1" class=foo>

  Paragraphs here inherit class foo from above.

</div>

In slim markdown use this:

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

Translates to:

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

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

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.

If you just need a selector for Javascript purposes (like I did), you might just want to use a href attribute instead of a class or id:

Just do this:

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

Markdown will not ignore or remove the href attribute like it does with classes and ids.

So in your Javascript or jQuery you can then do:

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

	event.preventDefault();
});

At least this works in my version of Markdown...