Using reStructuredText to add some HTML with custom "id" and "class" attributes

Question

Using rsStructuredText to generate HTML, I am trying to wrap a

paragraph with an extra div element. The must contain an "id" attribute with a value I assign. Also, the

must have a "class" attribute with "editable" value.

This is what I have so far:

.. raw:: html 

   <div id="an_identifier">

.. class:: editable                                                                 

   paragraph content

.. raw:: html

   </div>

This is the output:

<div id="an_identifier">
    <p class="editable">paragraph content</p>
</div>

I already have got the results I was looking for, although I don't like having raw HTML embedded. My question is whether is there any directive or other method in reStructuredText to achieve the same results unobtrusively?

Answer 1

Since release 0.8 (2011-07-07), you can use the container directive with a name option:

 .. container:: test
    :name: my-id

    a paragraph

results in

  <div class="test container" id="my-id">
  a paragraph
  </div>

Answer 2

I've been just working on with something similar and I found the solution here. What you need to do is to use a custom directive and add it to an existing writer. You can simply add the directive (with small modifications) from the link to the rst2html.py script and you are all set. See also the documentation for creating directives.

Answer 3

If you find the added "container" class clashes with the bootstrap class of the same name (sigh), use this instead:

.. class:: class_name

    paragraph content

Answer 4

For those looking for an inline solution instead of the block-based ones above, you can define a new role as follows:

.. role:: my_role
   :class: my_css_class

Which can be used inline as:

Some text :my_role:`some more text with my_css_class applied`.