Home  Home  Home  Contact  Contact  Contact  Stuff  Stuff  Stuff
 Blog  Blog  Blog  FAQ  FAQ  FAQ
 Home  Home  Home  Contact  Contact  Contact  Stuff  Stuff  Stuff
 Blog  Blog  Blog  FAQ  FAQ  FAQ

This Theme Shortcodes

/hugo-theme-w3css-basic.github.io/pages/hugo-theme-w3css-basic/page-shortcodes/img/pixabay.com/penguin-2104173_1920_hu83b593d3e71a64e0d6371de0254604f8_270606_300x0_resize_q75_box.jpg

You can extend Hugo’s built-in shortcodes by creating your own using the same templating syntax as that for single and list pages.

Shortcodes are a means to consolidate templating into small, reusable snippets that you can embed directly inside of your content. In this sense, you can think of shortcodes as the intermediary between page and list templates and basic content files.

https://gohugo.io/templates/shortcode-templates

Shortcodes in this Theme for W3.CSS classes 

alert 

Configuration is in params.toml:

colorAlertPrimary                     = "w3-purple"
colorAlertSecondary                   = "w3-aqua"
colorAlertSuccess                     = "w3-light-green"
colorAlertInfo                        = "w3-light-blue"
colorAlertWarning                     = "w3-yellow"
colorAlertDanger                      = "w3-red"
colorAlertDark                        = "w3-dark-grey"
colorAlertLight                       = "w3-grey"
{{< alert type="primary"   intro="Primary Alert"   >}}This is a primary alert—check it out!   {{< /alert >}}
{{< alert type="secondary" intro="Secondary Alert" >}}This is a secondary alert—check it out! {{< /alert >}}
{{< alert type="success"   intro="Success Alert"   >}}This is a success alert—check it out!   {{< /alert >}}
{{< alert type="info"      intro="Info Alert"      >}}This is a info alert—check it out!      {{< /alert >}}
{{< alert type="warning"   intro="Warning Alert"   >}}This is a warning alert—check it out!   {{< /alert >}}
{{< alert type="danger"    intro="Danger Alert"    >}}This is a danger alert—check it out!    {{< /alert >}}
{{< alert type="dark"      intro="Dark Alert"      >}}This is a dark alert—check it out!      {{< /alert >}}
{{< alert type="light"     intro="Light Alert"     >}}This is a light alert—check it out!     {{< /alert >}}

Primary Alert This is a primary alert—check it out!

Secondary Alert This is a secondary alert—check it out!

Success Alert This is a success alert—check it out!

Info Alert This is a info alert—check it out!

Warning Alert This is a warning alert—check it out!

Danger Alert This is a danger alert—check it out!

Dark Alert This is a dark alert—check it out!

Light Alert This is a light alert—check it out!

w3-notice-icon 

Style 

Defined in:

static/css/w3css-basic.css
/* for shortcodes w3-notice-icon and w3-alert-icon */
.shortcode-danger {
  border-color:#f44336!important
}
.shortcode-warning {
  border-color:#ffeb3b!important
}
.shortcode-info  {
  border-color:#2196F3!important
}
.shortcode-exclamation  {
  border-color:#2a8!important
}
.shortcode-success{
  border-color:#4CAF50!important
}

Success 

{{% w3-notice-icon type="success" %}}
Well done
{{% /w3-notice-icon %}}

renders as

Well done
{{% w3-notice-icon type="success"  heading="Well done" %}}
Well done
{{% /w3-notice-icon %}}

renders as

Well done

A message with header

Info 

{{% w3-notice-icon %}}
A default disclaimer (=> info)
{{% /w3-notice-icon %}}

renders as

A default disclaimer (=> info)
{{% w3-notice-icon heading="I'm a heading" %}}
A default disclaimer with header
{{% /w3-notice-icon %}}

renders as

I'm a heading

A default disclaimer with header
{{% w3-notice-icon type="info" heading="Show Info" %}}
No need for type="info", since this is the default
{{% /w3-notice-icon %}}

