Highlighted Block Headers
I am sure this has been done many times before, but hopefully this will be helpful to some. It has definitely been a game-changer for me, even if it is such a small change.
I am constantly struggling to focus when I see a huge block of text, even when divided by headers with a colourful font. My dyslexia and ADHD probably do not help.
I have been trying to recreate what I saw in Notion years ago, and wrote this quick CSS snippet to add to a Tokyo Night theme I am using. I tried callouts previously; they looked great, but were obviously not headers.
Pretty happy with the result, I applied this to all headers, but I am considering keeping only H1 - H3.
Here is the code - I am not technical, so it has obviously been written with Claude. I tinkered with this a bit to make it look solid. Colours can be adjusted to fit the different themes.
If you have any suggestions on what can be improved, please share!
/* H1 - Salmon/Pink */
.markdown-rendered h1, .cm-line:has(.cm-header-1) {
background-color: #2b2024;
color: #e06c75 !important;
padding: 8px 14px !important;
border: 6px solid transparent !important;
background-clip: padding-box !important;
border-radius: 10px !important;
box-sizing: border-box !important;
position: relative !important;
left: -6px !important;
width: calc(100% + 12px) !important;
display: block;
}
/* H2 - Green */
.markdown-rendered h2, .cm-line:has(.cm-header-2) {
background-color: #283129;
color: #81b866 !important;
padding: 8px 14px !important;
border: 6px solid transparent !important;
background-clip: padding-box !important;
border-radius: 10px !important;
box-sizing: border-box !important;
position: relative !important;
left: -6px !important;
width: calc(100% + 12px) !important;
display: block;
}
/* H3 - Teal */
.markdown-rendered h3, .cm-line:has(.cm-header-3) {
background-color: #203131;
color: #34b79b !important;
padding: 8px 14px !important;
border: 6px solid transparent !important;
background-clip: padding-box !important;
border-radius: 10px !important;
box-sizing: border-box !important;
position: relative !important;
left: -6px !important;
width: calc(100% + 12px) !important;
display: block;
}
/* H4 - Blue */
.markdown-rendered h4, .cm-line:has(.cm-header-4) {
background-color: #252a40;
color: #6f88d9 !important;
padding: 8px 14px !important;
border: 6px solid transparent !important;
background-clip: padding-box !important;
border-radius: 10px !important;
box-sizing: border-box !important;
position: relative !important;
left: -6px !important;
width: calc(100% + 12px) !important;
display: block;
}
/* H5 - Purple */
.markdown-rendered h5, .cm-line:has(.cm-header-5) {
background-color: #2d233f;
color: #a981d4 !important;
padding: 8px 14px !important;
border: 6px solid transparent !important;
background-clip: padding-box !important;
border-radius: 10px !important;
box-sizing: border-box !important;
position: relative !important;
left: -6px !important;
width: calc(100% + 12px) !important;
display: block;
}
/* H6 - Yellow/Orange */
.markdown-rendered h6, .cm-line:has(.cm-header-6) {
background-color: #2d2820;
color: #e5c07b !important;
padding: 8px 14px !important;
border: 6px solid transparent !important;
background-clip: padding-box !important;
border-radius: 10px !important;
box-sizing: border-box !important;
position: relative !important;
left: -6px !important;
width: calc(100% + 12px) !important;
display: block;
}