Skip to content

Commit b5d5b27

Browse files
committed
improve documentation
1 parent 8fe5ac3 commit b5d5b27

File tree

5 files changed

+92
-78
lines changed

5 files changed

+92
-78
lines changed

README.md

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,19 @@
1010

1111
</div>
1212

13-
**Doxygen Awesome** is a custom **CSS theme for Doxygen HTML-documentation** with lots of customization parameters.
13+
**Doxygen Awesome** is a custom CSS theme for Doxygen HTML documentation with lots of customization parameters.
1414

1515
## Motivation
1616

17-
I really like how the Doxygen HTML-documentation is structured! But IMHO it looks a bit outdated.
17+
I really like how the Doxygen HTML documentation is structured! But IMHO it looks a bit outdated.
1818

1919
This theme is an attempt to update the visuals of Doxygen without changing its overall layout too much.
2020

2121
## Features
2222

2323
- 🌈 Clean, modern design
24-
- 🚀 Heavily customizable by adjusting CSS-variables
25-
- 🧩 No changes to the HTML structure of Doxygen required
24+
- 🚀 Heavily customizable by adjusting CSS variables
25+
- 🧩 No changes to the HTML structure of Doxygen are required
2626
- 📱 Improved mobile usability
2727
- 🌘 Dark mode support!
2828
- 🥇 Works best with **doxygen 1.9.1** - **1.9.4** and **1.9.6** - **1.9.8**
@@ -49,13 +49,12 @@ This can be done in several ways:
4949
- manually copying the files
5050
- adding the project as a Git submodule
5151
- adding the project as a npm/xpm dependency
52-
- installing the theme system wide
52+
- installing the theme system-wide
5353

5454
All theme files are located in the root of this repository and start with the prefix `doxygen-awesome-`. You may not need all of them. Follow the install instructions to figure out what files are required for your setup.
5555

5656
### Git submodule
57-
58-
For projects which use git, add the repository as a submodule and check out the desired release:
57+
For projects that use git, add the repository as a submodule and check out the desired release:
5958

6059
```sh
6160
git submodule add https://github.com/jothepro/doxygen-awesome-css.git
@@ -81,16 +80,18 @@ managed project.
8180

8281
### System-wide
8382

84-
You can even install the theme system-wide by running `make install`. The files will be installed to `/usr/local/share/` by default, but you can customize the install location with `make PREFIX=/my/custom/path install`.
83+
You can even install the theme system-wide by running `make install`.
84+
The files will be installed to `/usr/local/share/` by default,
85+
but you can customize the install location with `make PREFIX=/my/custom/path install`.
8586

8687
### Choosing a layout
8788

88-
There is two layout options. Choose one of them and configure Doxygen accordingly:
89+
There are two layout options. Choose one of them and configure Doxygen accordingly:
8990

9091
<div class="tabbed">
9192

9293
- <b class="tab-title">Base Theme</b><div class="darkmode_inverted_image">
93-
![](img/theme-variants-base.drawio.svg){}
94+
![](img/theme-variants-base.drawio.svg)
9495
</div>
9596
Comes with the typical Doxygen titlebar. Optionally the treeview in the sidebar can be enabled.
9697

@@ -125,13 +126,13 @@ There is two layout options. Choose one of them and configure Doxygen accordingl
125126
126127
</div>
127128
128-
<br>
129+
<br>
129130
130-
**Caution**:
131+
@warning
131132
- This theme is not compatible with the `FULL_SIDEBAR = YES` option provided by Doxygen!
132133
- `HTML_COLORSTYLE` must be set to `LIGHT` since Doxygen 1.9.5!
133134
134-
### Further installation instructions:
135+
### Further installation instructions
135136
136137
- [Installing extensions](docs/extensions.md)
137138
- [Customizing the theme (colors, spacing, border-radius, ...)](docs/customization.md)
@@ -147,12 +148,12 @@ Tested with
147148
- Edge 119
148149
149150
150-
The theme does not strive to be backwards compatible to (significantly) older browser versions.
151+
The theme does not strive to be backward compatible with (significantly) older browser versions.
151152
152153
153154
## Credits
154155
155-
Thanks for all the bug reports and inspiring feedback on github!
156+
Thanks for all the bug reports and inspiring feedback on GitHub!
156157
157158
Special thanks to all the contributors:
158159
<br><br>

docs/customization.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
This theme is highly customizable because a lot of things are parameterized with CSS variables.
99

10-
Just to give you an idea on how flexible the styling is, click this button:
10+
Just to give you an idea of how flexible the styling is, click this button:
1111

1212
<div class="alter-theme-button" onclick="toggle_alternative_theme()" onkeypress="if (event.keyCode == 13) toggle_alternative_theme()" tabindex=0>Alter theme</div>
1313

@@ -26,7 +26,7 @@ html {
2626
}
2727
```
2828

