diff --git a/tests/per_usage/divs_html_elements/index.html b/tests/per_usage/divs_html_elements/index.html
index 1acbb9e8..49a3cb77 100644
--- a/tests/per_usage/divs_html_elements/index.html
+++ b/tests/per_usage/divs_html_elements/index.html
@@ -1,88 +1,36 @@
-
-
-
-
+
+
+
+
-
- Code section: CE Execution (explicit), show block, show line, header replacement
-
-
+
+
+
+
+
+
+
+
+
+ Awesome Docs - Div Elements
+
+ -
+
+
+ -
+
+
+
+
+
+
+
+
+ Code section: CE Execution (explicit), show block, show line, header replacement
+
+
+
// some comment here
// ...
@@ -179,13 +92,16 @@
// @awesome-doc-code-sections::show::block::end
}
-
-
-
-
- Code section: CE Execution (explicit), show block, show line, header replacement, long-line
-
+
+
+
+
+ Code section: CE Execution (explicit), show block, show line, header replacement,
+ long-line
+
+
+
// some comment here
// ...
@@ -212,13 +128,16 @@
// @awesome-doc-code-sections::show::block::end
}
-
-
-
-
- Code section: CE Execution (explicit), show block, show (possibly empty) line, header replacement, stdout/stderr outputs
-
+
+
+
+
+ Code section: CE Execution (explicit), show block, show (possibly empty) line, header
+ replacement, stdout/stderr outputs
+
+
+
// some comment here
// ...
@@ -249,13 +168,13 @@
// @awesome-doc-code-sections::show::block::end
}
-
-
-
+
+
- Code section: CE Execution (default), skip line, skip block
-
-
+
+ Code section: CE Execution (default), skip line, skip block
+
+
// some comment here
// ...
@@ -276,13 +195,13 @@
// and me too !
// @awesome-doc-code-sections::skip::block::end
-
+
+
-
-
- Basic code section (no parsing, no execution)
-
-
+
+ Basic code section (no parsing, no execution)
+
+
// some comment here
// ...
@@ -304,8 +223,8 @@
// @awesome-doc-code-sections::show::block::end
}
-
-
-
-
+
+
+
+
diff --git a/tests/per_usage/divs_html_elements/scripts/awesome-doc-configuration.js b/tests/per_usage/divs_html_elements/scripts/awesome-doc-configuration.js
new file mode 100644
index 00000000..fedcf216
--- /dev/null
+++ b/tests/per_usage/divs_html_elements/scripts/awesome-doc-configuration.js
@@ -0,0 +1,21 @@
+hljs.configure({
+ ignoreUnescapedHTML: true,
+ throwUnescapedHTML: false,
+ languages: ["cpp", "c", "bash", "cmake", "markdown", "json", "plaintext"],
+});
+
+awesome_doc_code_sections.options.configure({
+ doxygen_awesome_css_compatibility: true,
+});
+awesome_doc_code_sections.configuration.CE = new Map([
+ // fallback configurations
+ [
+ "cpp",
+ {
+ language: "c++",
+ compiler_id: "clang1500",
+ default_options: "-O2 -std=c++20",
+ },
+ ],
+]);
+awesome_doc_code_sections.initialize(); // initialize all features
diff --git a/tests/per_usage/divs_html_elements/scripts/awesome-doc-styling.js b/tests/per_usage/divs_html_elements/scripts/awesome-doc-styling.js
new file mode 100644
index 00000000..8cba6c8e
--- /dev/null
+++ b/tests/per_usage/divs_html_elements/scripts/awesome-doc-styling.js
@@ -0,0 +1,26 @@
+let is_stylished = false;
+function toggle_style() {
+ const stylished_classname = "stylished";
+
+ let apply_toggle_style = is_stylished
+ ? function (elements) {
+ elements.removeClass(`${stylished_classname}`);
+ }
+ : function (elements) {
+ elements.addClass(`${stylished_classname}`);
+ };
+ is_stylished = !is_stylished;
+
+ let elements = $("body").find("code, div.fragment, pre.fragment, main.contents");
+ apply_toggle_style(elements);
+}
+
+let is_small = false;
+function toggle_small() {
+ let r = document.querySelector(":root");
+ let rs = getComputedStyle(r);
+ let content_max_width = rs.getPropertyValue("--content-maxwidth");
+
+ r.style.setProperty("--content-maxwidth", (is_small ? 1050 : 500) + "px");
+ is_small = !is_small;
+}
diff --git a/tests/per_usage/divs_html_elements/styles/styles.css b/tests/per_usage/divs_html_elements/styles/styles.css
new file mode 100644
index 00000000..1bb30adb
--- /dev/null
+++ b/tests/per_usage/divs_html_elements/styles/styles.css
@@ -0,0 +1,114 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: sans-serif;
+}
+
+header {
+ width: 100%;
+ margin: 2rem auto;
+ text-align: center;
+}
+
+header h1 {
+ margin-bottom: 1rem;
+}
+
+#toggle-style-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+ list-style: none;
+}
+
+#toggle-style-container button {
+ padding: 0.5rem;
+ font-size: 1rem;
+}
+
+main {
+ margin: auto;
+ max-width: 130rem;
+}
+
+section {
+ margin: 2rem 0;
+}
+
+section h2 {
+ font-size: 1.2rem;
+ font-weight: bold;
+ margin-bottom: 0.5rem;
+}
+
+html.dark-mode {
+ color-scheme: dark;
+ --primary-color: #1982d2;
+ --primary-dark-color: #86a9c4;
+ --primary-light-color: #4779ac;
+ --box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
+ --odd-color: rgba(100, 100, 100, 0.06);
+ --menu-selected-background: rgba(0, 0, 0, 0.4);
+ --page-background-color: #1c1d1f;
+ --page-foreground-color: #d2dbde;
+ --page-secondary-foreground-color: #859399;
+ --separator-color: #38393b;
+ --side-nav-background: #252628;
+ --code-background: #2a2c2f;
+ --tablehead-background: #2a2c2f;
+ --blockquote-background: #222325;
+ --blockquote-foreground: #7e8c92;
+ --warning-color: #2e1917;
+ --warning-color-dark: #ad2617;
+ --warning-color-darker: #f5b1aa;
+ --note-color: #3b2e04;
+ --note-color-dark: #f1b602;
+ --note-color-darker: #ceb670;
+ --todo-color: #163750;
+ --todo-color-dark: #1982d2;
+ --todo-color-darker: #dcf0fa;
+ --deprecated-color: #2e323b;
+ --deprecated-color-dark: #738396;
+ --deprecated-color-darker: #abb0bd;
+ --bug-color: #2a2536;
+ --bug-color-dark: #7661b3;
+ --bug-color-darker: #ae9ed6;
+ --invariant-color: #303a35;
+ --invariant-color-dark: #76ce96;
+ --invariant-color-darker: #cceed5;
+ --fragment-background: #282c34;
+ --fragment-foreground: #dbe4eb;
+ --fragment-keyword: #cc99cd;
+ --fragment-keywordtype: #ab99cd;
+ --fragment-keywordflow: #e08000;
+ --fragment-token: #7ec699;
+ --fragment-comment: #999999;
+ --fragment-link: #98c0e3;
+ --fragment-preprocessor: #65cabe;
+ --fragment-linenumber-color: #cccccc;
+ --fragment-linenumber-background: #35393c;
+ --fragment-linenumber-border: #1f1f1f;
+}
+:root {
+ --border-radius-small: 4px;
+ --border-radius-medium: 6px;
+ --border-radius-large: 8px;
+ --spacing-small: 5px;
+ --spacing-medium: 10px;
+ --spacing-large: 16px;
+ --content-maxwidth: 1050px;
+}
+code.stylished {
+ border-radius: var(--border-radius-small);
+ border: 1px solid var(--separator-color);
+ overflow: hidden;
+}
+main.contents.stylished {
+ max-width: var(--content-maxwidth);
+ margin: calc(var(--spacing-medium) + 0.2em) auto var(--spacing-medium) auto;
+}