diff --git a/layouts/shortcodes/articlelist.html b/layouts/shortcodes/articlelist.html
new file mode 100644
index 000000000..2755b1e2d
--- /dev/null
+++ b/layouts/shortcodes/articlelist.html
@@ -0,0 +1,18 @@
+<table class="utils-table">
+<thead>
+	<tr>
+		<th class="col-title">Title</td>
+		<th class="col-author">Author</td>
+		<th class="col-date">Date</td>
+	</tr>
+</thead>
+<tbody>
+	{{ range $ind, $art := $.Site.Data.articles.article }}
+	<tr>
+		<td><a href="{{$art.url}}" target="_blank">{{$art.title | markdownify }}</a></td>
+		<td>{{ $art.author | markdownify }}</td>
+		<td>{{ $art.date }}</td>
+	</tr>
+	{{ end }}
+</tbody>
+</table>
diff --git a/layouts/shortcodes/code.html b/layouts/shortcodes/code.html
new file mode 100644
index 000000000..6df49956a
--- /dev/null
+++ b/layouts/shortcodes/code.html
@@ -0,0 +1,15 @@
+<div class="code relative bg-primary-color moon-gray" id="{{.Get "file" | urlize}}">
+	{{- with .Get "file" -}}
+		<div class="filename san-serif f6 dib lh-solid pl2 pv2">{{.}}</div>
+	{{- end -}}
+
+	{{ if ne (.Get "copy") "false" }}
+		<button class="needs-js copy bg-accent-color-dark f6 absolute top-0 right-0 lh-solid hover-bg-primary-color-dark bn white ph3 pv2" title="Copy this code to your clipboard." data-clipboard-action="copy" aria-label="copy button">
+		</button>
+		{{/* Functionality located within filesaver.js The copy here is located in the css with .copy class so it can be replaced with JS on success */}}
+	{{end}}
+	<div class="code-copy-content nt3" {{with .Get "download"}}id="{{.}}"{{end}}>
+		{{- .Inner -}}
+	</div>
+
+</div>
diff --git a/layouts/shortcodes/directoryindex.html b/layouts/shortcodes/directoryindex.html
new file mode 100644
index 000000000..37e7d3ad1
--- /dev/null
+++ b/layouts/shortcodes/directoryindex.html
@@ -0,0 +1,13 @@
+{{- $pathURL := .Get "pathURL" -}}
+{{- $path := .Get "path" -}}
+{{- $files := readDir $path -}}
+<table>
+    <th>Size in bytes</th>
+    <th>Name</th>
+{{- range $files }}
+    <tr>
+        <td>{{ .Size }}</td>
+        <td><a href="{{ $pathURL }}{{ .Name | relURL }}" target="_blank"> {{ .Name }}</a></td>
+    </tr>
+{{- end }}
+</table>
diff --git a/layouts/shortcodes/docfile.html b/layouts/shortcodes/docfile.html
new file mode 100644
index 000000000..2f982aae8
--- /dev/null
+++ b/layouts/shortcodes/docfile.html
@@ -0,0 +1,11 @@
+{{ $file := .Get 0}}
+{{ $filepath := $file }}
+{{ $syntax := index (split $file ".") 1 }}
+{{ $syntaxoverride := eq (len .Params) 2 }}
+<div class="code-copy" id="{{$file | urlize}}">
+	<div class="code-copy-header"><div class="action-buttons"></div><span title="" class="filename">{{$filepath}}</span><i class="icon-{{$syntax}} input"></i></div>
+	<button class="copy-button" title="Copy to clipboard" data-clipboard-snippet>
+			<div class="copy-text"><i class="icon-clipboard"></i> COPY</div>
+	</button>
+	<pre><code class="language-{{if $syntaxoverride}}{{.Get 1}}{{else}}{{$syntax}}{{end}}">{{- readFile $file -}}</code></pre>
+</div>
diff --git a/layouts/shortcodes/exfile.html b/layouts/shortcodes/exfile.html
new file mode 100644
index 000000000..226782957
--- /dev/null
+++ b/layouts/shortcodes/exfile.html
@@ -0,0 +1,12 @@
+{{ $file := .Get 0}}
+{{ $filepath := replace $file "static/" ""}}
+{{ $syntax := index (split $file ".") 1 }}
+{{ $syntaxoverride := eq (len .Params) 2 }}
+<div class="code-copy" id="{{$file | urlize}}">
+	<div class="code-copy-header examplesite"><div class="action-buttons"></div><span class="filename"><i class="icon-website"></i>{{$filepath}}</span><i class="icon-{{$syntax}} input"></i></div>
+	<button class="copy-button" title="Copy to clipboard" data-clipboard-snippet>
+			<div class="copy-text"><i class="icon-clipboard"></i> COPY</div>
+	</button>
+	<pre><code class="language-{{if $syntaxoverride}}{{.Get 1}}{{else}}{{$syntax}}{{end}}">{{- readFile $file -}}</code></pre>
+	<a role="button" target="_blank" href="{{$.Site.Params.ghdocsrepo}}{{$file}}" title="See {{$filepath}} source on GitHub" class="tooltip see-on-github" data-tooltip="See {{$filepath}} source on GitHub">Source<i class="icon-github"></i></a>
+</div>
diff --git a/layouts/shortcodes/exfm.html b/layouts/shortcodes/exfm.html
new file mode 100644
index 000000000..c0429bbe1
--- /dev/null
+++ b/layouts/shortcodes/exfm.html
@@ -0,0 +1,13 @@
+<!-- Similar to exfile.html but *only* pulls the front matter from the example/content/*md -->
+{{ $file := .Get 0}}
+{{ $filepath := replace $file "static/" ""}}
+{{ $syntax := index (split $file ".") 1 }}
+{{ $syntaxoverride := eq (len .Params) 2 }}
+<div class="code-copy" id="{{$file | urlize}}">
+	<div class="code-copy-header examplesite"><div class="action-buttons"></div><span title="" class="filename">{{$filepath}}</span><i class="icon-{{$syntax}} input"></i></div>
+	<button class="copy-button" title="Copy to clipboard" data-clipboard-snippet>
+			<div class="copy-text"><i class="icon-clipboard"></i> COPY</div>
+	</button>
+	<pre><code class="language-{{if $syntaxoverride}}{{.Get 1}}{{else}}{{$syntax}}{{end}}">{{- readFile $file -}}</code></pre>
+	<a role="button" target="_blank" href="{{$.Site.Params.ghdocsrepo}}{{$file}}" title="See {{$filepath}} on GitHub" class="see-on-github">Source<i class="icon-github"></i></a>
+</div>
\ No newline at end of file
diff --git a/layouts/shortcodes/gh.html b/layouts/shortcodes/gh.html
new file mode 100644
index 000000000..0d1a9498e
--- /dev/null
+++ b/layouts/shortcodes/gh.html
@@ -0,0 +1,9 @@
+{{ range .Params }}
+	{{   if eq (substr . 0 1) "@" }}
+	<a href="//github.com/{{ substr . 1 }}">{{ . }}</a>
+	{{   else if eq (substr . 0 2) "0x" }}
+	<a href="//github.com/spf13/hugo/commit/{{ substr . 2 }}">{{ substr . 2 6 }}</a>
+	{{   else }}
+	<a href="//github.com/spf13/hugo/issues/{{ . }}">#{{ . }}</a>
+	{{ end }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/shortcodes/ghrepo.html b/layouts/shortcodes/ghrepo.html
new file mode 100644
index 000000000..e9df40d6a
--- /dev/null
+++ b/layouts/shortcodes/ghrepo.html
@@ -0,0 +1 @@
+<a href="{{$.Site.Params.ghrepo}}" target="_blank">GitHub repository</a>
\ No newline at end of file
diff --git a/layouts/shortcodes/needsexamples.html b/layouts/shortcodes/needsexamples.html
new file mode 100644
index 000000000..05644fe9e
--- /dev/null
+++ b/layouts/shortcodes/needsexamples.html
@@ -0,0 +1,7 @@
+<ul class="utils-list">
+	{{range .Site.Pages }}
+		{{ if .Params.needsexamples }}
+		<li><a href="{{.Site.Params.ghdocsrepo}}content/{{.File.Path}}" target="_blank">{{.Title}} <i class="icon-pencil"></i></a></li>
+		{{ end }}
+	{{ end }}
+</ul>
\ No newline at end of file
diff --git a/layouts/shortcodes/nohighlight.html b/layouts/shortcodes/nohighlight.html
new file mode 100644
index 000000000..238234f17
--- /dev/null
+++ b/layouts/shortcodes/nohighlight.html
@@ -0,0 +1 @@
+<pre><code class="hljs nohighlight">{{ .Inner }}</code></pre>
\ No newline at end of file
diff --git a/layouts/shortcodes/note.html b/layouts/shortcodes/note.html
new file mode 100644
index 000000000..fcf081bd5
--- /dev/null
+++ b/layouts/shortcodes/note.html
@@ -0,0 +1,8 @@
+<aside class="admonition note">
+	<div class="note-icon">
+		{{partial "svg/exclamation.svg" (dict "size" "20px" ) }}
+	</div>
+	<!-- <h2 id="{{if .Get 0}}{{.Get 0 | urlize}}{{else}}note{{end}}">{{if .Get 0}}{{.Get 0 | markdownify}}{{else}}Note{{end}}</h2> -->
+	<!-- <h3>Note</h3> -->
+	<div class="admonition-content">{{- .Inner -}}</div>
+</aside>
diff --git a/layouts/shortcodes/output.html b/layouts/shortcodes/output.html
new file mode 100644
index 000000000..df1a8ae89
--- /dev/null
+++ b/layouts/shortcodes/output.html
@@ -0,0 +1,11 @@
+{{$file := .Get "file"}}
+{{$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 -}}
+	</div>
+</div>
\ No newline at end of file
diff --git a/layouts/shortcodes/readfile.html b/layouts/shortcodes/readfile.html
new file mode 100644
index 000000000..f777abe26
--- /dev/null
+++ b/layouts/shortcodes/readfile.html
@@ -0,0 +1,6 @@
+{{$file := .Get "file"}}
+{{- if eq (.Get "markdown") "true" -}}
+{{- $file  | readFile | markdownify -}}
+{{- else -}}
+{{ $file  | readFile | safeHTML }}
+{{- end -}}
\ No newline at end of file
diff --git a/layouts/shortcodes/tip.html b/layouts/shortcodes/tip.html
new file mode 100644
index 000000000..0b56ac560
--- /dev/null
+++ b/layouts/shortcodes/tip.html
@@ -0,0 +1,8 @@
+<aside class="admonition tip">
+	<div class="tip-icon">
+		{{partial "svg/exclamation.svg" .}}
+	</div>
+	<!-- <h2 id="{{if .Get 0}}{{.Get 0 | urlize}}{{else}}tip{{end}}">{{if .Get 0}}{{.Get 0 | markdownify}}{{else}}Tip{{end}}</h2> -->
+	<!-- <h3>Tip</h3> -->
+	<div class="admonition-content">{{- .Inner -}}</div>
+</aside>
diff --git a/layouts/shortcodes/warning.html b/layouts/shortcodes/warning.html
new file mode 100644
index 000000000..d05057e59
--- /dev/null
+++ b/layouts/shortcodes/warning.html
@@ -0,0 +1,8 @@
+<aside class="admonition warning">
+	<div class="admonition-icon">
+		{{partial "svg/exclamation.svg" .}}
+	</div>
+	<!-- <h2 id="{{if .Get 0}}{{.Get 0 | urlize}}{{else}}warning{{end}}">{{if .Get 0}}{{.Get 0 | markdownify}}{{else}}Warning{{end}}</h2> -->
+	<!-- <h3>Warning</h3> -->
+	<div class="admonition-content">{{- .Inner -}}</div>
+</aside>
diff --git a/layouts/shortcodes/yt.html b/layouts/shortcodes/yt.html
new file mode 100644
index 000000000..6915cec5f
--- /dev/null
+++ b/layouts/shortcodes/yt.html
@@ -0,0 +1,11 @@
+<div class="video-wrapper" data-streaming="youtube" data-videoid="{{.Get "id"}}" >
+	<i class="icon-video-play-button shortcode"></i>
+	{{if (.Get "thumbnail")}}
+	<div style="background-image:url(/images/thumbnails/{{.Get "thumbnail"}})" alt="YouTube Thumbnail" class="video-thumbnail"></div>
+	{{else}}
+	<div style="background-image:url(//img.youtube.com/vi/{{.Get "id"}}/0.jpg)" alt="YouTube Thumbnail" class="video-thumbnail"></div>
+	{{end}}
+</div>
+{{ if (.Get "description") }}
+<div class="video-description">{{ .Get "description" | markdownify }}</div>
+{{ end }}
\ No newline at end of file