Can I define a class name on paragraph using Markd

问题:

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

回答1:

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>

回答2:

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.

回答3:

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.

回答4:

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.

回答5:

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

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:

<div markdown="1" class=foo>

  Paragraphs here inherit class foo from above.

</div>

The current version of Fletcher's MultiMarkdown allows attributes to follow the link if using referenced links.

回答6:

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

回答7:

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;
  }

回答8:

In slim markdown this:

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

Translates to:

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

回答9:

Not in Markdown. Use Textile instead:

This is a standard paragraph.

p(a-class). This is a paragraph with a class.

creates the following html:

<p>Note that this paragraph has no class.</p>

<p class="a-class">This is a paragraph with a class.</p>

回答10:

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