Table of Contents
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.
The extensions require customizations in the header HTML template. This is how you can create the default template with Doxygen:
- Create default header template: ```sh doxygen -w html header.html delete_me.html delete_me.css ```
- Reference the template in your
Doxyfile: ``` HTML_HEADER = header.html ```
More details on header customization
Dark Mode Toggle
Adds a button next to the search bar to enable and disable the dark theme variant manually:
{width=250px} Installation
- Add the required resources in your
Doxyfile:- HTML_EXTRA_FILES:
doxygen-awesome-darkmode-toggle.js - HTML_EXTRA_STYLESHEET:
doxygen-awesome-sidebar-only-darkmode-toggle.css(ONLY required for the sidebar-only theme variant!)
- HTML_EXTRA_FILES:
In the
header.htmltemplate, includedoxygen-awesome-darkmode-toggle.jsat the end of the<head>and then initialize it: ```html <html> <head><script type="text/javascript" src="$relpath^doxygen-awesome-darkmode-toggle.js"></script> <script type="text/javascript"> DoxygenAwesomeDarkModeToggle.init() </script> </head> <body> ```
Customizing
Changing the tooltip of the button:
Changing Icons. Both Emoji or SVG icons are supported:
All customizations must be applied before calling DoxygenAwesomeDarkModeToggle.init()!
Fragment Copy Button
Shows a copy button when the user hovers over a code fragment:
{width=490} Installation
- Add the required resources in your
Doxyfile:- HTML_EXTRA_FILES:
doxygen-awesome-fragment-copy-button.js
- HTML_EXTRA_FILES:
In the
header.htmltemplate, includedoxygen-awesome-fragment-copy-button.jsat the end of the<head>and then initialize it: ```html <html> <head><script type="text/javascript" src="$relpath^doxygen-awesome-fragment-copy-button.js"></script> <script type="text/javascript"> DoxygenAwesomeFragmentCopyButton.init() </script> </head> <body> ```
Customizing
The tooltip of the button can be changed:
The icon can be changed. It must be an SVG:
All customizations must be applied before calling DoxygenAwesomeDarkModeToggle.init()!
Paragraph Linking
Provides a button on hover behind every headline to allow easy creation of a permanent link to the headline:
{width=220} Works for all headlines and for many documentation section titles.
Installation
- Add the required resources in your
Doxyfile:- HTML_EXTRA_FILES:
doxygen-awesome-paragraph-link.js
- HTML_EXTRA_FILES:
In the
header.htmltemplate, includedoxygen-awesome-paragraph-link.jsat the end of the<head>and then initialize it: ```html <html> <head><script type="text/javascript" src="$relpath^doxygen-awesome-paragraph-link.js"></script> <script type="text/javascript"> DoxygenAwesomeParagraphLink.init() </script> </head> <body> ```
Customizing
The button tooltip can be changed:
The icon of the button can be changed. Both plain characters or SVG icons are supported:
All customizations must be applied before calling DoxygenAwesomeParagraphLink.init()!
Interactive TOC
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.
On small screens, the extension hides the TOC by default. The user can open it manually when needed:
{width=380} Installation
- Add the required resources in your
Doxyfile:- HTML_EXTRA_FILES:
doxygen-awesome-interactive-toc.js
- HTML_EXTRA_FILES:
In the
header.htmltemplate, includedoxygen-awesome-interactive-toc.jsat the end of the<head>and then initialize it: ```html <html> <head><script type="text/javascript" src="$relpath^doxygen-awesome-interactive-toc.js"></script> <script type="text/javascript"> DoxygenAwesomeInteractiveToc.init() </script> </head> <body> ```
Customizing
The offset for when a headline is considered active can be changed. A smaller value means that the headline of the section must be closer to the top of the viewport before it is highlighted in the TOC:
Hiding the TOC on small screens can be disabled. It is still interactive and can be hidden by the user but will now be open by default:
Tabs
- Warning
- Experimental feature! Please report bugs here.
This extension allows to arrange list content in tabs:
- Tab 1 This is the content of tab 1
- Tab 2 This is the content of tab 2
Installation
- Add the required resources in your
Doxyfile:- HTML_EXTRA_FILES:
doxygen-awesome-tabs.js
- HTML_EXTRA_FILES:
In the
header.htmltemplate, includedoxygen-awesome-tabs.jsat the end of the<head>and then initialize it: ```html <html> <head><script type="text/javascript" src="$relpath^doxygen-awesome-tabs.js"></script> <script type="text/javascript"> DoxygenAwesomeTabs.init() </script> </head> <body> ```
Usage
Each list that is supposed to be displayed as tabs has to be wrapped with the tabbed CSS class. Each item in the list must start with an element that has the class tab-title. It will then be used as tab title.
Page Navigation
- Warning
- Experimental feature! Please report bugs here.
To allow the user to easily navigate from one document to another, "Next" and "Previous" buttons can be added at the end of a Markdown document.
Installation
The feature is shipped inside the default doxygen-awesome.css. No additional stylesheets or scripts need to be added.
Usage
The following conditions must be met for the feature to work properly:
- The navigation must be inside a Markdown table with 1-2 columns.
- The alignment of the column defines the alignment of the arrow on the navigation button.
- the table must be wrapped inside a
<div>with the classsection_buttons.
- Code ```md
```
- Result
