Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import styled from 'styled-components'
const Wrapper = styled.div`
max-width: 100%;
color: ${props => props.theme.colors.text};
p {
font-size: 1rem;
line-height: 1.8;
margin-top: 0;
}
a:link, a:visited {
color: ${props => props.theme.colors.link};
text-decoration: underline;
}
h1, h2, h3, h4, h5, h6 {
color: red;
}
ol {
font-size: 1.1rem;
li {
margin-bottom: 25px;
}
}
ol {
counter-reset:li; /* Initiate a counter */
margin-left:0; /* Remove the default left margin */
padding-left:0; /* Remove the default left padding */
}
ol > li {
position: relative; /* Create a positioning context */
margin: 0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
padding: 4px 8px; /* Add some spacing around the content */
list-style: none; /* Disable the normal item numbering */
}
ol > li:before {
content:counter(li); /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
/* Position and style the number */
position:absolute;
top: .5rem;
left: -2.5em;
width: 1.5em;
height: 1.5em;
margin-right: 1rem;
padding: 4px;
border-radius: 50%;
background: ${props => props.theme.colors.codeBackground};
color: ${props => props.theme.colors.code};
font-weight: bold;
text-align: center;
}
ol ol li:last-child { margin-bottom:0 }
li ol, li ul {
margin-top: 10px;
}
code {
border-radius: 4px;
line-height: 1.5;
max-width: 100%;
overflow-wrap: break-word;
padding: 4px 6px;
word-wrap: break-word;
font-size: .8rem;
background: ${props => props.theme.colors.codeBackground};
color: ${props => props.theme.colors.code};
}
pre {
display: inline-block;
border-radius: 4px;
width: 100%;
font-size: 1rem;
margin: 0;
code {
background: transparent;
padding: 0 5px;
}
}
table {
display: block;
width: 100%;
overflow: auto;
}
table th {
font-weight: bold;
}
table th,
table td {
padding: 6px 13px;
border: 1px solid #282B39;
}
table tr {
border-top: 1px solid #282B39;
text-align: left;
}
table tr:nth-child(2n) {
background-color: #2b2e3e;
}
.syntax-shell {
padding-left: 5px !important;
}
.syntax-shell .react-syntax-highlighter-line-number {
opacity: 0.5;
visibility: hidden;
position: absolute;
height: 0;
}
.syntax-shell .react-syntax-highlighter-line-number::after {
content: "$";
visibility: visible;
left: 0px;
top: -4px;
position: absolute;
}
`
export default Wrapper
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment