Small changes Tom

This commit is contained in:
Tom van Woudenberg 2025-04-14 09:18:50 +02:00
parent b4f919d50a
commit d795f3db0f

View file

@ -143,17 +143,9 @@ This content is both highlighted as important and collapsible.
## Custom colours for admonitions ## Custom colours for admonitions
13. It is also possible to use specific colours to customize your admonitions, using built-in Sphinx colour classes. To do so, it is necessary to follow the installation process outlined below: 13. It is also possible to use specific colours to customize your admonitions, using our extension ['Sphinx-Named-Colours'](https://teachbooks.io/manual/external/Sphinx-Named-Colors/README.html#admonitions). This allow you to use default 'CSS' colours or your own custom colours. To do so, it is necessary to add the extension as shown below:
**Step A: Install the Package** **Step A: Add to `requirements.txt`**
Install the `sphinx-named-colors` package using `pip`:
```
pip install sphinx-named-colors
```
**Step B: Add to `requirements.txt`**
Ensure that the package is included in your project's `requirements.txt` to track the dependency: Ensure that the package is included in your project's `requirements.txt` to track the dependency:
@ -161,11 +153,11 @@ Ensure that the package is included in your project's `requirements.txt` to trac
sphinx-named-colors sphinx-named-colors
``` ```
**Step C: Enable in `_config.yml`** **Step B: Enable in `_config.yml`**
In your `_config.yml` file, add the extension to the list of Sphinx extra extensions: In your `_config.yml` file, add the extension to the list of Sphinx extra extensions:
``` ```md
sphinx: sphinx:
extra_extensions: extra_extensions:
. .
@ -177,7 +169,7 @@ sphinx:
. .
``` ```
14. Once the installation is done, we can experiment with custom-coloured admonitions! Go ahead and look at the available [CSS Named Colours](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color), and pick a desired colour. 14. Now we can experiment with custom-coloured admonitions! Go ahead and look at the available [CSS Named Colours](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color), and pick a desired colour.
15. Once you have chosen a colour, coloured admonitions can be generated in two ways, depending on how you'd like to structure your content. The first method is by adding the name-colour via `:class:` to an existing `admonition` or `dropdown` type block, similar to what was done above. This can be done as follows: 15. Once you have chosen a colour, coloured admonitions can be generated in two ways, depending on how you'd like to structure your content. The first method is by adding the name-colour via `:class:` to an existing `admonition` or `dropdown` type block, similar to what was done above. This can be done as follows:
@ -201,18 +193,15 @@ This is a green-styled custom admonition.
``` ```
```` ````
18. For the second method using named colour admonitions, a new class is also introduced for titleless admonitions: `show-bar`. This forces printing of the title bar. If a title is given, the title will be printed too and adding the class `show-bar` is redundant. Try this out using the code above with an omitted title, and this added class. 18. For more details, see the documentation of this extension in [our manual](https://teachbooks.io/manual/external/Sphinx-Named-Colors/README.html). This also describes how to add your own custom colours!
19. For both methods, you can also combine classes here, for example, `:class: darkblue dropdown` to make it collapsible and coloured. Test this out, building on the above examples. 19. When you are ready, commit your changes to the repository by clicking on the green `Commit changes` button.
20. Add a commit message.
20. When you are ready, commit your changes to the repository by clicking on the green `Commit changes` button. 21. To see your changes, go to {octicon}`play` `Actions` - The most recent workflow run `overview.md / the commit message of the commit you just made` - Wait for it to finish - In the summary, click on the link of your book shown in the table `Branches deployed` and under `Primary book at root` (getting bored of waiting? There'll be exercising on doing this locally which prevents you from waiting).
21. Add a commit message. 22. Do you see your change? If you don't see it click `CTRL`+`F5`/`Control`+`F5`to refresh the page.
22. To see your changes, go to {octicon}`play` `Actions` - The most recent workflow run `overview.md / the commit message of the commit you just made` - Wait for it to finish - In the summary, click on the link of your book shown in the table `Branches deployed` and under `Primary book at root` (getting bored of waiting? There'll be exercising on doing this locally which prevents you from waiting).
23. Do you see your change? If you don't see it click `CTRL`+`F5`/`Control`+`F5`to refresh the page.
```{admonition} Check your understanding ```{admonition} Check your understanding
:class: note :class: note