renders as

Show Info

No need for type="info", since this is the default

Exclamation 

{{% w3-notice-icon type="exclamation" heading="Show Info" %}}
Type="exclamation" - check it out
{{% /w3-notice-icon %}}

renders as

Show Info

Type="exclamation" - check it out

Warning 

{{% w3-notice-icon type="warning" heading="Keep in mind" %}}
A warning disclaimer
{{% /w3-notice-icon %}}

renders as

Keep in mind

A warning disclaimer

Danger 

{{% w3-notice-icon type="danger" %}}
A check disclaimer
{{% /w3-notice-icon %}}

renders as

Watch out
{{% w3-notice-icon type="danger" heading="Careful" %}}
Watch out
{{% /w3-notice-icon %}}

renders as

Careful

Watch out

w3-alert-icon 

Some examples:

11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{{% w3-alert-icon type="success" %}}
Hi, I'm a success
{{% /w3-alert-icon %}}

{{% w3-alert-icon type="info" heading="I'm info" %}}
An info with title
{{% /w3-alert-icon %}}

{{% w3-alert-icon type="warning" %}}
A warning
{{% /w3-alert-icon %}}

{{% w3-alert-icon type="danger" %}}
Danger: A stronger warning
{{% /w3-alert-icon %}}

{{% w3-alert-icon type="warning" heading="You have been warned"  %}}
A warning with heading
{{% /w3-alert-icon %}}
Hi, I'm a success

I'm info

An info with title
A warning
Danger: A stronger warning

You have been warned

A warning with heading

w3-button-icon 

{{% w3-button-icon                                                %}}Hello world{{% /w3-button-icon %}}
{{% w3-button-icon icon="fab fa-google" href="https://google.com" %}}take me to Google{{% /w3-button-icon %}}
{{% w3-button-icon "/blog"                                        %}}take me to Blog{{% /w3-button-icon %}}
{{% w3-button-icon "/faq" "far fa-question-circle"                %}}take me to FAQ{{% /w3-button-icon %}}
{{% w3-button-icon icon="fas fa-exclamation-triangle" classes="w3-button w3-circle w3-theme-d3" %}}Purge{{% /w3-button-icon %}}

renders to:

 Hello world

 take me to Google

 take me to Blog

 take me to FAQ

 Purge

w3-badge 

42

42

{{% w3-badge            %}}42{{% /w3-badge %}}
{{% w3-badge "w3-green" %}}42{{% /w3-badge %}}

w3-tag 

42

I'm a big one: 42

created with:

{{% w3-tag                    %}}42{{% /w3-tag %}}
{{% w3-tag "w3-blue w3-jumbo" %}}42{{% /w3-tag %}}

w3-quote 

Some examples:

{{% w3-quote }}
*a fool with a tool is still a fool*
{{% /w3-quote %}}

{{% w3-quote source="Igor Stravinsky" layout="icon" %}}
**A good composer does not imitate; he steals.**
{{% /w3-quote %}}

{{% w3-quote source="Albert Einstein" layout="icon-br" %}}
*Life is like riding a bicycle. To keep your balance, you must keep moving*
{{% /w3-quote %}}

a fool with a tool is still a fool

A good composer does not imitate; he steals.

Igor Stravinsky


Life is like riding a bicycle. To keep your balance, you must keep moving

Albert Einstein

using blockquote:

{{% w3-quote source="Albert Einstein" layout="blockquote" %}}
*The true sign of intelligence is not knowledge but imagination*
{{% /w3-quote %}}

{{% w3-quote source="Albert Einstein" layout="icon-br-blockquote" %}}
*The only source of knowledge is experience*
{{% /w3-quote %}}

{{% w3-quote source="Albert Einstein" layout="icon-blockquote" %}}
*Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.*
{{% /w3-quote %}}

The true sign of intelligence is not knowledge but imagination

Albert Einstein


The only source of knowledge is experience

Albert Einstein

Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.

Albert Einstein

Style 

static/css/w3css-basic.css
/* for shortcode w3-quote */
.shortcode-quote {
  border-color:#4CAF50!important
}

