source block on same line as list item?

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

source block on same line as list item?

malan
Hi all, We use Asciidoctor to write up sample solutions for homework assignments, and answers are often code blocks. Is there a way to have a source block start on the same line as a list item, without pushing the source block to the line below the list item's number? We currently do:

. {zwsp}
+
[source]
----
print("one")
...
----
. {zwsp}
+
[source]
----
print("two")
...
----

But that yields:



Ideally, we'd like those source blocks to be right next to the "1." and "2."

Many thanks!

djm
Ted
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: source block on same line as list item?

Ted
I can't think of a better way than what you've done. You might be able to work some CSS magic and accomplish what you want? e.g. https://csscreator.com/topic/how-position-order-list-number-top-included-div

You could use tables, but it's a lot of work for not that much gain. And you lose the Ordered List.

[%autowidth,grid="none"]
|===
| 1. a|
[source]
----
print("one")
...
----
| 2. a|
[source]
----
print("two")
...
----
|===
- Ted @TedAtCIS
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: source block on same line as list item?

mojavelinux
Administrator
In reply to this post by malan
I have some fantastic news for you. This is feature is implemented in Asciidoctor 1.5.5 (and I think earlier versions as well, can't quite remember).

If the principle text of a list is empty, then the principle node is automatically dropped. This puts the first block in horizontal alignment with the list number.

The reason it's not working for you is because you are using a zero-width space, which is a non-empty character. You need to use {blank} instead.

. {blank}
+
[source]
----
print("one")
----
. {blank}
+
[source]
----
print("one")
----

Then you'll get the result that you desire.

I've document this in the user manual under complex content. See http://asciidoctor.org/docs/user-manual/#complex-list-content (in a few minutes).

Cheers,

-Dan

On Wed, Oct 19, 2016 at 8:50 AM, malan [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Hi all, We use Asciidoctor to write up sample solutions for homework assignments, and answers are often code blocks. Is there a way to have a source block start on the same line as a list item, without pushing the source block to the line below the list item's number? We currently do:

. {zwsp}
+
[source]
----
print("one")
...
----
. {zwsp}
+
[source]
----
print("two")
...
----

But that yields:



Ideally, we'd like those source blocks to be right next to the "1." and "2."

Many thanks!

djm


If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/source-block-on-same-line-as-list-item-tp5065.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: source block on same line as list item?

malan
Ah, thanks so much for the replies, Dan, Ted. Very sorry for my own belated follow-up. Thought I'd subscribed to this thread for email alerts but seems not! {blank} has indeed done the trick nicely. Much appreciated!

djm
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: source block on same line as list item?

malan
Actually, I fear I spoke too soon! It looks like Chrome doesn't quite behave as expected when the <pre/> inside of the <li/> has overflow-x:hidden or overflow-x:auto (the latter of which we use to ensure that code doesn't wrap in an ugly way). Indeed, on Chrome 54.0.2840.98 on Mac OS, the example at http://asciidoctor.org/docs/user-manual/#complex-list-content, namely

<pre>
. {blank}
+
----
print("one")
----
. {blank}
+
----
print("one")
----
</pre>

actually renders as:



Note the missing list numbers. If you remove overflow-x:auto from the .nowrap class, though, the list numbers render as expected:



On point seems to be http://stackoverflow.com/questions/30194748/overflowhidden-on-div-in-ordered-list-affects-li-chrome-bug, and the accepted answer, http://stackoverflow.com/a/30195325, does seem to redress, though even with the -1px trick cancelling out the 1px height, there remains a <p></p> in Asciidoctor's output (as a child of <li> and a sibling of div.listingblock) which pushes the <pre/> block down a bit.

Is there perhaps a way to avoid the empty <p></p> in the output? Or a cleaner workaround (when the goal is indeed to support overflow-x:hidden or overflow-x:auto in the list's code blocks)?

Thank you again!
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: source block on same line as list item?

mojavelinux
Administrator

On Sun, Nov 20, 2016 at 5:19 PM, malan [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Is there perhaps a way to avoid the empty <p></p> in the output? Or a cleaner workaround (when the goal is indeed to support overflow-x:hidden or overflow-x:auto in the list's code blocks)?

One way is just to create a custom template. Then you can output whatever HTML you want. Remember, Asciidoctor output is 100% customizable.

I'll have to look into the style issue to see if there's a way to do it with the existing HTML.

-Dan


--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux
Loading...