Color Highlighting with CSS Styling Test
Testing the three color modes with additional CSS styling: normal (background), foreground, and dual.
How to enable CSS Color Highlight
To enable this feature, please add the property colorHighlight: true
to the Front matter section like below
---titile: 'title of the page'date: yyyy-mm-ddcolorHighlight: true---
Basic Syntax:
==your text|color==
- Default background mode==your text|color|fg==
- Foreground mode==your text|fgColor|bgColor|dual==
- Dual mode
Extended Syntax with CSS Styling:
==text|color|mode|fontWeight|fontStyle|textAlign==
==text|color|fontWeight|fontStyle|textAlign==
(default background mode)
Normal/Background Mode with CSS Styling
==Bold red background|#ff6b6b|bg|bold==
→ Bold red background==Bold red background|white|#ff6b6b|dual|bold==
→ Bold red background==Italic blue background|#4299e1|bg||italic==
→ Italic blue background==Bold italic green|#25c2a0|bg|bold|italic==
→ Bold italic green
Foreground Mode with CSS Styling
==Bold dark red text|#800031|fg|bold==
→ Bold dark red text==Italic navy text|#004080|fg||italic==
→ Italic navy text==Bold italic teal|#006666|fg|bold|italic==
→ Bold italic teal
Dual Mode with CSS Styling
==Bold purple on green|#4B0082|#D1FFBD|dual|bold==
→ Bold purple on green==Italic white on red|#ffffff|#ff0000|dual||italic==
→ Italic white on red==Caribbean green & white text|white|#25c2a0|dual==
→ Caribbean green & white text==Silver style|white|#C0C0C0|dual==
→ Silver style
Simplified Syntax (background mode)
==Bold warning|#ffc107|bold==
→ Bold warning==Italic success|#28a745||italic==
→ Italic success==Bold italic error|#dc3545|bold|italic==
→ Bold italic error
Font Weight Examples
==Normal weight|#ff6b6b==
→ Normal weight==Bold weight|#ff6b6b|bold==
→ Bold weight==Bold weight explicit bg|#ff6b6b|bg|bold==
→ Bold weight explicit bg==Lighter weight|#ff6b6b|lighter==
→ Lighter weight==Bolder weight|#ff6b6b|bolder==
→ Bolder weight==700 weight|#ff6b6b|700==
→ 700 weight
Font Style Examples
==Normal style|#4299e1==
→ Normal style==Italic style|#4299e1||italic==
→ Italic style==Oblique style|#4299e1||oblique==
→ Oblique style
Text Alignment Examples
Text alignment requires block display, which is automatically applied when text-align is used:
==Left aligned text|#e3f2fd||||left==
Left aligned text
==Center aligned text|#fff3e0||||center==
Center aligned text
==Right aligned text|#f3e5f5||||right==
Right aligned text
==Justified text with longer content|#e8f5e8||||justify==
This is a longer text block that demonstrates justified alignment. When text is justified, it stretches to fill the full width of the container, creating even margins on both left and right sides. This alignment mode distributes spacing between words to achieve this effect.
Foreground Mode Text Alignment
==Center aligned foreground text|#d32f2f|fg|||center==
Center aligned foreground text
Original test case:
==Center aligned dual mode|#ffffff|#1976d2|dual|||center==
Center aligned dual mode
==Right aligned dual with bold|#000000|#ffeb3b|dual|bold||right==
Right aligned dual with bold
Combined Styling Examples
==Bold italic warning|#ffc107|bold|italic==
→ Bold italic warning==Light italic info|#17a2b8|lighter|italic==
→ Light italic info==Bold success message|#28a745|fg|bold==
→ Bold success message==Italic error text|#dc3545|fg||italic==
→ Italic error text
Dual Mode Advanced Styling
==Bold white on dark|#ffffff|#343a40|dual|bold==
→ Bold white on dark==Italic light on primary|#ffffff|#007bff|dual||italic==
→ Italic light on primary==Bold italic special|#000000|#ffd700|dual|bold|italic==
→ Bold italic special==Normal dual colors|#4B0082|#D1FFBD|dual==
→ Normal dual colors
Perfect for enhanced color highlighting with CSS styling! 🎨✨