.shortcode-quote-source {
  font-style: italic;
  font-weight: bold;
}

w3-codespan 

... command: {{% w3-codespan %}}startup *all*{{% /w3-codespan %}} just try it...
... command: {{< w3-codespan >}}startup *all*{{< /w3-codespan >}} just try it...

This is a cool command: startup all just try it... This is a cool command: startup *all* just try it...

Style 

Defined in:

static/css/w3css-basic.css
pre.w3-code, span.w3-codespan{
  font-family:monospace,monospace; !important;
  font-size:1em
}

pre.w3-code, pre.chroma {
    border-radius:4px;
    padding: 0 3px 0 3px;
    border: 1px solid;
    overflow: auto;
}

w3-code 

{{< w3-code >}}
genpasswd() {
    local l=$1
    [ "$l" == "" ] && l=16
    tr -dc A-Za-z0-9 < /dev/urandom | head -c ${l} | xargs
}

genpasswd $1
{{< /w3-code >}}

renders as

genpasswd() {
    local l=$1
    [ "$l" == "" ] && l=16
    tr -dc A-Za-z0-9 < /dev/urandom | head -c ${l} | xargs
}

genpasswd $1

Style 

static/css/w3css-basic.css
pre.w3-code, span.w3-codespan{
  font-family:monospace,monospace; !important;
  font-size:1em
}

pre.w3-code, pre.chroma {
    border-radius:4px;
    padding: 0 3px 0 3px;
    border: 1px solid;
    overflow: auto;
}

Other Shortcodes in this Theme 

icon 

{{< icon "fas fa-home">}}
{{< icon "fas fa-home fa-2x" >}}

renders as

{{< icon name="fas fa-home" >}}
{{< icon name="fas fa-home" size="fa-2x" >}}

renders as

csc 

{{< csc >}}hugo -w -v server --themesDir ../../ --port 1414 --disableFastRender{{< /csc >}}

renders as

Here' a cool command: hugo -w -v server --themesDir ../../ --port 1414 --disableFastRender . But you may use this: hugo -w server. Have fun.

You may give a class name {{< csc k >}}cool code{{< /csc >}}.

renders as

You may give a class name cool code .

Background style for csc is in static/css/w3css-basic.css:

code.chroma {
  background-color: rgba(255, 255, 255, .4) ; /* used e.g. for csc* shortcodes */
}
   | Class   | Type                     |
   | ------- | ------------------------ |
   | err     | Error                    |
   | lntd    | LineTableTD              |
   | lntable | LineTable                |
   | hl      | LineHighlight            |
   | lnt     | LineNumbersTable         |
   | ln      | LineNumbers              |
   | k       | Keyword                  |
   | kc      | KeywordConstant          |
   | kd      | KeywordDeclaration       |
   | kn      | KeywordNamespace         |
   | kp      | KeywordPseudo            |
   | kr      | KeywordReserved          |
   | kt      | KeywordType              |
   | na      | NameAttribute            |
   | nb      | NameBuiltin              |
   | nc      | NameClass                |
   | no      | NameConstant             |
   | nd      | NameDecorator            |
   | ni      | NameEntity               |
   | ne      | NameException            |
   | nf      | NameFunction             |
   | nl      | NameLabel                |
   | nn      | NameNamespace            |
   | nt      | NameTag                  |
   | nv      | NameVariable             |
   | s       | LiteralString            |
   | sa      | LiteralStringAffix       |
   | sb      | LiteralStringBacktick    |
   | sc      | LiteralStringChar        |
   | dl      | LiteralStringDelimiter   |
   | sd      | LiteralStringDoc         |
   | s2      | LiteralStringDouble      |
   | se      | LiteralStringEscape      |
   | sh      | LiteralStringHeredoc     |
   | si      | LiteralStringInterpol    |
   | sx      | LiteralStringOther       |
   | sr      | LiteralStringRegex       |
   | s1      | LiteralStringSingle      |
   | ss      | LiteralStringSymbol      |
   | m       | LiteralNumber            |
   | mb      | LiteralNumberBin         |
   | mf      | LiteralNumberFloat       |
   | mh      | LiteralNumberHex         |
   | mi      | LiteralNumberInteger     |
   | il      | LiteralNumberIntegerLong |
   | mo      | LiteralNumberOct         |
   | o       | Operator                 |
   | ow      | OperatorWord             |
   | c       | Comment                  |
   | ch      | CommentHashbang          |
   | cm      | CommentMultiline         |
   | c1      | CommentSingle            |
   | cs      | CommentSpecial           |
   | cp      | CommentPreproc           |
   | cpf     | CommentPreprocFile       |
   | gd      | GenericDeleted           |
   | ge      | GenericEmph              |
   | gr      | GenericError             |
   | gh      | GenericHeading           |
   | gi      | GenericInserted          |
   | go      | GenericOutput            |
   | gp      | GenericPrompt            |
   | gs      | GenericStrong            |
   | gu      | GenericSubheading        |
   | gt      | GenericTraceback         |
   | w       | TextWhitespace           |

