how to pass class attribute and value to markdown

问题:

Im using python markdown for my django project, when i have the value

#/usr/bin/env python
print "this is converted to html code block"

the output is

<pre><code>    
#/usr/bin/env python
print "this is converted to html code block"
</code><pre>

Now my question is that how can i pass class attribute and value to code elem. Sample:

#i should be using some markdown syntax below
[class="python"]
#/usr/bin/env python
print "this is converted to html code block"

and then the output here

<pre><code class="python">    
#/usr/bin/env python
print "this is converted to html code block"
</code><pre>

is that possible? and how?

回答1:

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.

回答2:

If you're using Github Flavored Markdown you can use this

```python
    print "I am python!"
```

It will add a "lang-python" class. I needed this for highlightjs.

See here

回答3:

You could pass the resulting HTML through some other filter that finds and parses the #! line and adds the Python class based on it. lxml would be a good way to do it. I'm not sure how you'd go about arranging that with Django though.

回答4:

This is my solution. First, the Markdown, indented so that it will become a code block:

    |*|-language-css-|*|
    .code {
      color: red;
    }

Notice the |*|- and -|*|. I'm using these symbols just to make sure I have something unique to parse next.

Then, a little bit of JavaScript (jQuery for now, I'll write it in straight JS to optimize):

$('pre code').each(function() {

    var code = $(this).html(),
        the_code = code.split('-|*|')[1].substring(1),
        language = code.split('|*|-')[1].split('-|*|')[0];

    $(this).html(the_code).addClass(language);

});

The above JavaScript, as you can see, will take whatever was inside the |*|- and -|*| and add it as a class on the CODE element. Modify as suits your needs.

The result is this:

<pre>
    <code class="language-css">
        .code {
            color: red;
        }
    </code>
</pre>