feat: add native code block feature and optimize asset loading

- Implemented custom code block system with Prism.js highlighting (YAML)
- Added Gutenberg block with modal editor for better handling of large code snippets
- Added Classic Editor button with dialog for structured code input
- Implemented copy-to-clipboard functionality with hover-based UI
- Introduced dedicated styling (code.css)

Performance improvements:
- Load Prism.js and code block assets only when a code block is present
- Reduced unnecessary JS and CSS on pages without code snippets
- Improved overall frontend performance and resource efficiency

UI/UX improvements:
- Adapted code block styling to match theme design (rectangular layout, accent border, integrated color scheme)
- Refactored sidebar search styling for consistent appearance
- Removed conflicting wrapper borders causing double border rendering
- Applied single-border input pattern with clean focus state
- Fixed invalid CSS !important syntax issues
- Aligned search input design with comments and code block components

Result:
- Cleaner UI with consistent component styling
- Improved performance through conditional asset loading
- Better authoring experience for structured YAML content
This commit is contained in:
2026-05-03 00:22:55 +02:00
parent b51ce9ab3f
commit eda333d17a
4 changed files with 254 additions and 122 deletions
+16 -4
View File
@@ -9,20 +9,32 @@
Code block wrapper
------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
Code block wrapper
------------------------------------------------------------------------- */
.ztfr-code {
position: relative;
background-color: var(--footer-color);
color: var(--light-color);
padding: 1.1rem 1.2rem;
padding: 1rem 1.2rem;
margin: 1rem 0;
border-radius: 6px;
border-radius: 0;
border: 1px solid rgba(248, 248, 242, 0.08);
border-left: 4px solid var(--hover-color);
max-width: 100%;
overflow-x: auto;
font-family: var(--secondary-font);
font-size: 0.870rem;
font-size: 0.85rem;
line-height: 1.6;
font-weight: 400;
border: 1px solid rgba(248, 248, 242, 0.08);
box-shadow: none;
}
/* -------------------------------------------------------------------------