cscb 

{{< cscb s >}}
static/css/syntax/syntax.autumn.css
static/css/syntax/syntax.borland.css
static/css/syntax/syntax.bw.css
{{< /cscb >}}

renders as


static/css/syntax/syntax.autumn.css
static/css/syntax/syntax.borland.css
static/css/syntax/syntax.bw.css

Terminal 

term-in 

{{< term-in >}}
date -d @1435225258
date +%Y%m%d_%H%M%S
{{< /term-in >}}

renders as

date -d @1435225258
date +%Y%m%d_%H%M%S

term-out 

{{< term-out >}}
Don Jun 25 11:40:58 CEST 2015
20180710_172103
{{< /term-out >}}

renders as

Don Jun 25 11:40:58 CEST 2015
20180710_172103

Style 

Page Resources 

res-attach 

{{< res-attach >}}
  Attachments

Parameters 

Argument Position -1 Default What Remark
path 0 "." path to resource page
match 1 ** glob
label 2 Attachments label piped into i18n
icon 3 fas fa-paperclip label icon

res-figure 

{{< res-figure "." "img/pixabay.com/penguin-21*" />}}
{{< res-figure "." "img/pixabay.com/penguin-21*" "Fit"  "200x200" />}}
{{< res-figure "." "img/pixabay.com/penguin-21*" "Fill" "200x200" />}}
{{< res-figure path="." match="img/pixabay.com/penguin-21*" href="https://google.com" />}}

penguin-2104173_1920.jpg
Resize '300x'
penguin-2104173_1920
pixabay.com
Creative Commons CC0
penguin-2104173_1920.jpg
Fit '200x200'
penguin-2104173_1920
pixabay.com
Creative Commons CC0
penguin-2104173_1920.jpg
Fill '200x200'
penguin-2104173_1920
pixabay.com
Creative Commons CC0
penguin-2104173_1920.jpg
Resize '300x'
penguin-2104173_1920
pixabay.com
Creative Commons CC0
resources:
  - src:           img/pixabay/*.jpg
    params:
      origin:      pixabay.com
      license:     Creative Commons CC0
      licenselink: https://pixabay.com/en/service/terms/#usage
      caption:     "%%I%%n%%B%%n%%O"
  - src:           img/pixabay/penguin-2104173_1920.jpg
    params:
      originlink:  https://pixabay.com/en/penguin-rockhopper-penguin-zoo-2104173/
      attrby:      Michael Frankenstein
      attrlink:    https://pixabay.com/en/users/frankenstein-2135887/
      imgcmd:      Resize
      imgopt:      400x

Parameters 

Argument Position -1 Default What Remark
path 0 "." path to resource page use . for current page
match 1 * images in page resource
cmd 2 Resize command Fill, Fit or Resize
opt 3 300x options command options
cap 4 %%N caption format see below
href 5 url when clicked

Caption format 

Code What
%%n newline
%%f .Name
%%F Filename
%%B Basename
%%T .Title
%%N .Title or Basename
%%L license
%%O origin
%%A attr
%%I image info
{{< res-gallery-load-photoswipe >}}
{{< res-gallery match="teaserpics/gohugo.io/*" >}}

renders as

Parameters 

Argument Default What Remark
path resources/images path to resource page use . for current
match **/* for .Match
imgCmd Resize
imgOpt 800x
thumbCmd Fit create thumb
thumbOpt 120x120 thumb size
capLng %%F image caption
capSrt %%N thumb caption
caption-position center none top center bottom (none => hide for thumbs)
caption-effect appear none fade appear slide (none => always visible)
hover-effect zoom none grow shrink slidedown slideup zoom
hover-transition (empty or) none (none => hard transition)

