diff --git a/frontend/app_flowy/packages/flowy_editor/example/assets/example.json b/frontend/app_flowy/packages/flowy_editor/example/assets/example.json
index b6fc3467dc..fe74b22dad 100644
--- a/frontend/app_flowy/packages/flowy_editor/example/assets/example.json
+++ b/frontend/app_flowy/packages/flowy_editor/example/assets/example.json
@@ -37,7 +37,11 @@
         "type": "text",
         "delta": [
           {
-            "insert": "At AppFlowy, we embody what we value deep in our hearts, taking inspiration from other great companies while forging our own path. AppFlowy’s five core values are Mission Driven, Aim High & Iterate, Transparency, Collaboration, and Honesty. Together, they spell MATCH. We will continue to iterate and refine these values as we grow."
+            "insert": "At "
+          },
+          { "insert": "AppFlowy", "attributes": { "code": true, "bold": true, "color": "0xFFED459C"} },
+          {
+            "insert": ", we embody what we value deep in our hearts, taking inspiration from other great companies while forging our own path. AppFlowy’s five core values are Mission Driven, Aim High & Iterate, Transparency, Collaboration, and Honesty. Together, they spell MATCH. We will continue to iterate and refine these values as we grow."
           }
         ]
       },
diff --git a/frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/rich_text_style.dart b/frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/rich_text_style.dart
index daad186fc2..c1545b4080 100644
--- a/frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/rich_text_style.dart
+++ b/frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/rich_text_style.dart
@@ -183,19 +183,30 @@ class RichTextStyle {
     return TextSpan(
       text: text,
       style: TextStyle(
-        fontWeight: fontWeight,
-        fontStyle: fontStyle,
-        fontSize: fontSize,
-        color: textColor,
-        backgroundColor: backgroundColor,
-        decoration: textDecoration,
+        fontWeight: _fontWeight,
+        fontStyle: _fontStyle,
+        fontSize: _fontSize,
+        color: _textColor,
+        decoration: _textDecoration,
+        background: _background,
       ),
-      recognizer: recognizer,
+      recognizer: _recognizer,
     );
   }
 
+  Paint? get _background {
+    if (_backgroundColor != null) {
+      return Paint()
+        ..color = _backgroundColor!
+        ..strokeWidth = 24.0
+        ..style = PaintingStyle.fill
+        ..strokeJoin = StrokeJoin.round;
+    }
+    return null;
+  }
+
   // bold
-  FontWeight get fontWeight {
+  FontWeight get _fontWeight {
     if (attributes.bold) {
       return FontWeight.bold;
     }
@@ -203,7 +214,7 @@ class RichTextStyle {
   }
 
   // underline or strikethrough
-  TextDecoration get textDecoration {
+  TextDecoration get _textDecoration {
     var decorations = [TextDecoration.none];
     if (attributes.underline || attributes.href != null) {
       decorations.add(TextDecoration.underline);
@@ -216,28 +227,33 @@ class RichTextStyle {
   }
 
   // font
-  FontStyle get fontStyle =>
+  FontStyle get _fontStyle =>
       attributes.italic ? FontStyle.italic : FontStyle.normal;
 
   // text color
-  Color get textColor {
+  Color get _textColor {
     if (attributes.href != null) {
       return Colors.lightBlue;
     }
     return attributes.color ?? Colors.black;
   }
 
-  Color get backgroundColor {
-    return attributes.highlightColor ?? Colors.transparent;
+  Color? get _backgroundColor {
+    if (attributes.highlightColor != null) {
+      return attributes.highlightColor!;
+    } else if (attributes.code) {
+      return Colors.grey.withOpacity(0.4);
+    }
+    return null;
   }
 
   // font size
-  double get fontSize {
+  double get _fontSize {
     return baseFontSize;
   }
 
   // recognizer
-  GestureRecognizer? get recognizer {
+  GestureRecognizer? get _recognizer {
     final href = attributes.href;
     if (href != null) {
       return TapGestureRecognizer()