Scrollspy

[section id={IDENTIFIER} title={SIMPLETEXT}]<text>[/section]

To make the articles in our Knowledge Basement just a bit more interactive, we have written our very own scrollSpy script. This will take the sections in the article, list their titles and check which section is currently in the viewport of your screen.
Scrollspy’s in general work best when sections actually have relatively large bodies. Otherwise certain sections might never be listed as active in the navigation.

If you enter invalid values for the id or title attribute, or no values at all, the section will not get properly passed.

[section id=Invalid ID with spaces title=Hello??]My section[/section]

id

{IDENTIFIER}: Characters from the latin alphabet (A-Z), numbers, hyphen and underscore
This will be the identifier (id="") for the HTML section element, which can then be refered to.

title

{SIMPLETEXT}: Characters from the latin alphabet (A-Z), numbers, spaces, commas, dots, minus, plus, hyphen and underscore
The title attribute will be used as the link text in the scrollspy’s navigation.

Special formatting

Litedown

Almost exactly the same as Markdown, Litedown is the s9e Textformatter plugin. It is most commonly used on sites such as githubGitHub. It has easy to use text formatting aswell, where *italic* becomes italic, **bold** becomes bold, `code` becomes code and some pounds (###) become a header, among many, many more possibilities.

FancyPants

Created from a pineapple under the sea, FancyPants is another s9e Textformatter plugin that is enabled. It automatically turns some characters into their “intuitive” counter parts (I used regular quotes "" there). Other examples are (c) becomes ©, (tm) becomes ™ and (r) becomes ®. I suppose you can compare it to Microsoft Word’s “Smart Quotes”.

HTML Entities

Now who doesn’t love the good old HTML entities. Where you could simply write   for a no-breaking space and ♥ to share some ♥ with the world. All HTML entities are made available, and while we might be crazy, we are not going to list them all…

Code formatting

In-line code

[c]<the code>[/c] or `<the code>`

Ayyy… the code!
In-line code, what more is there to say about it..

Code boxes

[code]<the code>[/code] or ```<the code>```

Displaying code was never as easy. You can just wrap your code inside a code block tag and we will do the magic. There will be automatic language detecting (PHP, HTML, CSS, etc…) and syntax highlighting! Below are a few demonstrations.

public function render_article($text)
{
	return $this->renderer->render($text);
}

<article class="panel studio-article">
	{{ ARTICLE_TEXT }}
</article>

.studio-article {
	padding: 16px;
	font-size: 16px;
	background: #fcfcfc;
}

Text formatting

Quotes

Quotes are slightly styled differently, so they stand out a bit more.

[quote]A quote[/quote]

A quote

[quote][center][size=150]Talk is cheap.
Show me the code[/size][/center][/quote]

Talk is cheap.
Show me the code

Icons

[icon]<the icon>[/icon] or [icon=<the icon>]{SIMPLETEXT}[/icon]

You can display any faFont Awesome icon this way. Simply put the icon name between the tags (without the fa- prefix) and it will show up nicely! If you want to add a little bit of text for screen readers, that is possible aswell.

bold Bold icon’s text
Bold icon text

Strike through

[s]<the text>[/s]

This will generate strikethrough text do indicate that something was deleted changed.

Superscript

[sup]<the text>[/sup]

This will generate ^superscript text.

Subscript

[sub]<the text>[/sub]

This will generate _subscript text.

Horizontal rule

[hr]
This will create a horizontal rule within an article, which you can use to better define separation between elements in your article.

Here is the horizontal rule displayed in actions.

Text alignment

Center

[center]<text>[/center]

Generic

[align=left|center|right|justify]<text>[/align]

Element alignment

[row]Hello, this is block one.

[double]This block will be twice as big.[/double]

And this is block three.[/row]

Row

[row]<the elements>[/row]

This will create a flex row, where all direct children will be on one row with the same width.

Double column

[double]<the text>[/double]

This will create a flex’ed child, which is twice as big as all the other children.

Float

[float=left|right]<the text>[/float]

This can be used to let the parent element float to one side of the screen.

Personalisation

We like to give things a personal touch and make things even easier for you. What that means, that if you have entered any details about your vendor and/or extension name in your UCP’s profile settings, they will automatically be used through out the tutorials (where applicable). They will default to “vendor” and “extension” if you have not filled them in. Do so now and see them change!

Your vendor name: vendor
Your extension name: extension

Now if you want to write some tutorials, articles or documentation for extension developing aswell, we encourage you to use this approach aswell.

Vendor

[ vendor ] (without spaces)

This will use the user’s vendor name, or default to “vendor”.

Extension

[ extension ] (without spaces)

This will use the user’s extension name, or default to “extension”.

Information boxes

Note

[box]<the text>[/box] or [box=note]<the text>[/box]

Tip

[box=tip]<the text>[/box]

Warning

[box=warning]<the text>[/box]

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam turpis nunc, varius id pellentesque id, eleifend nec augue. Praesent eget efficitur arcu. Fusce nisi mi, dapibus eget condimentum posuere, lacinia at nibh. Phasellus lacinia tortor sit amet ipsum vestibulum tristique. Sed ultrices elementum finibus. Etiam massa elit, posuere sed pharetra eu, dignissim lacinia lacus. Duis sed mauris imperdiet, pretium libero in, mattis lorem. Morbi rhoncus quis libero a interdum. Duis purus ligula, dapibus sit amet mollis at, aliquet et dolor. Donec nec turpis convallis, molestie ipsum quis, consequat mauris. Morbi tincidunt mi felis, ut tincidunt felis pulvinar a. Nulla maximus, nisi sed porta sollicitudin, risus sapien congue urna, ut dignissim nisl tortor et ex. Nulla varius quam in malesuada mollis. Proin lobortis ante id purus convallis bibendum. Fusce feugiat arcu vel felis vehicula, nec bibendum justo suscipit. Vivamus varius, dui eget condimentum commodo, justo dolor ullamcorper urna, ac semper mi mauris eu risus.

Vivamus faucibus orci vehicula, aliquam neque vel, consectetur turpis. Donec fermentum orci in placerat elementum. Vestibulum nec nisl est. Quisque sed molestie nunc. Etiam ornare, sem non porttitor tincidunt, mauris sem dapibus ante, accumsan facilisis ipsum enim a nulla. Suspendisse sit amet sapien in tortor suscipit ullamcorper non in nisi. Nunc ultrices accumsan ligula, non sollicitudin turpis ornare sodales. Fusce at suscipit felis. In ligula nunc, tristique eu tristique ut, porta sed dui. Proin imperdiet justo purus, ut lobortis velit aliquet in. Phasellus vel elementum mi.