How to Define a Class Name on Paragraph Using Markdown

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>

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 { }
```

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

Attach class to :markdown paragraph in Haml?

The short answer appears to be: no. This is a Markdown issue, not a HAML issue.

You can do it though just by using HTML directly in the markdown block:

:markdown
  <p class="note">
    some more HTML
  </p>

But you can't stick markdown inside the tags, because everthing in there is interpreted as HTML and not Markdown. There may be extensions that allow you to add classes like this, but it's apparently not possible natively.

How to define class selector in a Jekyll liquid tag?

With the help of @kargware, I found a semi-hacky way to make it work. You can capture the content and then replace the <p> with <p class='class-selector-name'> like so:

<p>
{% capture my_post_excerpt %}{{post.excerpt | truncatewords: 40 }}{% endcapture %}
{% assign my_post_excerpt = my_post_excerpt | replace: "<p>", "<p class='post-excerpt'>" %}
{{ my_post_excerpt }}
</p>

This produces the following HTML in the generated files:

<p>
<p class='post-card-excerpt'>This is the content of the post's excerpt blah blah</p>
</p>

and the CSS styling gets applied normally :)

If there is a more correct way to do this, I'd love to know it!

How to add class attribute for table element which parsedown gives?

After I read the source code of Parsedown, I find a solution.

In blockTable() method:

change this:

        $Block = array(
            'alignments' => $alignments,
            'identified' => true,
            'element' => array(
                'name' => 'table',
                'handler' => 'elements'
            ),
        );

to:

        $Block = array(
            'alignments' => $alignments,
            'identified' => true,
            'element' => array(
                'name' => 'table',
                'handler' => 'elements',
                'attributes' => [       //+
                    "class" => "table"  //+
                ]                       //+
            ),
        );

And it will output table element with class="table".

Finally, I created a new class which extends Parsedown, and override that blockTable method with my own implementation.

How can I style a pseudo-element as the title of a paragraph?

A crazy idea using shape-outside. The trick is to use the before for the title where you apply float and after for the icon having position:absolute then the shape-outside will create a particular shape in order to simulate the float behaviour around the icon.

main {
  width: 50%;
  display: block;
  margin: auto;
  text-align:justify;
}

p.note {
  border: 3px solid red;
  border-radius: 3px;
  padding: 1em;
  position: relative;
}

p.note::after {
  margin: auto 0 0.5em 0.5em;
  position:absolute;
  top: 1em;
  right: 0.5em;
}


p.note[title]::before {
  content: attr(title);
  display:block;
  height:3.5em;
  float:right;
  width:100%;
  text-align:center;
  font-weight: bold;
  shape-outside:polygon(0 0,100% 0,100% 100%,calc(100% - 3em) 100%,calc(100% - 3em) calc(100% - 2em),0 calc(100% - 2em));
  /* To illustrate the shape */
  background:
    linear-gradient(rgba(255,255,0,0.3) 0 0) top/100% calc(100% - 2em) no-repeat,
    linear-gradient(rgba(255,255,0,0.3) 0 0) bottom right/3em 3em no-repeat;
  border:1px solid rgba(0,0,0,0.2);
   /**/
}

.icon::after {
  font-size: 2em;
  content: "@";
}

.icon:not([title])::after {
  display:none;
}

.icon:not([title])::before {
  font-size: 2em;
  content: "@";
  margin: auto 0 0.5em 0.5em;
  float:right;
}

<main>

  <p class="note icon" title="This is a title">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem quidem non placeat quibusdam velit, dicta adipisci saepe magnam fuga debitis qui, minima, eius error laboriosam distinctio eos natus et!
  </p>

</main>

<main>

  <p class="note icon" >
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem quidem non placeat quibusdam velit, dicta adipisci saepe magnam fuga debitis qui, minima, eius error laboriosam distinctio eos natus et!
  </p>

</main>

<span style="color:blue">some *blue* text</span>.

Some Markdown text with <span style="color:blue">some *blue* text</span>.

<p>Some Markdown text with <span style="color:blue">some <em>blue</em> text</span>.</p>