How to create code block, command code block, command output block ?

Hi there, first of all thanks for creating this theme. I wrote the following in a Markdown file:

    ```html
    <div role="dialog" aria-labelledby="dialog-heading">
      <button aria-label="close">x</button>
      <h2 id="dialog-heading">Confirmation</h2>
      <p>Press Okay to confirm or Cancel</p>
      <button>Okay</button>
      <button>Cancel</button>
    </div>



But this resulted in a code block without copy button like this:

![image](https://user-images.githubusercontent.com/68782815/139706904-d3044d75-d0c7-4236-99f2-a9d013dc6204.png)

How to generate a code block **with** copy button ?

---

Also, how to generate the following ?
1)  Command code block (prefixed with $)
2)  Collapsible command output block 
3)  Command code block (prefixed with $) with copy button
4)  File tree with language/application specific icons
5) asciinema embeds

![image](https://user-images.githubusercontent.com/68782815/139706420-01dc204b-0916-41d4-b950-49dff24b99c1.png)
![image](https://user-images.githubusercontent.com/68782815/139707741-299ddf88-872b-4d20-a8ee-0f650375f20d.png)

**FYI:** I went through the `/themes/colinwilson/layout` folder but did not find any shortcodes for these items, which is usually the way these features are implemented in Hugo. Apart from this, there is also no `/themes/colinwilson/exampleSite` folder, which usually serves as a guide to relate Markdown to outputs rendered by the theme.

**Suggestion:** I feel, the theme must have some example content, so that one can figure out which Markdown code renders into which output. This is especially needed for this Hugo theme, since your content folder is a private submodule. Hugo has the concept of `exampleSite` folder exactly for this purpose.  I would therefore suggest/request that you can:
- put some example markdown files under `/themes/colinwilson/exampleSite/content/articles` 
- create a sample `config.toml` file at `/themes/colinwilson/exampleSite/`

So that one can simply run `hugo serve --themesDir ../..` within the `exampleSite` site folder to get a preview of the theme as well as to learn the markdown formatting guides for all kinds of output (code, command output, language specific list etc.)

**What can I do:** I love to contribute to open source projects. I see that as part of your to-do list you have
>Add useful info for others.

So, I can create a nicely formatted `README.md` containing all the instructions to get up & running with this theme. This can also include Algolia setup/configuration, which will fix [ #176 ](https://github.com/colinwilson/colinwilson.uk/issues/176#issue-1040126355).  @colinwilson **I submitted a [PR](https://github.com/colinwilson/colinwilson.uk/pull/178) for this 😊**.

colinwilson / colinwilson.uk

How to create code block, command code block, command output block ? #177