Text-Highlight

 
Das ist ein reiner Beispieltext für das Beispiel: Diesen Text hervorheben.

 


Wie geht das? 

Auf dieser Seite fand ich die entsprechenden CSS-Codes. Mir gefiel das oben gezeigte Markierungsverfahren (dort Nr. 13).

Aus dem gezeigten CSS-Code benötigte ich nur diesen Teil:

highlight {
background-image: linear-gradient(to right, #F27121cc, #E94057cc, #8A2387cc);
border-radius: 6px;
padding: 3px 6px;
}

Mit dem TinyMCE ist es standardmäßig nicht möglich, ein <mark>-Tag zu setzen (außer manuell im Quelltext). Deshalb empfehle ich, eine neue CSS-Klasse (z.B. animark) ins Standard-Template ganz hinten hineinzuschreiben. Dann sollte diese im TinyMCE-Editor unter "Format" erscheinen. Diese sind nicht alphabetisch sortiert!

span.highlight {
background-image: linear-gradient(to right, #F27121cc, #E94057cc, #8A2387cc);
border-radius: 6px;
padding: 3px 6px;
}


Wenn du z.B. verschiedenfarbige Markierungen brauchst, dann ginge auch sowas:
span.animarkBlau, span.animarkRot, span.animarkGelb oder ähnlich.
Du musst dann halt nur jeweils eine neue Regel erstellen (neue CSS-Klasse (z.B. span.animarkRot) ins Standard-Template) und die Farbangaben für linear-gradient ändern.

 

Letzte Bearbeitung: