How do I set an HTML class attribute in Markdown?

HtmlMarkdown

Html Problem Overview


If I have some Markdown like

## My Title

A paragraph of content here.

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

and more text to follow...

How can I set a class on the <code> block that's generated in the middle there? I want to have it output

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

But I can't seem to set it. I do not have control over the Markdown code being run, only over the content.

Html Solutions


Solution 1 - Html

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

Solution 2 - Html

Though not answering the question exactly. You can use a different render too like Maruku or Kramdown:

## My Title

A paragraph of content here.
~~~
code_line(1);
// a code comment
class MoreCode { }
~~~
{: .prettyprint}

and more text to follow...

Output (tested with haml & kramdown):

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

Kramdown syntax: http://kramdown.rubyforge.org/quickref.html#block-attributes

Solution 3 - Html

Markdown has an extension ([attr_list.py][1]) which allows you to use Maruku's {: .classname} syntax.

[1]: http://web.archive.org/web/20130315222028/https://pythonhosted.org/Markdown/extensions/attr_list.html "site-packages/markdown/extensions/attr_list.py"

Solution 4 - Html

Markdown Extra supports class and id attributes using curly braces. See: https://michelf.ca/projects/php-markdown/extra/#spe-attr

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJames A. RosenView Question on Stackoverflow
Solution 1 - HtmlPatrick McElhaneyView Answer on Stackoverflow
Solution 2 - HtmlPablo Olmos de Aguilera C.View Answer on Stackoverflow
Solution 3 - HtmlPsionView Answer on Stackoverflow
Solution 4 - HtmljeffmcneillView Answer on Stackoverflow