You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hinode is available as a [child theme](https://github.com/markdumay/hugo-theme-hinode-child), and a [main theme](https://github.com/markdumay/hugo-theme-hinode). The child theme uses [npm](https://www.npmjs.com) to link to the latest available version of the Hinode theme. As such, it is less applicable if you plan to customize a lot. Vice versa, the main theme allows for heavy customization, but is not synchronized with the latest available Hinode theme automatically.
Copy file name to clipboardExpand all lines: content/en/blog/code-highlighting.md
+4-129Lines changed: 4 additions & 129 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,8 @@ date: 2022-04-16
5
5
description: "Examples on how to enable code highlighting"
6
6
tags: ["code"]
7
7
thumbnail: img/notepad.jpg
8
-
credits: Photo by <a href="https://unsplash.com/@frederickjmedina">Frederick Medina</a> on <a href="https://unsplash.com/photos/PdfRE-xB--s">Unsplash</a>
The `command` shortcode generates terminal output for either `bash`, `powershell`, or `sql` shell languages.
62
-
63
-
### Bash (default shell)
64
-
65
-
Use the `command` shortcode to generate a block with a default bash command prompt.
66
-
67
-
```html
68
-
{{%/* command */%}}
69
-
export MY_VAR=123
70
-
{{%/* /command */%}}
71
-
```
72
-
73
-
The result looks like this:
74
-
{{% command %}}
75
-
export MY_VAR=123
76
-
{{% /command %}}
77
-
78
-
Specify `user` and `host` to add the user context to the prompt. In addition, use `(out)` to specify an output line and use `\` to denote a line continuation.
79
-
80
-
```html
81
-
{{%/* command user="user" host="localhost" */%}}
82
-
export MY_VAR=123
83
-
echo "hello"
84
-
(out)hello
85
-
echo one \
86
-
two \
87
-
three
88
-
(out)one two three
89
-
echo "goodbye"
90
-
(out)goodbye
91
-
{{%/* /command */%}}
92
-
```
93
-
94
-
The result looks like this:
95
-
{{% command user="user" host="localhost" %}}
96
-
export MY_VAR=123
97
-
echo "hello"
98
-
(out)hello
99
-
echo one \
100
-
two \
101
-
three
102
-
(out)one two three
103
-
echo "goodbye"
104
-
(out)goodbye
105
-
{{% /command %}}
106
-
107
-
### PowerShell
108
-
109
-
Set the `shell` argument to `powershell` to generate a PowerShell terminal. Override the `prompt` to add a directory if needed. Use the backtick `` ` `` symbol to denote a line continuation.
Copy file name to clipboardExpand all lines: content/en/blog/custom-shortcodes.md
+137-3Lines changed: 137 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -46,14 +46,148 @@ The result looks like this:
46
46
{{< img src="img/dunes.jpg" caption="slide 3" >}}
47
47
{{< /carousel >}}
48
48
49
+
## Command Prompt Shortcode
50
+
51
+
The `command` shortcode generates terminal output for either `bash`, `powershell`, or `sql` shell languages. The shortcode supports the following arguments:
52
+
53
+
| Argument | Required | Description |
54
+
|-----------|----------|-------------|
55
+
| user | No | Optional user to add to the prompt, e.g. "user". |
56
+
| host | No | Optional host to add to the prompt, e.g. "localhost". |
57
+
| prompt | No | Optional prompt override, e.g. "PS C:\Users\User>". |
58
+
| shell | No | Type of shell, either "bash" (default), "powershell", or "sql". |
59
+
{.table}
60
+
61
+
### Bash (default shell)
62
+
63
+
Use the `command` shortcode to generate a block with a default bash command prompt.
64
+
65
+
```html
66
+
{{%/* command */%}}
67
+
export MY_VAR=123
68
+
{{%/* /command */%}}
69
+
```
70
+
71
+
The result looks like this:
72
+
{{% command %}}
73
+
export MY_VAR=123
74
+
{{% /command %}}
75
+
76
+
Specify `user` and `host` to add the user context to the prompt. In addition, use `(out)` to specify an output line and use `\` to denote a line continuation.
77
+
78
+
```html
79
+
{{%/* command user="user" host="localhost" */%}}
80
+
export MY_VAR=123
81
+
echo "hello"
82
+
(out)hello
83
+
echo one \
84
+
two \
85
+
three
86
+
(out)one two three
87
+
echo "goodbye"
88
+
(out)goodbye
89
+
{{%/* /command */%}}
90
+
```
91
+
92
+
The result looks like this:
93
+
{{% command user="user" host="localhost" %}}
94
+
export MY_VAR=123
95
+
echo "hello"
96
+
(out)hello
97
+
echo one \
98
+
two \
99
+
three
100
+
(out)one two three
101
+
echo "goodbye"
102
+
(out)goodbye
103
+
{{% /command %}}
104
+
105
+
### PowerShell
106
+
107
+
Set the `shell` argument to `powershell` to generate a PowerShell terminal. Override the `prompt` to add a directory if needed. Use the backtick `` ` `` symbol to denote a line continuation.
Set the `shell` argument to `sql` to generate a SQL terminal. Use the `(con)` suffix to denote a line continuation.
135
+
136
+
```html
137
+
{{%/* command prompt="mysql>" shell="sql" */%}}
138
+
set @my_var = 'foo';
139
+
set @my_other_var = 'bar';
140
+
CREATE TABLE people ((con)
141
+
first_name VARCHAR(30) NOT NULL,(con)
142
+
last_name VARCHAR(30) NOT NULL(con)
143
+
);
144
+
(out)Query OK, 0 rows affected (0.09 sec)
145
+
insert into people(con)
146
+
values ('John', 'Doe');
147
+
(out)Query OK, 1 row affected (0.02 sec)
148
+
select *(con)
149
+
from people(con)
150
+
order by last_name;
151
+
(out)+------------+-----------+
152
+
(out)| first_name | last_name |
153
+
(out)+------------+-----------+
154
+
(out)| John | Doe |
155
+
(out)+------------+-----------+
156
+
(out)1 row in set (0.00 sec)
157
+
{{%/* /command */%}}
158
+
```
159
+
160
+
The result looks like this:
161
+
{{% command prompt="mysql>" shell="sql" %}}
162
+
set @my_var = 'foo';
163
+
set @my_other_var = 'bar';
164
+
CREATE TABLE people ((con)
165
+
first_name VARCHAR(30) NOT NULL,(con)
166
+
last_name VARCHAR(30) NOT NULL(con)
167
+
);
168
+
(out)Query OK, 0 rows affected (0.09 sec)
169
+
insert into people(con)
170
+
values ('John', 'Doe');
171
+
(out)Query OK, 1 row affected (0.02 sec)
172
+
select *(con)
173
+
from people(con)
174
+
order by last_name;
175
+
(out)+------------+-----------+
176
+
(out)| first_name | last_name |
177
+
(out)+------------+-----------+
178
+
(out)| John | Doe |
179
+
(out)+------------+-----------+
180
+
(out)1 row in set (0.00 sec)
181
+
{{% /command %}}
182
+
49
183
## Image Shortcode
50
184
51
-
Use the `image` shortcode to display a responsive image with a specific aspect ratio. The source link can refer to either an image available in the `/assets/img` folder of your site or a public web location. The shortcode renders the image as a so-called [image set][mozilla_image] to optimize the image for different screen sizes and resolutions. Behind the scenes, Hugo renders the images in `WebP` format and stores them in a local folder (`resources` or `public`). Supported image types are `.png`, `.jpeg`, `.gif`, `.tiff`, `.bmp`, and `.webp`. The shortcode supports the following arguments:
185
+
Use the `image` shortcode to display a responsive image with a specific aspect ratio. The source link can refer to either an image available in the `/assets/img` folder of your site or a public web location. The shortcode renders the image as a so-called [image set][mozilla_image] to optimize the image for different screen sizes and resolutions. Behind the scenes, Hugo renders the images in `WebP` format and stores them in a local folder (`resources` or `public`). The images are processed using the quality setting specified in the `[imaging]` section of the main [config file][hugo_imaging] (defaults to 75). Supported image types are `.png`, `.jpeg`, `.gif`, `.tiff`, `.bmp`, and `.webp`. A fallback image of type `.jpeg` is provided for older browsers.The shortcode supports the following arguments:
52
186
53
187
| Argument | Required | Description |
54
188
|-----------|----------|-------------|
55
189
| src | Yes | Required url of the image, e.g. "img/boots.jpg" or "https://picsum.photos/id/27/3264/1836".|
56
-
| ratio | No |Aspect ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9". |
190
+
| ratio | No |Optional aspect ratio of the image, either "1x1", "4x3", "16x9", or "21x9". It not specified the original aspect ratio of the image is preserved. |
57
191
| class | No | Optional class attribute of the inner `img` element, e.g. "rounded". |
58
192
| title | No | Optional alternate text of the image. |
59
193
| caption | No | Optional figure caption. |
@@ -68,5 +202,5 @@ As an example, the following shortcode displays an image with rounded corners an
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.
0 commit comments