diff --git a/content/templates/local-file-templates.md b/content/templates/local-file-templates.md
index a34253b7f..32df78b8a 100644
--- a/content/templates/local-file-templates.md
+++ b/content/templates/local-file-templates.md
@@ -38,13 +38,9 @@ in effect becomes both:
 
 So, let's create a new shortcode using `readDir`:
 
-**layouts/shortcodes/directoryindex.html**
+{{% input "layouts/shortcodes/directoryindex.html" %}}<pre><code>{{< readfile "layouts/shortcodes/directoryindex.html" >}}</code></pre>{{% /input %}}
 
-```html
-{{< readfile "layouts/shortcodes/directoryindex.html" >}}
-```
-
-For the files in any given directory, this shortcode usefully lists their basenames and sizes, while providing links to them.
+For the files in any given directory, this shortcode usefully lists the files' basenames and sizes and also creates a link to each of them.
 
 This shortcode [has already been included in this very web site][].
 So, let's list some of its CSS files. (If you click on their names, you can reveal the contents.)