This feature update makes code bbcode and code editor way more functional by adding copy, expand, collapse buttons, resizer bar, code line numbers and ability to highlight lines.
Custom title and lines highlighting
You can now specify a custom code block header title. For example, users can provide a filename for code blocks instead of writing it in the text or putting the whole code block inside a spoiler with filename title.
Moreover, you can even highlight certain lines.
Custom title and lines to be highlighted can be set via "Insert code" dialog:
You can also set the title and lines to highlight directly in text editor by adding
Example:
[code lang="php" title="My Custom Title"]<? .... ?>[/code]
Hovering custom title will show the code language.
Example of highlighting:
[code lang="php" highlight="2, 5-8"]
<?php
class Fruit {
// Properties
public $name;
public $color;
// Methods
function set_name($name) {
$this->name = $name;
}
function get_name() {
return $this->name;
}
}
?>
[/code]
Expand/Collapse buttons
Expand button smoothly increasing the height of code block until all the code is showing. It is visible only when code block height is LESS than the actual code size.
Collapse button smoothly decreasing the height of code block to it's default height. It is visible only when code block height is LARGER than default code block height.
Both expand and collapse buttons are visible when code block height is within min and max limits and invisible on code blocks that are smaller than default code block height.
The default height of code block: 250px
Copy button simply copy the code right into your clipboard.
Line numbers
All code blocks have line numbers (up to 1000 lines).
Resizer
Every code block which code height is larger than the default height has a resizer bar.
It allows users to vertically resize code block.
Custom title and lines highlighting
You can now specify a custom code block header title. For example, users can provide a filename for code blocks instead of writing it in the text or putting the whole code block inside a spoiler with filename title.
Moreover, you can even highlight certain lines.
Custom title and lines to be highlighted can be set via "Insert code" dialog:
You can also set the title and lines to highlight directly in text editor by adding
title="xx" and highlight="xx" parameters in code bbcode.Example:
[code lang="php" title="My Custom Title"]<? .... ?>[/code]
Hovering custom title will show the code language.
Example of highlighting:
[code lang="php" highlight="2, 5-8"][/code][code lang="php" highlight="2, 5-8"]
<?php
class Fruit {
// Properties
public $name;
public $color;
// Methods
function set_name($name) {
$this->name = $name;
}
function get_name() {
return $this->name;
}
}
?>
[/code]
Expand/Collapse buttons
Expand button smoothly increasing the height of code block until all the code is showing. It is visible only when code block height is LESS than the actual code size.
Collapse button smoothly decreasing the height of code block to it's default height. It is visible only when code block height is LARGER than default code block height.
Both expand and collapse buttons are visible when code block height is within min and max limits and invisible on code blocks that are smaller than default code block height.
The default height of code block: 250px
Copy button simply copy the code right into your clipboard.
Line numbers
All code blocks have line numbers (up to 1000 lines).
Resizer
Every code block which code height is larger than the default height has a resizer bar.
It allows users to vertically resize code block.
