feat: improve Markdown renderer typography and styling
- Increase body text line height from 1.30em to 1.50em for better readability - Increase paragraph spacing from 18sp to 20sp for more breathing room - Add explicit fontWeight to headings: Bold for H1-H2, SemiBold for H3-H4, Medium for H5-H6 - Add negative letterSpacing to H1-H2 for tighter display-style headings - Widen heading size range (32sp-15sp vs 32sp-18sp) for clearer visual hierarchy - Add internal padding to code blocks (16dp horizontal, 12dp vertical) so text isn't flush against borders - Add vertical margin (4dp) around code blocks for separation from surrounding text - Add line height (1.45em) to code block text for better readability - Add letter spacing (0.3sp) to inline code for better monospace readability - Fix light theme code block using DarkColorPalette instead of LightColorPalette for background https://claude.ai/code/session_01PPExHNAdLqddiYsGZi1BgW
This commit is contained in:
@@ -51,6 +51,7 @@ import androidx.compose.ui.text.TextLinkStyles
|
|||||||
import androidx.compose.ui.text.TextStyle
|
import androidx.compose.ui.text.TextStyle
|
||||||
import androidx.compose.ui.text.font.FontFamily
|
import androidx.compose.ui.text.font.FontFamily
|
||||||
import androidx.compose.ui.unit.dp
|
import androidx.compose.ui.unit.dp
|
||||||
|
import androidx.compose.ui.unit.em
|
||||||
import androidx.compose.ui.unit.sp
|
import androidx.compose.ui.unit.sp
|
||||||
import androidx.core.view.WindowCompat
|
import androidx.core.view.WindowCompat
|
||||||
import androidx.lifecycle.compose.collectAsStateWithLifecycle
|
import androidx.lifecycle.compose.collectAsStateWithLifecycle
|
||||||
@@ -301,14 +302,16 @@ val MarkDownStyleOnDark =
|
|||||||
TextStyle(
|
TextStyle(
|
||||||
fontFamily = FontFamily.Monospace,
|
fontFamily = FontFamily.Monospace,
|
||||||
fontSize = Font14SP,
|
fontSize = Font14SP,
|
||||||
|
lineHeight = 1.45.em,
|
||||||
),
|
),
|
||||||
modifier =
|
modifier =
|
||||||
Modifier
|
Modifier
|
||||||
.padding(0.dp)
|
.padding(vertical = 4.dp)
|
||||||
.fillMaxWidth()
|
.fillMaxWidth()
|
||||||
.clip(shape = QuoteBorder)
|
.clip(shape = QuoteBorder)
|
||||||
.border(1.dp, DarkSubtleBorder, QuoteBorder)
|
.border(1.dp, DarkSubtleBorder, QuoteBorder)
|
||||||
.background(DarkColorPalette.onSurface.copy(alpha = 0.05f)),
|
.background(DarkColorPalette.onSurface.copy(alpha = 0.05f))
|
||||||
|
.padding(horizontal = 16.dp, vertical = 12.dp),
|
||||||
),
|
),
|
||||||
stringStyle =
|
stringStyle =
|
||||||
RichTextDefaults.stringStyle?.copy(
|
RichTextDefaults.stringStyle?.copy(
|
||||||
@@ -324,6 +327,7 @@ val MarkDownStyleOnDark =
|
|||||||
fontFamily = FontFamily.Monospace,
|
fontFamily = FontFamily.Monospace,
|
||||||
fontSize = Font14SP,
|
fontSize = Font14SP,
|
||||||
background = DarkColorPalette.onSurface.copy(alpha = 0.22f),
|
background = DarkColorPalette.onSurface.copy(alpha = 0.22f),
|
||||||
|
letterSpacing = 0.3.sp,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
@@ -342,14 +346,16 @@ val MarkDownStyleOnLight =
|
|||||||
TextStyle(
|
TextStyle(
|
||||||
fontFamily = FontFamily.Monospace,
|
fontFamily = FontFamily.Monospace,
|
||||||
fontSize = Font14SP,
|
fontSize = Font14SP,
|
||||||
|
lineHeight = 1.45.em,
|
||||||
),
|
),
|
||||||
modifier =
|
modifier =
|
||||||
Modifier
|
Modifier
|
||||||
.padding(0.dp)
|
.padding(vertical = 4.dp)
|
||||||
.fillMaxWidth()
|
.fillMaxWidth()
|
||||||
.clip(shape = QuoteBorder)
|
.clip(shape = QuoteBorder)
|
||||||
.border(1.dp, LightSubtleBorder, QuoteBorder)
|
.border(1.dp, LightSubtleBorder, QuoteBorder)
|
||||||
.background(DarkColorPalette.onSurface.copy(alpha = 0.05f)),
|
.background(LightColorPalette.onSurface.copy(alpha = 0.05f))
|
||||||
|
.padding(horizontal = 16.dp, vertical = 12.dp),
|
||||||
),
|
),
|
||||||
stringStyle =
|
stringStyle =
|
||||||
RichTextDefaults.stringStyle?.copy(
|
RichTextDefaults.stringStyle?.copy(
|
||||||
@@ -365,6 +371,7 @@ val MarkDownStyleOnLight =
|
|||||||
fontFamily = FontFamily.Monospace,
|
fontFamily = FontFamily.Monospace,
|
||||||
fontSize = Font14SP,
|
fontSize = Font14SP,
|
||||||
background = LightColorPalette.onSurface.copy(alpha = 0.12f),
|
background = LightColorPalette.onSurface.copy(alpha = 0.12f),
|
||||||
|
letterSpacing = 0.3.sp,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -61,9 +61,9 @@ val Font14SP = 14.sp
|
|||||||
val Font17SP = 17.sp
|
val Font17SP = 17.sp
|
||||||
val Font18SP = 18.sp
|
val Font18SP = 18.sp
|
||||||
|
|
||||||
val MarkdownTextStyle = TextStyle(lineHeight = 1.30.em)
|
val MarkdownTextStyle = TextStyle(lineHeight = 1.50.em)
|
||||||
|
|
||||||
val DefaultParagraphSpacing: TextUnit = 18.sp
|
val DefaultParagraphSpacing: TextUnit = 20.sp
|
||||||
|
|
||||||
internal val DefaultHeadingStyle: HeadingStyle = { level, textStyle ->
|
internal val DefaultHeadingStyle: HeadingStyle = { level, textStyle ->
|
||||||
when (level) {
|
when (level) {
|
||||||
@@ -71,48 +71,57 @@ internal val DefaultHeadingStyle: HeadingStyle = { level, textStyle ->
|
|||||||
Typography.displayLarge.copy(
|
Typography.displayLarge.copy(
|
||||||
fontSize = 32.sp,
|
fontSize = 32.sp,
|
||||||
lineHeight = 40.sp,
|
lineHeight = 40.sp,
|
||||||
|
fontWeight = FontWeight.Bold,
|
||||||
|
letterSpacing = (-0.5).sp,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
1 -> {
|
1 -> {
|
||||||
Typography.displayMedium.copy(
|
Typography.displayMedium.copy(
|
||||||
fontSize = 28.sp,
|
fontSize = 26.sp,
|
||||||
lineHeight = 36.sp,
|
lineHeight = 34.sp,
|
||||||
|
fontWeight = FontWeight.Bold,
|
||||||
|
letterSpacing = (-0.25).sp,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
2 -> {
|
2 -> {
|
||||||
Typography.displaySmall.copy(
|
Typography.displaySmall.copy(
|
||||||
fontSize = 26.sp,
|
fontSize = 22.sp,
|
||||||
lineHeight = 34.sp,
|
lineHeight = 30.sp,
|
||||||
|
fontWeight = FontWeight.SemiBold,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
3 -> {
|
3 -> {
|
||||||
Typography.displaySmall.copy(
|
Typography.displaySmall.copy(
|
||||||
fontSize = 24.sp,
|
fontSize = 20.sp,
|
||||||
lineHeight = 32.sp,
|
lineHeight = 28.sp,
|
||||||
|
fontWeight = FontWeight.SemiBold,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
4 -> {
|
4 -> {
|
||||||
Typography.headlineLarge.copy(
|
Typography.headlineLarge.copy(
|
||||||
fontSize = 22.sp,
|
fontSize = 18.sp,
|
||||||
lineHeight = 26.sp,
|
lineHeight = 24.sp,
|
||||||
|
fontWeight = FontWeight.Medium,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
5 -> {
|
5 -> {
|
||||||
Typography.headlineMedium.copy(
|
Typography.headlineMedium.copy(
|
||||||
fontSize = 20.sp,
|
fontSize = 16.sp,
|
||||||
lineHeight = 24.sp,
|
lineHeight = 22.sp,
|
||||||
|
fontWeight = FontWeight.Medium,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
6 -> {
|
6 -> {
|
||||||
Typography.headlineSmall.copy(
|
Typography.headlineSmall.copy(
|
||||||
fontSize = 18.sp,
|
fontSize = 15.sp,
|
||||||
lineHeight = 22.sp,
|
lineHeight = 20.sp,
|
||||||
|
fontWeight = FontWeight.Medium,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user