Color Highlighting with CSS Styling Test

Oct 5, 2025
testcolorsstyling
2   Minutes
382   Words

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

color-text-test.md
---
titile: 'title of the page'
date: yyyy-mm-dd
colorHighlight: 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! 🎨

Article title Color Highlighting with CSS Styling Test
Article author Anand Raja
Release time Oct 5, 2025
Copyright 2025
RSS Feed
Sitemap