I’m running xwiki 14.4.1. How can I properly make a code block within a bulleted list? That is, a block of code in some programming language like bash, Python or C++.
The only markdown I know for making a code block is {{code}} and the result I got in a bulleted list looks ugly. I’m not sure what “preformatted text” in the editor of this forum is (with the button that looks like “</>”), I don’t have it in my own xwiki, but perhaps it can be used to solve the problem. I see that it translates to triple-backticks but triple-backticks does not work on my xwiki somehow.
Here is the markdown:
* 1
{{code language="bash"}}$ ls long bash command-line, yes very long, very very long, very very very long, very very very very long, very very very very very long, very very very very very very long
$ ls long bash command-line, yes very long, very very long, very very very long, very very very very long, very very very very very long, very very very very very very long{{/code}}
* 2
The following image is what that part of the page looks like. The 2 lines in the code block are separated and they are horizontally misaligned.
Try edit via WYSIWIG editor, and add the Code snippet macros, where you specify the code language and place the code itself; as a result, you shall see the image. Or make sure you wrap your code within a bullet list.
The result from the WYSIWIG editor would the same if you have done it manually.
The hello world image you showed is not what I’m trying to achieve. What I’m trying to achieve is to have a first bulleted point ‘1’ followed by a second bulleted point ‘2’, with a proper code block as part of the first bulleted point, after the ‘1’ line. The code block in my image is not proper because the lines are broken up with separators that should not be there and the horizontal alignment is wrong.
If I make a blank, unbulleted line between the first bullet point and the second bullet point, and then insert a code snippet on the blank line, it sort of works, it fixes the breaking and misalignment problem but then the code block is not aligned to the bullet points.
The is nothing magical about the “code snippet” macro. Apparently, it does the same thing as what I did with manual editing, but with extra blank lines in markdown. Those extra blank lines would also be harmful if the list were numbered; the numbering would be reset by the extra blank lines.
I made two images to post here that are the result of using the “code snippet” macro, one on a blank unbulleted line and the other on a blank bulleted line. Neither of them is what I want. The first one is obviously wrong. The second one is simply separating ‘1’ and ‘2’ into different lists and having the code block in between. Unfortunately, as a new user, I can’t post more images here.
* 1
{{code language="bash"}}$ ls long bash command-line, yes very long, very very long, very very very long, very very very very long, very very very very very long, very very very very very very long{{/code}}
{{code language="bash"}}$ ls long bash command-line, yes very long, very very long, very very very long, very very very very long, very very very very very long, very very very very very very long{{/code}}
* 2
to get
or
* 1
((({{code language="bash"}}$ ls long bash command-line, yes very long, very very long, very very very long, very very very very long, very very very very very long, very very very very very very long
$ ls long bash command-line, yes very long, very very long, very very very long, very very very very long, very very very very very long, very very very very very very long{{/code}})))
* 2
XWiki distinguishes whether you are in “inline mode” or outside. “Inline” means that currently a paragraph, the content of a table cell, etc. is being entered.
The construction "(((....)))" opens a new block that is not in inline mode at the beginning.
The {{code}} ... {{/code}} macro creates a piece of text with a grey background in inline mode, which is inserted within a paragraph.
In vertical mode (= not inline) {{code}} creates a block of text with a grey background over the entire width currently available, in inline mode a piece of the surronding sentence.
Technically speaking, inline information in HTML becomes a <span>...</span> sequence, vertical information a new <div>...</div> section.
triple-parentheses are practical, for example, to create tables within tables:
|= Col 1 |= Col 2
| a1 | (((|=First Name|=Last Name
|Ben|Jane)))
| a2 | b2
I often use it to indent sections after the heading without having to change the skin.
== Title ==
(% style="margin-left:20pt %)(((section content
section content
)))
== next title ==
or to colour a section:
(% style="background-color:beige" %)(((
section info
)))