29-
For dark-mode overrides you have to choose where to put them, depending on whether the dark-mode toggle extension is installed or not:
29+
For dark-mode overrides, you have to choose where to put them, depending on whether the dark-mode toggle extension is installed or not:
3030

3131
<div class="tabbed">
3232

@@ -90,11 +90,11 @@ If you miss a configuration option or find a bug, please consider [opening an is
9090

9191
The theme overrides most colors with the `--primary-color-*` variables.
9292

93-
But there is a few small images and graphics that the theme cannot adjust or replace. To make these blend in better with
93+
But there are a few small images and graphics that the theme cannot adjust or replace. To make these blend in better with
9494
the rest, it is recommended to adjust the [doxygen color settings](https://www.doxygen.nl/manual/customize.html#minor_tweaks_colors)
95-
to something that matches the chosen color-scheme.
95+
to something that matches the chosen color scheme.
9696

97-
For the default color-scheme, these values work out quite well:
97+
For the default color scheme, these values work out quite well:
9898

9999
```
100100
# Doxyfile
@@ -105,7 +105,7 @@ HTML_COLORSTYLE_GAMMA = 113
105105

106106
## Share your customizations
107107

108-
If you customized the theme with custom colors, spacings, font-sizes, etc. and you want to share your creation with others, you can to this [here](https://github.com/jothepro/doxygen-awesome-css/discussions/13).
108+
If you have customized the theme with custom colors, spacings, font-sizes, etc. and you want to share your creation with others, you can do this [here](https://github.com/jothepro/doxygen-awesome-css/discussions/13).
109109

110110
I am always curious to learn about how you made the theme look even better!
111111

docs/extensions.md

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
On top of the base theme provided by `doxygen-awesome.css`, this repository comes with Javascript extensions that require additional setup steps to get them running.
66

7-
The extensions require customizations in the header HTML-template.
7+
The extensions require customizations in the header HTML template.
88
This is how you can create the default template with Doxygen:
99

1010
1. Create default header template:
@@ -24,7 +24,8 @@ This is how you can create the default template with Doxygen:
2424
Adds a button next to the search bar to enable and disable the dark theme variant manually:
2525

2626
<div class="darkmode_inverted_image bordered_image">
27-
<img width=250 src="darkmode_toggle.png" />
27+
28+
![](img/darkmode_toggle.png){width=250px}
2829
</div>
2930

3031
### Installation
@@ -68,7 +69,8 @@ All customizations must be applied before calling `DoxygenAwesomeDarkModeToggle.
6869
Shows a copy button when the user hovers over a code fragment:
6970
7071
<div class="darkmode_inverted_image bordered_image">
71-
<img width=490 src="fragment_copy_button.png"/>
72+
73+
![](img/fragment_copy_button.png){width=490}
7274
</div>
7375
7476
### Installation
@@ -108,7 +110,8 @@ All customizations must be applied before calling `DoxygenAwesomeDarkModeToggle.
108110
Provides a button on hover behind every headline to allow easy creation of a permanent link to the headline:
109111
110112
<div class="darkmode_inverted_image bordered_image">
111-
<img width=220 src="paragraph_link.png"/>
113+
114+
![](img/paragraph_link.png){width=220}
112115
</div>
113116
114117
Works for all headlines and for many documentation section titles.
@@ -146,13 +149,14 @@ All customizations must be applied before calling `DoxygenAwesomeParagraphLink.i
146149
147150
## Interactive TOC {#extension-toc}
148151
149-
On large screens the Table of Contents (TOC) is anchored on the top right of the page. This extension visualizes the reading progress by dynamically highlighting the currently active section.
152+
On large screens, the Table of Contents (TOC) is anchored on the top right of the page. This extension visualizes the reading progress by dynamically highlighting the currently active section.
150153
151-
On small screens the extension hides the TOC by default. The user can open it manually when needed:
154+
On small screens, the extension hides the TOC by default. The user can open it manually when needed:
152155
153156
154157
<div class="darkmode_inverted_image bordered_image">
155-
<img width=380 src="interactive_toc_mobile.png" />
158+
159+
![](img/interactive_toc_mobile.png){width=380}
156160
</div>
157161
158162
### Installation
@@ -192,8 +196,8 @@ This extension allows to arrange list content in tabs:
192196

193197
<div class="tabbed">
194198

195-
- <span class="tab-title">Tab 1</span> This is the content of tab 1
196-
- <span class="tab-title">Tab 2</span> This is the content of tab 2
199+
- <b class="tab-title">Tab 1</b> This is the content of tab 1
200+
- <b class="tab-title">Tab 2</b> This is the content of tab 2
197201

198202
</div>
199203

@@ -223,8 +227,8 @@ Each item in the list must start with an element that has the class `tab-title`.
223227
```md
224228
<div class="tabbed">
225229
226-
- <span class="tab-title">Tab 1</span> This is the content of tab 1
227-
- <span class="tab-title">Tab 2</span> This is the content of tab 2
230+
- <b class="tab-title">Tab 1</b> This is the content of tab 1
231+
- <b class="tab-title">Tab 2</b> This is the content of tab 2
228232
229233
</div>
230234
```

docs/tricks.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
## Diagrams with Graphviz {#tricks-graphviz}
66

7-
To get the best looking class diagrams for your documentation, generate them with Graphviz as vector graphics with transparent background:
7+
To get the best-looking class diagrams for your documentation, generate them with Graphviz as vector graphics with transparent background:
88

99
```
1010
# Doxyfile
@@ -13,7 +13,7 @@ DOT_IMAGE_FORMAT = svg
1313
DOT_TRANSPARENT = YES
1414
```
1515

16-
In case `INTERACTIVE_SVG = YES` is set in the Doxyfile, all user-defined dotgraphs must be wrapped with the `interactive_dotgraph` CSS class in order for them to be rendered correctly:
16+
In case `INTERACTIVE_SVG = YES` is set in the Doxyfile, all user-defined dotgraphs must be wrapped with the `interactive_dotgraph` CSS class for them to be rendered correctly:
1717

1818
```md
1919
<div class="interactive_dotgraph">
@@ -28,13 +28,13 @@ In case `INTERACTIVE_SVG = YES` is set in the Doxyfile, all user-defined dotgrap
2828
## Disable Dark Mode {#tricks-darkmode}
2929

3030
If you don't want the theme to automatically switch to dark mode depending on the browser preference,
31-
you can disable dark mode by adding the `light-mode` class to the html-tag in the header template:
31+
you can disable dark mode by adding the `light-mode` class to the HTML tag in the header template:
3232

3333
```html
3434
<html xmlns="http://www.w3.org/1999/xhtml" class="light-mode">
3535
```
3636

37-
The same can be done to always enable dark-mode:
37+
The same can be done to always enable dark mode:
3838

3939
```html
4040
<html xmlns="http://www.w3.org/1999/xhtml" class="dark-mode">
@@ -70,7 +70,7 @@ Those properties can be changed for individual tables.
7070

7171
### Centering
7272

73-
Tables can be centered by wrapping them in the `<center>` HTML-tag.
73+
Tables can be centered by wrapping them in the `<center>` HTML tag.
7474

7575
<div class="tabbed">
7676

@@ -97,7 +97,7 @@ Tables can be centered by wrapping them in the `<center>` HTML-tag.
9797

9898
To make tables span the full width of the page, no matter how wide the content is, wrap the table in the `full_width_table` CSS class.
9999

100-
@warning Apply with caution! This breaks the overflow scrolling of the table. Content might be cut of on small screens!
100+
@warning Apply with caution! This breaks the overflow scrolling of the table. Content might be cut off on small screens!
101101

102102
<div class="tabbed">
103103

include/MyLibrary/example.hpp

Lines changed: 49 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -26,50 +26,59 @@ class Example {
2626
*
2727
* ## Tables
2828
*
29-
* The table content is scrollable if the table gets too wide.
29+
* <div class="tabbed">
30+
*
31+
* - <b class="tab-title">Basic</b>
32+
* This theme supports normal markdown tables:<br>
33+
* | Item | Title | Description | More |
34+
* |-----:|-------|-----------------------|--------------------------------------------|
35+
* | 1 | Foo | A placeholder | Some lorem ipsum to make this table wider. |
36+
* | 2 | Bar | Also a placeholder | More lorem ipsum. |
37+
* | 3 | Baz | The third placeholder | More lorem ipsum. |
38+
* - <b class="tab-title">Centered</b>
39+
* <center>
40+
* A table can be centered with the `<center>` html tag:<br>
41+
* | Item | Title | Description | More |
42+
* |-----:|-------|-----------------------|--------------------------------------------|
43+
* | 1 | Foo | A placeholder | Some lorem ipsum to make this table wider. |
44+
* | 2 | Bar | Also a placeholder | More lorem ipsum. |
45+
* | 3 | Baz | The third placeholder | More lorem ipsum. |
46+
* </center>
47+
* - <b class="tab-title">Stretched</b>
48+
* A table wrapped in `<div class="full_width_table">` fills the full page width.
49+
* <div class="full_width_table">
50+
* | Item | Title | Description | More |
51+
* |-----:|-------|-----------------------|--------------------------------------------|
52+
* | 1 | Foo | A placeholder | Some lorem ipsum to make this table wider. |
53+
* | 2 | Bar | Also a placeholder | More lorem ipsum. |
54+
* | 3 | Baz | The third placeholder | More lorem ipsum. |
55+
* </div>
56+
* **Caution**: This will break the overflow scrolling support!
57+
* - <b class="tab-title">Complex</b>
58+
* Complex [Doxygen tables](https://www.doxygen.nl/manual/tables.html) are also supported as seen in @ref multi_row "this example":<br>
59+
* <table>
60+
* <caption id="multi_row">Complex table</caption>
61+
* <tr><th>Column 1 <th>Column 2 <th>Column 3
62+
* <tr><td rowspan="2">cell row=1+2,col=1<td>cell row=1,col=2<td>cell row=1,col=3
63+
* <tr><td rowspan="2">cell row=2+3,col=2 <td>cell row=2,col=3
64+
* <tr><td>cell row=3,col=1 <td>cell row=3,col=3
65+
* </table>
66+
* - <b class="tab-title">Overflow Scrolling</b> The table content is scrollable if the table gets too wide.<br>
67+
* | first_column | second_column | third_column | fourth_column | fifth_column | sixth_column | seventh_column | eighth_column | ninth_column |
68+
* |--------------|---------------|--------------|---------------|--------------|--------------|----------------|---------------|--------------|
69+
* | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
70+
* - <b class="tab-title">Images</b>A table can contain images:<br>
71+
* | Column 1 | Column 2 |
72+
* |---------------------------|-------------------------------------------------|
73+
* | ![doxygen](testimage.png) | ← the image should not be inverted in dark-mode |
3074
*
31-
* | first_column | second_column | third_column | fourth_column | fifth_column | sixth_column | seventh_column | eighth_column | ninth_column |
32-
* |--------------|---------------|--------------|---------------|--------------|--------------|----------------|---------------|--------------|
33-
* | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
3475
*
35-
* A table can contain images:
76+
* </div>
3677
*
37-
* | Column 1 | Column 2 |
38-
* |---------------------------|-------------------------------------------------|
39-
* | ![doxygen](testimage.png) | ← the image should not be inverted in dark-mode |
78+
* ## Diagrams
79+
*
80+
* Graphviz diagrams support dark mode and can be scrolled once they get too wide:
4081
*
41-
* Complex [Doxygen tables](https://www.doxygen.nl/manual/tables.html) are also supported as seen in @ref multi_row "this example":
42-
*
43-
* <table>
44-
* <caption id="multi_row">Complex table</caption>
45-
* <tr><th>Column 1 <th>Column 2 <th>Column 3
46-
* <tr><td rowspan="2">cell row=1+2,col=1<td>cell row=1,col=2<td>cell row=1,col=3
47-
* <tr><td rowspan="2">cell row=2+3,col=2 <td>cell row=2,col=3
48-
* <tr><td>cell row=3,col=1 <td rowspan="2">cell row=3+4,col=3
49-
* <tr><td colspan="2">cell row=4,col=1+2
50-
* <tr><td>cell row=5,col=1 <td colspan="2">cell row=5,col=2+3
51-
* <tr><td colspan="2" rowspan="2">cell row=6+7,col=1+2 <td>cell row=6,col=3
52-
* <tr> <td>cell row=7,col=3
53-
* <tr><td>cell row=8,col=1 <td>cell row=8,col=2\n
54-
* <table>
55-
* <tr><td>Inner cell row=1,col=1<td>Inner cell row=1,col=2
56-
* <tr><td>Inner cell row=2,col=1<td>Inner cell row=2,col=2
57-
* </table>
58-
* <td>cell row=8,col=3
59-
* <ul>
60-
* <li>Item 1
61-
* <li>Item 2
62-
* </ul>
63-
* </table>
64-
*
65-
* A table can be centered with the `<center>` html tag:
66-
* <center>
67-
* | Foo | Bar | Baz | FooBar |
68-
* |-------------|----------------|---------------------------|-------------|
69-
* | Lorem imsum | dolor sit amet | cenectetur adipisici elit | At vero eos |
70-
* </center>
71-
*
72-
* Embedded Graphviz graphs support dark mode and can be scrolled once they get too wide:
7382
* \dot Graphviz with a caption
7483
* digraph example {
7584
* node [fontsize="12"];

0 commit comments

Comments
 (0)