Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

Apache

System:

Linux 5.14.0-427.33.1.el9_4.x86_64

PHP Version:

7.4.33

User:

infinio

Directory:

/home/infinio/www/moodle/admin/tool/componentlibrary/content/library

Free Space:

250.22 GB

🔧 Quick Actions

✏️ Editing: syntax-highlighting.md

---
layout: docs
title: "Syntax highlighting"
description: Use Hugo shortcodes for Syntax highlighting.
date: 2020-02-04T09:40:32+01:00
draft: false
weight: 3
---

## 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:

{{< highlight html >}}
<div class="myclass">
  This is an example.
</div>
{{< /highlight >}}

## 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);
{{< /php >}}

## Highlight shortcode

Syntax for markdown (.md) files:

```
{{</* highlight js */>}}
var config = {
    test: null,
    selector: '[data-drag-type=move]'
};
{{</* /highlight  */>}}
```
Rendered result on this page:

{{< highlight js >}}
var config = {
    test: null,
    selector: '[data-drag-type=move]'
};
{{< /highlight >}}

## 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  */>}}
```

{{< 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>
{{< /example >}}

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: syntax-highlighting.md

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation