Add paige/code.html shortcode

3 years ago · 85a7435d00
parent 016a9f3e57
commit 85a7435d00
2 changed files with 25 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -472,6 +472,8 @@ title: Search

 ## Shortcodes

+### Images
+
 The `paige/figure` shortcode provides a figure with a centered image and an optional centered caption.
 The image and caption can optionally be displayed inline instead of centered.
 The image has optional alt, title, width, and height attributes,
@ -498,6 +500,23 @@ These are the rest of the named parameters:
    width=500 >}}
 ```

+### Code
+
+The `paige/code` shortcode provides a figure with centered, highlighted code and an optional caption.
+
+These are the names and positions of the parameters:
+
+```
+{{< paige/code lang="go" caption="My caption" options="linenos=true" >}}
+<!doctype html>
+<html lang="en">
+<body>
+  <p>Test</p>
+</body>
+</html>
+{{< /paige/code >}}
+```
+
 ## Customization

 If `partials/paige/head-last.html` exists in the site, it is included at the end of the head tag.
--- a/layouts/shortcodes/paige/code.html
+++ b/layouts/shortcodes/paige/code.html
@ -0,0 +1,6 @@
+<figure class="align-items-center d-flex flex-column">
+    {{ highlight .Inner (.Get 0 | default (.Get "lang")) (.Get 2 | default (.Get "options")) }}
+    {{ with (.Get 1 | default (.Get "caption")) }}
+    <figcaption class="figure-caption">{{ . }}</figcaption>
+    {{ end }}
+</figure>