Jupyter notebook custom css - gridlines and bkgdcolor for code in markdown block

custom.css

/* Adds background gridlines for code blocks */
div.input_area {
  background: repeating-linear-gradient(
    to right,
    transparent,
    transparent 3px,
    rgba(180, 180, 40, 0.2) 3px,
    rgba(180, 180, 40, 0.2) 4px,
    transparent 4px,
    transparent calc(2.4em + 3px),
    rgba(30, 30, 160, 0.1) calc(2.4em + 3px),
    rgba(30, 30, 160, 0.1) calc(2.4em + 4px),
    transparent calc(2.4em + 4px),
    transparent 4.8em
  )!important;
}

/* Adds background color to code in Markdown block */
.rendered_html pre code {
    background-color: transparent;
    display: contents;
}

.rendered_html pre,
.rendered_html code {
    background: #e6e6e6;
    margin: 10px auto;
    padding: 0.5em 2em 0.5em 1em;
}

Create or update file located at:
~/.jupyter/custom/custom.css