Page Resources Metadata 

Front Matter Param What Remark
Title
attrBy attribution names
attrLink attribution link
caption see below
captionLong same as caption caption for image
captionShort caption for thumb
imgCmd
imgOpt
license
licenseAbrv
licenseLink
licenseLink
origin
originLink
thumbCmd
thumbOpt
  - src:           "**/pixabay.com/*"
    params:
      origin:       pixabay.com
      license:      Creative Commons CC0
      licenseAbrv:  CC0 1.0
      licenseLink:  https://pixabay.com/en/service/terms/
      caption:      "%%N%%n%%A%%n%%L%%n%%O"
      captionShort: "%%O%%n%%l"

Caption format 

Code What
%%n newline
%%f .Name
%%F Filename
%%B Basename
%%T .Title
%%N .Title or Basename
%%l license (using licenseabrv)
%%L license
%%O origin
%%A attr
%%I image info

Style 

{{< heg-load-photoswipe >}}
{{< heg-gallery dir="/images/teaserpics/gohugo.io"   caption-effect="none" hover-effect="grow" />}}

renders as

Style 

Defined in:

static/css/w3css-basic.css
/* -------------------------------------------------- */
/* hugo-easy-gallery */
.gallery figcaption,
.fancy-figure figcaption {
  background: #000;
  color: #FFF;
  font-size: 85%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0.9;
}

.gallery .box figure {
  float: left;
  margin: 1em 4px;
}

.gallery {
  margin: 10px;
  max-width: none;
}

