1

What I'm trying to do:

I'm working on creating online notes for a class. I'm using Spinx (reStructuredText). I really want to create some numbered admonitions with a custom coloring scheme (e.g. blue for definitions, green for theorems, orange for examples etc). I'd like to be able to compute something like this:

Chapter
=======

.. definition:: My name of choice

   My definition here.

And it would render a numbered, custom colored admonition, something like:

Chapter 1

This is a picture of what I want

The numbering would take measure of the chapter/subchapter/subsubchapter the admonition is in and (preferably) continue numbering with respect to other kinds of custom admonitions. So if I were to have first a definition and then a theorem in in Chapter 3.2.1 I'd get "3.2.1.1 Definition: My name of choice" and then "3.2.1.2 Theorem: my name of choice".

Note:

I have googled everything I can think of, but no no avail. I tried the numbered blocks extension but it didn't really suit my needs. I've tried following instructions on custom admonitions (not numbered though) by creating a custom.css add the def setup(app): app.add_stylesheet('custom.css') into my conf.py file (as described here) but I couldn't get it to work. I'm getting pretty desperate.

mzjn
  • 48,958
  • 13
  • 128
  • 248
Hulda Hvönn
  • 11
  • 1
  • 1
    Welcome to Stack Overflow! Please ask one question at a time. Numbering and coloring should probably be two separate questions. If you need help with custom.css, you need to show us what's in it (see also [mcve]). – mzjn Jun 21 '21 at 16:08

1 Answers1

0

You can make a custom element.

|Red-boxts| My Word |boxs| Bla Bla Bla |boxe|


|Green-boxts| My Word |boxs| Bla Bla Bla |boxe|


|Orange-boxts| My Word |boxs| Bla Bla Bla |boxe|


.. |Red-boxts| raw:: html

    <div style="background-color: red; width: 100%; padding: 5px;">
    <h1>

.. |Green-boxts| raw:: html

    <div style="background-color: green; width: 100%; padding: 5px;">
    <h1>
.. |Orange-boxts| raw:: html

    <div style="background-color: orange; width: 100%; padding: 5px;">
    <h1>

.. |boxs| raw:: html

    </h1><p>

.. |boxe| raw:: html

    </p></div>

That should show:

Click to see Result

Maximillian Lange
  • 9
  • 1
  • 2