Skip to main content

Code example

The ll-code shortcode displays an example piece of code. It's used a lot in this documentation section and probably not really anywhere else.

There are two different variants.

  • By default, the code will horizontally scroll. This is useful for showing html and stylesheets.
  • When displaying shortcodes, it's likely that they can get long. Also, line breaks are not recommended within the tag portion of the shortcode (between the [square brackets]). With this in mind, we can use wrap="true" to wrap the code within the box.
  • Note: all html and shortcode content must escaped before being pasted between the shortcode tags. Use this website for html. For shortcodes, use the bracket escaper below.
[ll-code][/ll-code]
[ll-code wrap="true"][/ll-code]

Shortcode with wrap="true":

[ll-image url="https://path.to/image.jpg" size="sm" caption="A small image" alt="An example image"][/ll-image]

Shortcode without wrap="true":

<div class="table-responsive">
	<table class="table-striped">
	<tbody>
		<tr>
			<th>Column content 1 - let's make it long to demonstrate scrolling. Sometimes the code example will be long.</th>
			<th>Column content 2</th>
		</tr>
	</tbody>
	</table>
</div>

Bracket escaper

Paste your code with brackets into the first text area, and the escaped content will appear in the second text area.





Keywords