.gallery .box {
  float: left;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

@media only screen and (min-width : 365px) {
  .gallery .box {
    width: 50%;
    padding-bottom: 50%;
  }
}

@media only screen and (min-width : 480px) {
  .gallery .box {
    width: 33.3%;
    padding-bottom: 33.3%;
  }
}

@media only screen and (min-width : 760px) {
  .gallery .box {
    width: 25%;
    padding-bottom: 25%;
  }
}

@media only screen and (min-width : 1024px) {
  .gallery .box {
    width: 20%;
    padding-bottom: 20%;
  }
}

@media only screen and (min-width : 1280px) {
  .gallery .box {
    width: 16%;
    padding-bottom: 16%;
  }
}

heg-figure 

with Thumbs 

{{< heg-load-photoswipe >}}
{{< heg-figure link="/images/photocards/pixabay.com/01-photocard.jpg" thumb="-thumb" caption-position="bottom" caption-effect="none" width="126px" caption="figure caption 1" title="bar 1" >}}
{{< heg-figure link="/images/photocards/pixabay.com/02-photocard.jpg" thumb="-thumb" caption-position="bottom" caption-effect="none" width="160px" caption="figure caption 2" >}}
{{< heg-figure link="/images/photocards/pixabay.com/03-photocard.jpg" thumb="-thumb" caption-position="bottom" caption-effect="none" width="171px" caption="figure caption 3" attr="(c) by bar 3" >}}
{{< heg-figure link="/images/photocards/pixabay.com/04-photocard.jpg" thumb="-thumb" caption-position="bottom" caption-effect="none" width="135px" caption="figure caption 4" attr="(c) by bar 4" attrlink="https://www.example.com" >}}
{{< heg-figure link="/images/photocards/pixabay.com/05-photocard.png" thumb="-thumb" caption-position="bottom" caption-effect="none" width="145px"                    attr="(c) by bar 5" >}}
{{< heg-figure link="/images/photocards/pixabay.com/06-photocard.jpg" thumb="-thumb" caption-position="bottom" caption-effect="none" width="135px"                    attr="(c) by bar 6" attrlink="https://www.example.com" >}}
{{< heg-figure link="/images/photocards/pixabay.com/07-photocard.jpg" thumb="-thumb" caption-position="bottom" caption-effect="none" width="160px"                                        attrlink="https://www.example.com" >}}
{{< heg-figure link="/images/photocards/pixabay.com/08-photocard.jpg" thumb="-thumb" caption-position="bottom" caption-effect="none" width="135px" caption="figure caption 8"             attrlink="https://www.example.com" >}}

renders as

figure caption 1

bar 1

figure caption 1

figure caption 2

figure caption 2

figure caption 3

figure caption 3

(c) by bar 3
figure caption 4

figure caption 4

(c) by bar 5
figure caption 8

figure caption 8

without Thumbs 

{{< heg-load-photoswipe >}}
{{< heg-figure link="/images/photocards/pixabay.com/01-photocard.jpg" caption-position="bottom" caption-effect="none" width="640px" caption="figure caption 1" title="bar 1" >}}
{{< heg-figure link="/images/photocards/pixabay.com/02-photocard.jpg" caption-position="bottom" caption-effect="none" width="640px" caption="figure caption 2" >}}
{{< heg-figure link="/images/photocards/pixabay.com/03-photocard.jpg" caption-position="bottom" caption-effect="none" width="640px" caption="figure caption 3" attr="(c) by bar 3" >}}
{{< heg-figure link="/images/photocards/pixabay.com/04-photocard.jpg" caption-position="bottom" caption-effect="none" width="640px" caption="figure caption 4" attr="(c) by bar 4" attrlink="https://www.example.com" >}}
{{< heg-figure link="/images/photocards/pixabay.com/05-photocard.png" caption-position="bottom" caption-effect="none" width="640px"                    attr="(c) by bar 5" >}}
{{< heg-figure link="/images/photocards/pixabay.com/06-photocard.jpg" caption-position="bottom" caption-effect="none" width="640px"                    attr="(c) by bar 6" attrlink="https://www.example.com" >}}
{{< heg-figure link="/images/photocards/pixabay.com/07-photocard.jpg" caption-position="bottom" caption-effect="none" width="640px"                                        attrlink="https://www.example.com" >}}
{{< heg-figure link="/images/photocards/pixabay.com/08-photocard.jpg" caption-position="bottom" caption-effect="none" width="640px" caption="figure caption 8"             attrlink="https://www.example.com" >}}
{{< heg-figure link="/images/photocards/pixabay.com/09-photocard.jpg" caption-position="bottom" caption-effect="none" width="640px" caption="figure caption 9" title="bar 9" attr="(c) by bar 9" attrlink="https://www.example.com" >}}

renders as

figure caption 1

bar 1

figure caption 1

figure caption 2

figure caption 2

figure caption 3

figure caption 3

(c) by bar 3
figure caption 4

figure caption 4

(c) by bar 5
figure caption 8

figure caption 8

figure caption 9

bar 9

figure caption 9

i18n 

{{< i18n "termNotAvailable" >}}
{{< i18n "foobar" >}}

renders as

empty foobar

given:

- id: termNotAvailable
  translation: "empty"

in i18n/en.yaml

asciicast 

html-tag 

We meet at {{< html-tag time >}}23:59{{< /html-tag >}}. Don't be late.

We meet at . Don't be late.

html-tags 

We meet at {{< html-tags sup time >}}23:59{{< /html-tags >}}. Don't be late.

We meet at . Don't be late.

html-tag-classes 

We meet at {{< html-tag-classes time w3-xxxlarge w3-text-blue >}}23:59{{< /html-tag-classes >}}. Don't be late.

We meet at . Don't be late.

You can use the colorAlert* values (see alert ) using:

We meet at {{< html-tag-classes time w3-xxxlarge colorDanger >}}23:59{{< /html-tag-classes >}}. Don't be late.

We meet at . Don't be late.

This works as well

{{% html-tag-classes div w3-container w3-card-4 w3-theme-d3 %}}
## Hello
World
{{% /html-tag-classes %}}

Hello 

World

classify 

{{< classify "w3-blue" >}}
| foo | bar |
| --- | --- |
| 24  | 42  |
{{< /classify >}}
foo bar
24 42
{{< classify "w3-green" "span" >}}
**foo** bar
24 42
{{< /classify >}}
foo bar 24 42

kbd 

Press {{< kbd "Ctrl+Shift+A" "5" >}} or {{< kbd "CTRL" "ALT" "DEL" >}}

Press Ctrl+Shift+A 5 or CTRL ALT DEL

style 

static/css/w3css-basic.css
kbd {
  font-size: 0.8em;
  background-color: #fff;
  padding: 0px 1px 0px 1px;;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-radius: 4px;
}

highlightfile 

Argument Default What Remark
file the file starting in /static
language python optional: language see list-of-chroma-highlighting-languages
opt linenos=table optional: options for hugo highlight shortcut see highlighting-in-code-fences)
{{< highlightfile file="/static/src/demo-hugo-server.sh" >}}

