Text Marker Effect
Markers that you set with # symbols (#marked text#) are given a highlighter effect.
/* =================================================================
Text Marker Effect for Highlighted Text
================================================================= */
mark {
padding: 0em 0.7em;
border-radius: 0.8em 0.3em;
background: transparent;
background-image: linear-gradient(
to right,
rgba(255, 229, 54, 0.1),
rgba(255, 229, 54, 0.6) 4%,
rgba(255, 229, 54, 0.2)
);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
@media (prefers-color-scheme: dark) {
mark {
color: white;
background-image: linear-gradient(
to right,
rgba(255, 229, 54, 0.2),
rgba(255, 229, 54, 0.8) 4%,
rgba(255, 229, 54, 0.4)
);
}
}How to integrate CSS-Styles in adoc Studio
Create a new product style (recommended)
Duplicate an existing product style
Integrate the new CSS code into the duplicated stylesheet
This variant ensures a consistent appearance and simplifies subsequent changes, as all documents use the same centrally maintained style.
Project-specific stylesheet
Create a styles.css file in the project.
Above the document title of each AsciiDoc document concerned, write the line
:stylesheet: styles.cssLearn more in our CSS documentation in the user manual.