Fix the output shortcode and its usage

Passing the shortcode into the Markdown processor just to get pre and code tags does not make much sense.

content/content-management/archetypes.md

@@ -49,15 +49,13 @@ To override the content type Hugo infers from `[content-section]`, add the `--ki
 
 Running this command in a new site that does not have default or custom archetypes will create the following file:
 
-{{% output file="content/posts/my-first-post.md" %}}
-```
+{{< output file="content/posts/my-first-post.md" >}}
 +++
 date = "2017-02-01T19:20:04-07:00"
 title = "my first post"
 draft = true
 +++
-```
-{{% /output %}}
+{{< /output >}}
 
 {{% note %}}
 In this example, if you do not already have a `content/posts` directory, Hugo will create both `content/posts/` and `content/posts/my-first-post.md` for you.
@@ -121,16 +119,14 @@ $ hugo new posts/my-new-post.md
 
 Hugo then creates a new markdown file with the following front matter:
 
-{{% output file="content/posts/my-new-post.md" %}}
-```
+{{< output file="content/posts/my-new-post.md" >}}
 +++
 categories = ["web development"]
 date = "2017-02-01T19:20:04-07:00"
 tags = ["golang", "hugo"]
 title = "my new post"
 +++
-```
-{{% /output %}}
+{{< /output >}}
 
 We see that the `title` and `date` key-values have been added in addition to the `tags` and `categories` key-values from `archetypes/default.md`.
 
@@ -162,8 +158,7 @@ $ hugo new posts/post-from-custom.md
 
 This time, Hugo recognizes our custom `archetypes/posts.md` archetype and uses it instead of `archetypes/default.md`. The generated file will now include the full list of front matter parameters, as well as the base archetype's `title` and `date`:
 
-{{% output file="content/posts/post-from-custom-archetype.md" %}}
-```
+{{< output file="content/posts/post-from-custom-archetype.md" >}}
 +++
 categories = ""
 date = 2017-02-13T17:24:43-08:00
@@ -171,8 +166,7 @@ description = ""
 tags = ""
 title = "post from custom archetype"
 +++
-```
-{{% /output %}}
+{{< /output >}}
 
 ### Hugo Docs Custom Archetype
 

content/content-management/shortcodes.md

@@ -95,16 +95,14 @@ The `figure` shortcode can use the following named parameters:
 
 #### Example `figure` Output
 
-{{% output file="figure-output-example.html" %}}
-```
+{{< output file="figure-output-example.html" >}}
 <figure>
   <img src="/media/spf13.jpg"  />
   <figcaption>
       <h4>Steve Francia</h4>
   </figcaption>
 </figure>
-```
-{{% /output %}}
+{{< /output >}}
 
 ### `gist`
 
@@ -130,11 +128,9 @@ If the gist contains several files and you want to quote just one of them, you c
 
 #### Example `gist` Output
 
-{{% output file="gist-output.html" %}}
-```
+{{< output file="gist-output.html" >}}
 {{< gist spf13 7896402 >}}
-```
-{{% /output %}}
+{{< /output >}}
 
 #### Example `gist` Display
 
@@ -165,8 +161,7 @@ This shortcode will convert the source code provided into syntax-highlighted HTM
 
 The `highlight` shortcode example above would produce the following HTML when the site is rendered:
 
-{{% output file="tutorials/learn-html/index.html" %}}
-```
+{{< output file="tutorials/learn-html/index.html" >}}
 <span style="color: #f92672">&lt;section</span> <span style="color: #a6e22e">id=</span><span style="color: #e6db74">&quot;main&quot;</span><span style="color: #f92672">&gt;</span>
   <span style="color: #f92672">&lt;div&gt;</span>
    <span style="color: #f92672">&lt;h1</span> <span style="color: #a6e22e">id=</span><span style="color: #e6db74">&quot;title&quot;</span><span style="color: #f92672">&gt;</span>{{ .Title }}<span style="color: #f92672">&lt;/h1&gt;</span>
@@ -175,8 +170,7 @@ The `highlight` shortcode example above would produce the following HTML when th
     {{ end }}
   <span style="color: #f92672">&lt;/div&gt;</span>
 <span style="color: #f92672">&lt;/section&gt;</span>
-```
-{{% /output %}}
+{{< /output >}}
 
 {{% note "More on Syntax Highlighting" %}}
 To see even more options for adding syntax-highlighted code blocks to your website, see [Syntax Highlighting in Developer Tools](/tools/syntax-highlighting/).
@@ -206,11 +200,9 @@ You also have the option to hide the caption:
 
 By adding the preceding `hidecaption` example, the following HTML will be added to your rendered website's markup:
 
-{{% output file="instagram-hide-caption-output.html" %}}
-```
+{{< output file="instagram-hide-caption-output.html" >}}
 {{< instagram BWNjjyYFxVx hidecaption >}}
-```
-{{% /output %}}
+{{< /output >}}
 
 #### Example `instagram` Display
 
@@ -265,11 +257,9 @@ Extract the value from the field `data-id` and pass it to the shortcode:
 
 #### `speakerdeck` Example Output
 
-{{% output file="speakerdeck-example-input.md" %}}
-```
+{{< output file="speakerdeck-example-input.md" >}}
 {{< speakerdeck 4e8126e72d853c0060001f97 >}}
