How to Set an HTML Class Attribute in Markdown

How do I set an HTML class attribute in Markdown?

You can embed HTML in Markdown. Type literally what you want, with no indent.

<code class="prettyprint">
  code_line(1);
  // a code comment
  class More Code { }
</code>

For the specific case of syntax highlighting following the back ticks at the start of a fenced code block with the language works just about everywhere these days.

```js
code_line(1);
// a code comment
class MoreCode { }
```

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>

Adding a class attribute to a hyperlink in Markdown

You can't put a class into Markdown syntax. In most Markdown implementations you can embed HTML, so using your original HTML might work.

John Gruber (creator of Markdown) even does it this way:

http://daringfireball.net/projects/markdown/syntax.text

how to pass class attribute and value to markdown syntax

You can write HTML in Markdown, but you can't add things like classes and ids.

See this question or this question for more details.

Markdown - add class to list items

Markdown doesn't allow for CSS classes to be added as it is a text formatting language rather than a coding language. It's mostly used for rich text documents and the conversion to HTML is more of an extra ability rather than what it was built for.

You can still have HTML within your markdown document so something like this is possible

Heading
=======

Just a plain paragraph

<ul class="list-unstyled">
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li class="inner-class">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>

Alternatively, if you know the exact position of the list item you want to change, you can do it within css with pseudo classes

ul {  list-style: none;}ul li {  background: lightgrey;}ul li:last-child {  background: grey;}

<ul>  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li></ul>

Adding HTML attributes to a multi-line section of markdown

Kramdown gives you many options, which are explained in turn below.

As the Markdown rules explain:

Note that Markdown formatting syntax is not processed within
block-level HTML tags. E.g., you can’t use Markdown-style *emphasis*
inside an HTML block.

Use raw HTML

Of course, you can always use all raw HTML, which will work across all implementations. In fact, if you look at the source for the original Markdown rules, you can see that all of the headers are defined using raw HTML so that IDs can be assigned to each. Therefore, this should do the trick:

<h3 id="foo">Header</h3>
<h4 id="bar">Header2</h4>
<p class="baz">blah</p>

Of course, then you loose the benefits of writing (and reading) in Markdown. However, Kramdown provides many options to work around that.

parse_block_html

Kramdown provides the parse_block_html option which, when enabled allows Markdown processing within raw HTML blocks. However, the documentation for that option notes:

Since this is not wanted normally, the default is false. It is
normally better to selectively enable kramdown processing via the
markdown attribute.

markdown=1

The mention of "the markdown attribute" above is referring to a non-standard add-on to the Markdown syntax which Kramdown supports by default and documents in the HTML Blocks section of its documentation:

It is also possible to enable/disable syntax parsing on a tag per tag
basis using the markdown attribute:

• If an HTML tag has an attribute markdown="0", then the tag is parsed as raw HTML block.

• If an HTML tag has an attribute markdown="1", then the default mechanism for parsing syntax in this tag is used.

• If an HTML tag has an attribute markdown="block", then the content of the tag is parsed as block level elements.

• If an HTML tag has an attribute markdown="span", then the content of the tag is parsed as span level elements.

In your case, using markdown="1" should do the trick (although block should work as well).

<div id="X" markdown="1">

### Header

#### Header2

blah 

</div>

Attribute List Definitions

However, you don't need to fall back to raw HTML as Kramdown allows you to define IDs directly on headers and other elements using Attribute List Definitions.

### Header  {#foo)

#### Header2 {#bar}

blah
{: .baz}

The above Markdown would be converted to the following HTML:

<h3 id="foo">Header</h3>
<h4 id="bar">Header2</h4>
<p class="baz">blah</p>

auto_ids

Finally, Kramdown also includes support for an auto_ids option which, when enabled, adds auto-generated IDs to every header.

Adding CSS class to anchor link in markdown (Hugo)

Based on this answer here, we have:

As per the README 1 of Goldmark the Markdown processor that is
currently turned on by default in Hugo:

Currently only headings support attributes…

## heading ## {#id .className attrName=attrValue class="class1 class2"}
 
## heading {#id .className attrName=attrValue class="class1 class2"}

---

Related Topics