Can I define a class name on paragraph using Markdown?

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>

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


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.

Tags:

Css

Markdown

Recent Posts