Search code examples
csspython-sphinxrestructuredtext

Add CSS Class to reStructuredText internal reference

I would like to format an internal link - defined with :ref: - in my documentation using CSS classes.

My problem is that I cannot convert :ref:`Link <internal_link> to the following bit of HTML <a href="internal_link" class="btn btn-primary btn-sm">Link</a>

I've tried defining a new role but that was unsuccessful too.

.. role:: ref
   :class: btn btn-sm btn-primary

:ref:`Link <internal_link>`

My current solution is to use raw html and render it as such, but I cannot link the RST files but have to point to the HTML files instead (which doesn't work for PDF output).

.. role:: raw-html(raw)
   :format: html

:raw-html:`<a href="internal_link.html" class="btn btn-primary btn-sm">Link</a>`

Does anyone know how to add custom CSS classes to :ref:?

Solution

  • I'm not sure about getting the class in the link directly. But you should be able to get it in the parent with:

    .. cssclass:: btn-primary

  :ref:`link`

    then adjust the css selector to use:

    .btn-primary a