markdown-wrapper.js

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