Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1 
---
2 
layout: docs
3 
title: "Syntax highlighting"
4 
description: Use Hugo shortcodes for Syntax highlighting.
5 
date: 2020-02-04T09:40:32+01:00
6 
draft: false
7 
weight: 3
8 
---
9 
 
10 
## Using Shortcodes for syntax
11 
 
12 
Using this (shortcode) syntax you can higlight programming syntax in the component library
13 
 
14 
## HTML highlighting
15 
 
16 
Syntax for markdown (.md) files:
17 
 
18 
```
19 
{{</* highlight html */>}}
20 
<div class="myclass">
21 
  This is an example.
22 
</div>
23 
{{</* /highlight  */>}}
24 
```
25 
Rendered result on this page:
26 
 
27 
{{< highlight html >}}
28 
<div class="myclass">
29 
  This is an example.
30 
</div>
31 
{{< /highlight >}}
32 
 
33 
## PHP shortcode
34 
 
35 
Syntax for markdown (.md) files:
36 
 
37 
```
38 
{{</* php */>}}
39 
  $mform->addElement('passwordunmask', 'password', get_string('label'), $attributes);
40 
{{</* /php  */>}}
41 
```
42 
Rendered result on this page:
43 
 
44 
{{< php >}}
45 
  $mform->addElement('passwordunmask', 'password', get_string('label'), $attributes);
46 
{{< /php >}}
47 
 
48 
## Highlight shortcode
49 
 
50 
Syntax for markdown (.md) files:
51 
 
52 
```
53 
{{</* highlight js */>}}
54 
var config = {
55 
    test: null,
56 
    selector: '[data-drag-type=move]'
57 
};
58 
{{</* /highlight  */>}}
59 
```
60 
Rendered result on this page:
61 
 
62 
{{< highlight js >}}
63 
var config = {
64 
    test: null,
65 
    selector: '[data-drag-type=move]'
66 
};
67 
{{< /highlight >}}
68 
 
69 
 
70 
## Example shortcode
71 
 
72 
The example shortcode shows the HTML source with syntax highlighting and renders it on the page. This shortcode takes the following arguments:
73 
 
74 
show_markup="true/false"
75 
show_preview="true/false"
76 
 
77 
 
78 
 
79 
 
80 
```
81 
{{</* example */>}}
82 
<div class="input-group">
83 
  <input type="text" class="form-control" placeholder="Search">
84 
  <div class="input-group-append">
85 
    <button class="btn btn-primary" type="button">
86 
        <i class="fa fa-search"></i>
87 
    </button>
88 
  </div>
89 
</div>
90 
{{#js}}
91 
    window.console.log('hello');
92 
{{/js}}
93 
{{</* /example  */>}}
94 
```
95 
 
96 
{{< example >}}
97 
<div class="input-group">
98 
  <input type="text" class="form-control" placeholder="Search">
99 
  <div class="input-group-append">
100 
    <button class="btn btn-primary" type="button">
101 
        <i class="fa fa-search"></i>
102 
    </button>
103 
  </div>
104 
</div>
105 
{{< /example >}}