-```
-{{% /output %}}
+{{< /output >}}
 
 #### `speakerdeck` Example Display
 
@@ -297,11 +287,9 @@ 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" %}}
-```
+{{< output file="example-tweet-output.html" >}}
 {{< tweet 877500564405444608 >}}
-```
-{{% /output %}}
+{{< /output >}}
 
 #### Example `tweet` Display
 
@@ -329,11 +317,9 @@ Extract the ID from the video's URL and pass it to the `vimeo` shortcode:
 
 Using the preceding `vimeo` example, the following HTML will be added to your rendered website's markup:
 
-{{% output file="example-vimeo-output.html" %}}
-```
+{{< output file="example-vimeo-output.html" >}}
 {{< vimeo 146022717 >}}
-```
-{{% /output %}}
+{{< /output >}}
 
 {{% 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 `<div>` that wraps the `<iframe>` *and* will remove the inline styles. Note that you will need to call the `id` as a named parameter as well.

content/contribute/documentation.md

@@ -223,12 +223,10 @@ The `output` shortcode is almost identical to the `code` shortcode but only take
 
 The preceding `output` example will render as follows to the Hugo docs:
 
-{{% output file="post/my-first-post/index.html" %}}
-```
+{{< output file="post/my-first-post/index.html" >}}
 <h1>This is my First Hugo Blog Post</h1>
 <p>I am excited to be using Hugo.</p>
-```
-{{% /output %}} -->
+{{< /output >}} -->
 
 ## Blockquotes
 
@@ -278,13 +276,11 @@ Here is a piece of information I would like to draw your **attention** to.
 
 #### Example `note` Output
 
-{{% output file="note-with-heading.html" %}}
-```
+{{< output file="note-with-heading.html" >}}
 {{% note %}}
 Here is a piece of information I would like to draw your **attention** to.
 {{% /note %}}
-```
-{{% /output %}}
+{{< /output >}}
 
 #### Example `note` Display
 
@@ -306,13 +302,11 @@ Here's a bit of advice to improve your productivity with Hugo.
 
 #### Example `tip` Output
 
-{{% output file="tip-output.html" %}}
-```
+{{< output file="tip-output.html" >}}
 {{% tip %}}
 Here's a bit of advice to improve your productivity with Hugo.
 {{% /tip %}}
-```
-{{% /output %}}
+{{< /output >}}
 
 #### Example `tip` Display
 
@@ -334,13 +328,11 @@ This is a warning, which should be reserved for *important* information like bre
 
 #### Example `warning` Output
 
-{{% output file="warning-admonition-output.html" %}}
-```
+{{< output file="warning-admonition-output.html" >}}
 {{% warning %}}
 This is a warning, which should be reserved for *important* information like breaking changes.
 {{% /warning %}}
-```
-{{% /output %}}
+{{< /output >}}
 
 #### Example `warning` Display
 

content/functions/base64.md

@@ -26,12 +26,10 @@ An example:
 <p>SGVsbG8gd29ybGQ = {{ "SGVsbG8gd29ybGQ=" | base64Decode }}</p>
 {{< /code >}}
 
-{{% output file="base-64-output.html" %}}
-```
+{{< output file="base-64-output.html" >}}
 <p>Hello world = SGVsbG8gd29ybGQ=</p>
 <p>SGVsbG8gd29ybGQ = Hello world</p>
-```
-{{% /output %}}
+{{< /output >}}
 
 You can also pass other data types as arguments to the template function which tries to convert them. The following will convert *42* from an integer to a string because both `base64Encode` and `base64Decode` always return a string.
 

content/functions/default.md

@@ -72,11 +72,9 @@ And then using dot notation
 
 Which would return
 
-{{% output file="dot-notation-default-return-value.html" %}}
-```
+{{< output file="dot-notation-default-return-value.html" >}}
 <title>Sane Defaults</title>
-```
-{{% /output %}}
+{{< /output >}}
 
 The following have equivalent return values but are far less terse. This demonstrates the utility of `default`:
 

content/functions/delimit.md

@@ -44,11 +44,9 @@ title: I love Delimit
 <p>Tags: {{ delimit .Params.tags ", " }}</p>
 {{< /code >}}
 
-{{% output file="delimit-page-tags-output.html" %}}
-```
+{{< output file="delimit-page-tags-output.html" >}}
 <p>Tags: tag1, tag2, tag3</p>
-```
-{{% /output %}}
+{{< /output >}}
 
 Here is the same example but with the optional "last" delimiter:
 
@@ -56,11 +54,9 @@ Here is the same example but with the optional "last" delimiter:
 Tags: {{ delimit .Params.tags ", " ", and " }}
 {{< /code >}}
 
-{{% output file="delimit-page-tags-final-and-output.html" %}}
-```
+{{< output file="delimit-page-tags-final-and-output.html" >}}
 <p>Tags: tag1, tag2, and tag3</p>
