UI Component library
Skip to main content
Syntax highlighting
Use Hugo shortcodes for Syntax highlighting.
Using Shortcodes for syntax
Using this (shortcode) syntax you can higlight programming syntax in the component library
HTML highlighting
Syntax for markdown (.md) files:
{{< highlight html >}}
<div class="myclass">
This is an example.
</div>
{{< /highlight >}}
Rendered result on this page:
<div class="myclass">
This is an example.
</div>
PHP shortcode
Syntax for markdown (.md) files:
{{< php >}}
$mform->addElement('passwordunmask', 'password', get_string('label'), $attributes);
{{< /php >}}
Rendered result on this page:
<?php
$mform->addElement('passwordunmask', 'password', get_string('label'), $attributes);
?>
Highlight shortcode
Syntax for markdown (.md) files:
{{< highlight js >}}
var config = {
test: null,
selector: '[data-drag-type=move]'
};
{{< /highlight >}}
Rendered result on this page:
var config = {
test: null,
selector: '[data-drag-type=move]'
};
Example shortcode
The example shortcode shows the HTML source with syntax highlighting and renders it on the page. This shortcode takes the following arguments:
show_markup=“true/false” show_preview=“true/false”
{{< example >}}
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
{{#js}}
window.console.log('hello');
{{/js}}
{{< /example >}}
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>