I have codeblocks that illustrate steps in an ordered list, which are embedded within the list item they illustrate. However, the codeblock keeps indenting with the list level, which is not the look we're going for.
How can I configure the style that defines my codeblocks so that they're always un-indented and align with the far left of the pane, even when within an <li> or other styling that would typically indent the paragraph?
I am using prism.js to decorate my code samples, so the codeblock style is defined in their prism.css stylesheet. The stylesheet defines the code style as follows:
Code: Select all
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+typescript&plugins=keep-markup */
/**
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
* Based on https://github.com/chriskempson/tomorrow-theme
* @author Rose Pritchard
*/
code[class*="language-"],
pre[class*="language-"] {
color: #ccc;
background: none;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #2d2d2d;
}