pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

code highlighting css improvement

Browse source 
- added code highlighting for light theme
- cleaned code block css
This commit is contained in:
Kim, Jimin 2021-12-19 18:20:23 +09:00
parent 23a58ac864
commit 6f01857803
1 changed files with 9 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

15
source/src/styles/globalStyle.tsx
View file

@ -66,17 +66,20 @@ const codeCSS = css`
light: "1px solid #BBB", light: "1px solid #BBB",
dark: "1px solid #555", dark: "1px solid #555",
})}; })};
padding: 1em 1.5em;
overflow: auto;
display: block;
word-wrap: break-word;
page-break-inside: avoid;
line-height: 1.6; line-height: 1.6;
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 0;
display: flex;
} }
/* // todo: fix highlight not working properly when scrolled horizontally // */
.highlighted-line { .highlighted-line {
background-color: #14161a; background-color: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: "#dddddd",
dark: "#14161a",
})};
display: block; display: block;
width: 100%; width: 100%;
margin: 0 -1rem; margin: 0 -1rem;