renders as

demo-hugo-server.sh
1
2
3
4
5
#!/bin/bash

cd $(dirname $0)/..
# hugo server -w --themesDir ../../ --disableFastRender --navigateToChanged
hugo server -e example -w --themesDir ../../ --disableFastRender --navigateToChanged

readfile 

Argument Position -1 Default What Remark
file 0 . a file (or dir) . or ending in /. => directory
md 1 markdownify if "true" => process using markdownify
hll 2 md highlight lang see list-of-chroma-highlighting-languages
{{< readfile "content/." >}}

renders as:

content/.
-rw-rw-r-- 2018-08-25        141 .marquee.md
Lrwxrwxrwx 2018-07-06         15 README.md
drwxrwxr-x 2023-03-05            blog
drwxrwxr-x 2023-03-05            contact
drwxrwxr-x 2023-03-04            faq
drwxrwxr-x 2023-03-05            pages
drwxrwxr-x 2018-06-26            resources
drwxrwxr-x 2018-05-03            search
{{< readfile "pages/hugo-theme-w3css-basic/_index.md" "" "yaml" >}}

renders as:

---
weight:      15
title:       "About this Theme"
date:        "2017-11-22T07:42:26+01:00"
icon:        "fas fa-info fa-fw"
---
{{< readfile file="pages/hugo-theme-w3css-basic/_index.md" hll="yaml" >}}

renders as:

---
weight:      15
title:       "About this Theme"
date:        "2017-11-22T07:42:26+01:00"
icon:        "fas fa-info fa-fw"
---
{{< readfile file="pages/showcase/video-03.md" hll="md" >}}

renders as:

---
title:              "Hugo - Static Site Generator"
date:               2018-01-05T21:01:34+01:00
icon:               "fab fa-youtube"
resImgTeaser:  teaserpics/gohugo.io/hugo-dolor.png
teaserpicNotOnPage:
description: "Giraffe Academy, Tutorial 23. *(Demo page without tags or categories)*"
---

{{< youtube 6U3emx29rKg >}}

*(here is no taxonomy bar since this page has no assigned tags or categories)*

Experimental 

liti: List by Title 

| Argument | Position -1 | Default | What             | Remark                                    |
| -------- | ----------- | ------- | ---------------- | ----------------------------------------- |
| search   | 0           |         | string to search |
| op       | 1           | eq      | eq               | in                                        | (Operator)                                     |
| mod      | 2           |         | i                | (Modifier) i:ignore case                  |
| ul       | 3           |         |                  | if not empty: create unordered list       |
| type     | 4           | regular | regular          | all                                       | regular:$.Site.RegularPages  all:$.Site.Pages) |
| ofm      | 5           | .Title  |                  | (OutputFormat) .Kind .RelPermalink .Title |

