diff --git a/content/content-management/shortcodes.md b/content/content-management/shortcodes.md index 8ed249f31..99fea8661 100644 --- a/content/content-management/shortcodes.md +++ b/content/content-management/shortcodes.md @@ -5,7 +5,7 @@ description: Shortcodes are simple snippets inside your content files that Hugo godocref: date: 2017-02-01 publishdate: 2017-02-01 -lastmod: 2017-02-01 +lastmod: 2017-03-31 menu: main: parent: "Content Management" @@ -38,11 +38,11 @@ Some shortcodes use or require closing shortcodes. Again like HTML, the opening Here are two examples of paired shortcodes: -```golang +```md {{%/* mdshortcode */%}}Stuff to `process` in the *center*.{{%/* /mdshortcode */%}} ``` -```golang +```md {{* highlight go */>}} A bunch of code here {{* /highlight */>}} ``` @@ -52,7 +52,7 @@ The examples above use two different delimiters, the difference being the `%` ch The `%` character indicates that the shortcode's inner content---called in the [shortcode template][sctemps] with the [`.Inner` variable][scvars]---needs further processing by the page's rendering processor (i.e. markdown via Blackfriday). In the following example, Blackfriday would convert `**World**` to `World`: -```golang +```md {{%/* myshortcode */%}}Hello **World!**{{%/* /myshortcode */%}} ``` @@ -60,7 +60,7 @@ The `%` character indicates that the shortcode's inner content---called in the [ The `<` character indicates that the shortcode's inner content does *not* need further rendering. Often shortcodes without markdown include internal HTML: -```golang +```md {{* myshortcode */>}}
Hello World!
{{* /myshortcode */>}} ``` @@ -118,7 +118,7 @@ https://gist.github.com/spf13/7896402 We can embed the gist in our content via username and gist ID pulled from the URL: -```golang +```md {{* gist spf13 7896402 */>}} ``` @@ -127,7 +127,7 @@ We can embed the gist in our content via username and gist ID pulled from the UR If the gist contains several files and you want to quote just one of them, you can pass the filename (quoted) as an optional third argument: {{% code file="gist-input.md" %}} -```golang +```md {{* gist spf13 7896402 "img.html" */>}} ``` {{% /code %}} @@ -199,7 +199,7 @@ https://www.instagram.com/p/BMokmydjG-M/ #### Example `instagram` Input {{% code file="instagram-input.md" %}} -```golang +```md {{* instagram BMokmydjG-M */>}} ``` {{% /code %}} @@ -207,7 +207,7 @@ https://www.instagram.com/p/BMokmydjG-M/ You also have the option to hide the caption: {{% code file="instagram-input-hide-caption.md" %}} -```golang +```md {{* instagram BMokmydjG-M hidecaption */>}} ``` {{% /code %}} @@ -243,7 +243,7 @@ Read a more extensive description of `ref` and `relref` in the [cross references #### Example `ref` and `relref` Input -```golang +```md [Neat]({{* ref "blog/neat.md" */>}}) [Who]({{* relref "about.md#who" */>}}) ``` @@ -270,7 +270,7 @@ To embed slides from [Speaker Deck][], click on "< /> Embed" (u Extract the value from the field `data-id` and pass it to the shortcode: {{% code file="speakerdeck-example-input.md" %}} -```golang +```md {{* speakerdeck 4e8126e72d853c0060001f97 */>}} ``` {{% /code %}} @@ -302,7 +302,7 @@ https://twitter.com/spf13/status/666616452582129664 Pass the tweet's ID from the URL as a parameter to the `tweet` shortcode: {{% code file="example-tweet-input.md" %}} -```golang +```md {{* tweet 666616452582129664 */>}} ``` {{% /code %}} @@ -312,7 +312,7 @@ Pass the tweet's ID from the URL as a parameter to the `tweet` shortcode: Using the preceding `tweet` example, the following HTML will be added to your rendered website's markup: {{% output file="example-tweet-output.html" %}} -```golang +```html {{< tweet 666616452582129664 >}} ``` {{% /output %}} @@ -336,7 +336,7 @@ https://vimeo.com/channels/staffpicks/146022717 Extract the ID from the video's URL and pass it to the `vimeo` shortcode: {{% code file="example-vimeo-input.md" %}} -```golang +```md {{* vimeo 146022717 */>}} ``` {{% /code %}} @@ -354,7 +354,7 @@ Using the preceding `vimeo` example, the following HTML will be added to your re {{% tip %}} If you want to further customize the visual styling of the YouTube or Vimeo output, add a `class` named parameter when calling the shortcode. The new `class` will be added to the `