Examples

Table of Contents:

  1. Sample Diagrams
    1. Mermaid
  2. References
  3. reCAPTCHA
  4. Fonts
  5. SVG

Sample Diagrams

gohugo

123412341234123412341234

Mermaid

Mermaid

Mermaid Codeblock

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts 
prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

Add the following code to the header in order to get rednering done:

  {{/* Mermaid Diagrams */}}
  {{ if .Store.Get "hasMermaid" }}
  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
  </script>

Mermaid Shortcut

flowchart LR y("👫 You") --> h{"🤝 Found this helpful?"} h --> |Yes| r[/"⭐ Check out my featured posts!"/] h --> |No| su[/"📝 Suggest changes by clicking near the title"/] click r "/categories/featured" _blank

Add line numbers to code block:

1

import os

tree -> Under construction

Linux
  Android
  Debian
    Ubuntu
      Lubuntu
      Kubuntu
      Xubuntu
      Xubuntu
    Mint
  Centos
  Fedora

References

Copy Testing

import re
import re
with open('file','r') as f:
    file = f.readlines()

reCAPTCHA

Stack Overflow

Upgrading from reCAPTCHA v2 to reCAPTCHA v3 using google developers guide:

Google Developers Guide

Add to header of where you need reCAPTCHA v2:

  <head>
    <script src="https://www.google.com/recaptcha/api.js?render=<insert public key>"></script>
    <script>
      <!-- Replace the variables below. -->
      function onSubmit() {
        document.getElementById("contactForm").submit();
      }
    </script>
  </head>

I use Formspree which allows for validation and form completion. So, I use this shortcode:

<body>
  <form id="contactForm" class="black-80 sans-serif" action="https://formspree.io/<yourkey>" accept-charset="UTF-8" action="{{ .Get " action" }}" method="POST" role="Form">
    <input type="text" id="name" name="name" class="{{ $.Scratch.Get " inputClasses" }}" required placeholder="Your Name" aria-labelledby="name" />
    <p>
      <input type="email" id="email" name="email" class="{{ $.Scratch.Get " inputClasses" }}" required placeholder="Email Address" aria-labelledby="email" />
    <div class="requirements f6 gray glow i ph3 overflow-hidden">
      {{ i18n "emailRequiredNote" }}
    </div>
    <!-- add hidden Honeypot input to prevent spams -->
    <input type="hidden" name="_gotcha" style="display:none !important">
    <textarea id="message" name="message" class="{{ $.Scratch.Get " inputClasses" }} h4" aria-labelledby="message" required placeholder="Your Message Here"></textarea>
    <button class="g-recaptcha db w-100 mv2 white pa3 bn hover-shadow hover-bg-blue bg-animate bg-silver" data-sitekey="<insert public key>" data-callback='onSubmit' data-action='submit'>
      Submit
    </button>
  </form>
</body>

Fonts

See: Family Fonts

SVG

See Inline SVG Icons

GitLab Repo Roneo Shortodes

GitHub Repo Roneo Shortcode Collections

Shortcodes to help display images and render markup for hugo.