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>