Add CSS Class to reStructuredText internal reference

4
votes

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:?

1
csspython-sphinxrestructuredtext

1 Answers

5
votes

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