Configure style to not indent even when in list items

[ArdisRamey]

I've been beating my head against this for a bit now and hope someone out there has some ideas.

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;
}

[ArdisRamey]

Here you can see the look we're trying to avoid:

[NorthEast]

The code block is in the list, so it's indented like any other content in the list. So it's nothing to do with prism's CSS.

You could set a negative margin on the code block to counteract your list indentation, and do this for each level of the list that it is used; e.g.

Code: Select all

pre[class*="language-"] 
{ margin-left: -??px; }

ol pre[class*="language-"],
ul pre[class*="language-"]
{ margin-left: -??px; }

ol ol pre[class*="language-"],
ol ul pre[class*="language-"],
ul ol pre[class*="language-"],
ul ul pre[class*="language-"]
{ margin-left: -??px; }

Not a very elegant solution, but it would work.

[ArdisRamey]

I understand that the codeblock is being indented because of its presence in the list. I included Prism's CSS because the fix I was looking for likely belonged in the CSS that defined the codeblock. I'll have to give your suggestion a try. Thanks!

However, I'm hoping there's a way to address it more directly. A programmatic way to specify "no matter where this style appears, always justify it to the far left", so to speak.

Any ideas?

[NorthEast]

I understand that the codeblock is being indented because of its presence in the list. I included Prism's CSS because the fix I was looking for likely belonged in the CSS that defined the codeblock. I'll have to give your suggestion a try. Thanks!

However, I'm hoping there's a way to address it more directly. A programmatic way to specify "no matter where this style appears, always justify it to the far left", so to speak.

Any ideas?

Not really. Using something like position absolute could position it far left, but also takes it out the document flow.

Of course, you could just not put the code blocks inside the list in the first place.

If you want a programmatic solution involving javascript then go for it.

[ArdisRamey]

Dave, are you saying there's a way to format my content such that the code blocks show up where they're supposed to (this example illustrates this step) without letting the list indent them?

As far as I've seen, both

Code: Select all

<ol><li>List item one
<pre><code>this is my code sample</code></pre></li>
<li>List item two</li></ol>

And

Code: Select all

<ol><li>List item one</li>
<pre><code>this is my code sample</code><pre>
<li>List item two</li></ol>

result in the same indented code blocks. If there's a formatting way to avoid that, I'd love to hear it!

Would all positioning attributes take it "out the document flow"? I hadn't thought of "position absolute" but had considered "float".

[NorthEast]

Dave, are you saying there's a way to format my content such that the code blocks show up where they're supposed to (this example illustrates this step) without letting the list indent them?

Yep, don't put them inside the list. There's also an option in Flare to continue the list numbering.

Code: Select all

<ol><li>List item one</li></ol>
<pre><code>this is my code sample</code><pre>
<ol><li>List item two</li></ol>

Would all positioning attributes take it "out the document flow"? I hadn't thought of "position absolute" but had considered "float".

Well, you can read up on position or float - I didn't suggest these because I can't think of a quick/simple solution using either. My initial suggestion is pretty straightforward.

[Dee Vincent-Day]

You could try creating styles for your code block and instead of using OL use MadCap Flare's auto numbering feature.

This allows you to fully control your numbering and the layout of your code blocks which you can have aligned to the left margin or indented. It is more work at first but once you have your styles set up it is quicker.

I wrote a series of blog posts on this very topic (although not including a code block).

https://www.madcapsoftware.com/blog/author/dvincentday/

You will find the full instructions for using auto numbering in the auto numbering blog posts.

[ArdisRamey]

Thanks, Dee. I'll have to try this!

I'm a firm believer in taking the time to build a framework that supports "ease of use" down the line, and time spent creating these styles will surely pay for itself in time (and stress) saved later.