JustToThePoint English Website Version
JustToThePoint en español
JustToThePoint in Thai

Hugo III: Shortcuts

Hugo Shortcodes are snippets or templates that can be used to extend basic markdown. They are called inside your markdown files to add HTML snippets to the final rendered HTML. Hugo comes with some built-in shortcodes, Docs, Content Management, Shortcodes.

Besides, they can be parameterized, that gives you additional flexibility and reusability.

Let’s create a shortcode to styling paragraphs with your own CSS classes. Create a file in /layouts/shortcodes/pborder.html and add the following content:

{{ printf "<p class=\"bordes_redondeados\">"}}
	{{- .Inner | safeHTML -}}
{{ printf "</p>"}}

safeHTML declares the inner content passed to the shortcode as “safe” to avoid escaping by Go templates. You need to add some styling in your main.css:

	p.bordes_redondeados
	{
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		color: white;
		border-radius:10px;
		background-color: #00999F;
		outline:none;
		padding: 1em;
	}

Use (/content/myfolder/mypost.md):

	{{% pborder %}}
	This is how you style text with custom css class.
	{{% /pborder %}}

The end result is that it will render:

	<p class="bordes_redondeados">
	This is how you style text with custom css class.
	</p>

This is how you style text with custom css class.

If you want to add raw html to your markdown content, add a shortcode in layouts/shortcode/raw.html with the following content:

{{.Inner}}

It tells Hugo to render the content passed to the shortcode directly into HTML. Use:

{{< raw >}}
	2<sup>3</sup>
	<p class="my_custom_class">
		This is <strong>raw HTML</strong>.
	</p>
{{< /raw >}}

Inline Images. Let’s place an image in the text of a paragraph.

{{< raw >}} 
	<img src="../images/heart.png" style="width:10%;border:0;display:inline;margin:0 2px;box-shadow: none">
{{< /raw >}} respiration, 

… respiration,…

  1. Create a shortcode: /layouts/shortcodes/highlight.html
    <mark>{{ with .Get 0 }}{{.}}{{end}}</mark>
    
  2. Usage:
    This is some {{< highlight "highlighted text" >}}. Cool!
    
  3. Style it:
    /* Styling the text that should be marked or highlighted*/
    mark {
    	background-color: yellow;
    	color: black;
    }
    

This is some highlighted text. Cool!

We can add support for bootstrap-style alert boxes by adding the following shortcode, alert.html

	<div class="alert alert-{{ .Get 0 }}">
		{{ .Inner | markdownify }}
	</div>

We are using .Get to gain access to our positional parameters passed to our shortcode. More specifically, we are retrieving the first parameter: {{ .Get 0 }} We are taking the .Inner variable that is populated with all the content between the opening and closing square bracket, and run it through the Markdown processor. As a result, we can format this content in Markdown as usual.

From now on, you can use it like this:

	{{< alert "primary">}}This is a **primary** alert.{{</alert >}}
This is a primary alert.
{{ $file := .Get "file" | readFile }} # It reads the file given as an argument.
{{ $lang := .Get "language" }} # It saves the source code's language in the $lang variable.
{{ (print "```" $lang "\n" $file "\n```") | markdownify }} 

Highlighting is carried out via the built-in highlight shortcode. Highlighting in code fences is enabled by default.

This is equivalent to:
	``` $lang
	$file - the content of the source code file given as an argument.
	```	

Finally, it pipes this content to markdonify, i.e., it runs this string through the Markdown processor.

B. Use:

    {{% render-code file="/static/uploads/antigravity.py" language="python" %}}

C. Credits: Much Ado About it, https://it.knightnet.org.uk/, Hugo Snippets and Code Examples

import antigravity

def main():
    antigravity.fly()

if __name__ == '__main__':
    main()
    1. Create a new shortcode /layouts/shortcode/staticref.html:
    <a href="{{ .Get 0 | relURL }}"{{ if len .Params | eq 2 }} target="_blank"{{ end }}>{{ .Inner }}</a>

    2. Use:
    {{% staticref "uploads/antigravity.py" "newtab" %}}Download antigravity.py{{% /staticref %}}

    3. Credits: https://wowchemy.com/, Learn, Docs, Create content, Page Elements.

Download antigravity.py

The core of this shortcode is: {{ .Get 0 | relURL }}. It reads the first argument and gets its URL. This is the link’s href attribute that specifies the URL of the page the link goes to.

If two arguments were provided {{ if len .Params | eq 2 }}, it opens the linked document in a new window or tab (target="_blank").

Bitcoin donation

JustToThePoint Copyright © 2011 - 2022 Anawim. ALL RIGHTS RESERVED. Bilingual e-books, articles, and videos to help your child and your entire family succeed, develop a healthy lifestyle, and have a lot of fun.

This website uses cookies to improve your navigation experience.
By continuing, you are consenting to our use of cookies, in accordance with our Cookies Policy and Website Terms and Conditions of use.