-```
-{{% /output %}}
+{{< /output >}}
 
 
 [lists]: /templates/lists/

content/functions/safeURL.md

@@ -43,14 +43,12 @@ The following is an example of a sidebar partial that may be used in conjunction
 
 This partial would produce the following HTML output:
 
-{{% output file="bad-url-sidebar-menu-output.html" %}}
-```
+{{< output file="bad-url-sidebar-menu-output.html" >}}
 <!-- This unordered list may be part of a sidebar menu -->
 <ul>
     <li><a href="#ZgotmplZ">IRC: #golang at freenode</a></li>
 </ul>
-```
-{{% /output %}}
+{{< /output >}}
 
 The odd output can be remedied by adding ` | safeURL` to our `.Title` page variable:
 
@@ -63,13 +61,11 @@ The odd output can be remedied by adding ` | safeURL` to our `.Title` page varia
 
 With the `.URL` page variable piped through `safeURL`, we get the desired output:
 
-{{% output file="correct-url-sidebar-menu-output.html" %}}
-```
+{{< output file="correct-url-sidebar-menu-output.html" >}}
 <ul class="sidebar-menu">
     <li><a href="irc://irc.freenode.net/#golang">IRC: #golang at freenode</a></li>
 </ul>
-```
-{{% /output %}}
+{{< /output >}}
 
 [configuration]: /getting-started/configuration/
 [menus]: /content-management/menus/

content/functions/shuffle.md

@@ -29,13 +29,11 @@ aliases: []
 
 This example would return the following:
 
-{{% output file="shuffle-output.html" %}}
-```
+{{< output file="shuffle-output.html" >}}
 <!-- Shuffled sequence =  -->
 <div>2 5 3 1 4</div>
 <!-- Shuffled slice =  -->
 <div>buzz foo bar</div>
-```
-{{% /output %}}
+{{< /output >}}
 
 This example also makes use of the [slice](/functions/slice/) and [seq](/functions/seq/) functions.

content/functions/urlize.md

@@ -51,8 +51,7 @@ The following might be used as a partial within a [single page template][singlet
 
 The preceding partial would then output to the rendered page as follows, assuming the page is being built with Hugo's default pretty URLs.
 
-{{% output file="/blog/greatest-city/index.html" %}}
-```
+{{< output file="/blog/greatest-city/index.html" >}}
 <header>
     <h1>The World's Greatest City</h1>
     <div><a href="/locations/chicago-il/">Chicago IL</a></div>
@@ -68,8 +67,7 @@ The preceding partial would then output to the rendered page as follows, assumin
         </li>
     </ul>
 </header>
-```
-{{% /output %}}
+{{< /output >}}
 
 
 [singletemplate]: /templates/single-page-templates/

content/tools/syntax-highlighting.md

@@ -63,8 +63,7 @@ Highlighting is carried out via the [built-in shortcode](/content-management/sho
 
 ### Example `highlight` Shortcode Output
 
-{{% output file="example-highlight-shortcode-output.html" %}}
-```
+{{< output file="example-highlight-shortcode-output.html" >}}
 <span style="color: #f92672">&lt;section</span> <span style="color: #a6e22e">id=</span><span style="color: #e6db74">&quot;main&quot;</span><span style="color: #f92672">&gt;</span>
   <span style="color: #f92672">&lt;div&gt;</span>
     <span style="color: #f92672">&lt;h1</span> <span style="color: #a6e22e">id=</span><span style="color: #e6db74">&quot;title&quot;</span><span style="color: #f92672">&gt;</span>{{ .Title }}<span style="color: #f92672">&lt;/h1&gt;</span>
@@ -73,8 +72,7 @@ Highlighting is carried out via the [built-in shortcode](/content-management/sho
     {{ end }}
   <span style="color: #f92672">&lt;/div&gt;</span>
 <span style="color: #f92672">&lt;/section&gt;</span>
-```
-{{% /output %}}
+{{< /output >}}
 
 ### Options
 

content/variables/page.md

@@ -213,12 +213,10 @@ Two common situations where this type of front matter field could be introduced
 
 This template would render as follows, assuming you've set [`uglyURLs`](/content-management/urls/) to `false` in your [site `config`](/getting-started/configuration/):
 
-{{% output file="yourbaseurl/review/book01/index.html" %}}
-```
+{{< output file="yourbaseurl/review/book01/index.html" >}}
 <h3><a href="http://www.my-book-link.here">Buy this book</a></h3>
 <p>It was recommended by my Mother.</p>
-```
-{{% /output %}}
+{{< /output >}}
 
 {{% note %}}
 See [Archetypes](/content-management/archetypes/) for consistency of `Params` across pieces of content.

layouts/shortcodes/output.html

@@ -2,10 +2,7 @@
 {{$icon := index (split $file ".") 1 }}
 <div class="code" id="{{$file | urlize}}">
 	<div class="filename" title="{{$file}}">{{$file}}</div>
-<!-- 	<div class="code-icon">
-		<i class="icon-{{$icon}}"></i>
-	</div> -->
 	<div class="code-copy-content output-content">
-	{{- .Inner -}}
+	<pre><code>{{- .Inner | string -}}</code></pre>
 	</div>
 </div>