An easy and short usage would be:


See more here: {{< liti "Vestibulum" >}}

See more here: Vestibulum 


See more here: {{< liti "highlight" "in" >}}

See more here: Code highlighting  Hugo - highlight 🎨 

Here are more examples using eq operator

Shortcode Result
{{< liti search="Vestibulum" >}} Vestibulum 
{{< liti search="Vestibulum" type="regular" op="eq" >}} Vestibulum 
{{< liti search="VeSTIBULUM" type="regular" op="eq" mod="i" ul="1" >}}
{{< liti search="VeSTIBULUM" mod="i" ul="1" >}}
{{< liti search="Phasellus" type="all" ul="1" >}}
{{< liti search="Phasellus" type="all" ofm=".Title" ul="1" >}}
{{< liti search="Phasellus" type="all" ofm=".Kind .Title" ul="1" >}}
{{< liti search="Phasellus" type="all" ofm=".RelPermalink" >}} /hugo-theme-w3css-basic.github.io/tags/phasellus/   /hugo-theme-w3css-basic.github.io/pages/folder20/folder21/folder211/phasellus/  

Here are some examples using in operator

Shortcode Result
{{< liti op="in" search="theme" >}}
{{< liti op="in" search="theme" mod="i" ul="1" >}}
{{< liti op="in" search="theme" type="all" mod="i" ul="1" >}}
{{< liti op="in" search="theme" type="all" ofm=".Kind .Title" mod="i" ul="1" >}}
{{< liti op="in" search="theme" type="all" ofm=".RelPermalink" mod="i" ul="1" >}}

With positional parameters:


See more here: {{< liti "Vestibulum" "in" >}}

See more here: Vestibulum convallis, lorem a tempus semper  Vestibulum  Vestibulum Convallis 


See more here: {{< liti "Vestibulum" "in" "i" "ul" >}}

See more here:


See more here: {{< liti "Vestibulum" "in" "" "ul" >}}

See more here:

litt: List by Taxonomy/Term (just one result) 

Argument Position -1 Default What Remark
tax 0 tags taxonomy
term 1 * taxonomyterm
ofm 2 .Title (OutputFormat) .Kind .RelPermalink .Title

See more here: {{< litt term="Go" >}}

See more here: go  


See more here: {{< litt "tags" "Go" >}}

See more here: go  


See more here: {{< litt "categories" "Golang" ".RelPermalink" >}}

ToDo: See more here: {{< litt "categories" "Golang" ".RelPermalink" >}}

Argument Position -1 Default What Remark
tax 0 tags string to search in the taxonomy
term 1 * string to search in the taxonomy term
title 2 * string to search in the title
op 3 eq en in
om 4 t t,p (OutputMode) taxonomyterm page
ofm 5 .Title (OutputFormat) .Kind .RelPermalink .Title

Using positional parameters:

Shortcode Result
{{< litx "*" "Nullam" >}}
{{< litx "" "" "Null" "in" "p" >}}

Using named parameters:

Shortcode Result
{{< litx tax="tags" term="go" op="in" >}}
{{< litx term="Nullam" >}}
{{< litx term="Nullam" om="p" >}}
{{< litx term="Nullam" om="tp" >}}
{{< litx term="web" >}}
{{< litx tax="categories" term="web" >}}
{{< litx tax="*" term="web" om="p" >}}
{{< litx tax="*" term="web" om="pt" ofm=".RelPermalink" >}}

hc 

HTML comment may be included in markdown via:

<!--
foo
bar
-->

Via the hc (Html Comment) shortcode HTML comments may be enabled or disabled in the output:

config.toml

[params]
  enableHC = true

Here's how to use it:


{{< hc "foo" >}}

Look in the html source. Here's a comment: seen?


{{< hc >}}
this works
as well
{{< /hc >}}

{{< hc "some test">}}
more 1
more 2
{{< /hc >}}