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:
Claude
2026-04-01 04:01:47 +00:00
parent cd11503b1e
commit 842bb57a03
2 changed files with 34 additions and 18 deletions
@@ -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,
) )
} }