Themes

Based on hugo:

Shortcuts

  • new post: hugo new posts/name-of-the-post.md
  • local server: hugo server

Techniques & Gadgets

Draw diagrams

  1. Use mermaid
  2. Hugo natively support approach (use asciiflow or Diagon + GoAT)

Example:

┌│└───A──g─┌│││┴e─▲││└──n────t───────┐│┘──◄─────────────────────────────────────►─┌┤└┌│└──O───┌┤└─b──A──R──s──c──e──e──t┬│▼─w┬│▼─r──i──a──v──o──r──a──n──d──t───┐│┘─i─┐├┘◄─o────n───┐│┘──◄────────────────────────────────────────┌┤└───E────n────v────i────r──┐││▼─o┬│││┘─n──m──e──n──t─┐│┘

Its code (be careful when copying the code, because there are two extra spaces in every line):

  ```goat
                         ┌────────┐
      ┌─────────────────►│ Action ├──────────────────────┐
      │                  └───┬────┘                      │
      │                      │                           │
      │                      ▼                           ▼
  ┌───┴───┐               ┌──────┐                 ┌───────────┐
  │ Agent │◄──────────────┤Reward│◄────────────────┤Environment│
  └───────┘               └──┬───┘                 └─────┬─────┘
      ▲                      │                           │
      │                      ▼                           │
      │                 ┌───────────┐                    │
      └─────────────────┤Observation│◄───────────────────┘
                        └───────────┘
  ```

Extensions

Math Typesetting

I use MathJax.

Basic usage of Mathjax: MathJax basic tutorial and quick reference or MathJax - Tex : Quick Reference Guide

Admonition

  • Use admonition shortcodes of loveit in PaperModX

  • How to transplant: see this blog

  • Documentation of loveit admonition

  • Example:

    This is a tip
    A tip banner

    Its shortcode:

    {{< admonition type=tip title="This is a tip" open=true >}}
A **tip** banner
{{< /admonition >}}

    or

    {{< admonition tip "This is a tip" true >}}
A **tip** banner
{{< /admonition >}}

Mermaid

Mermaid lets you create diagrams by writing text in markdown files.

  • See this blog to add this extension to your blog.

    But I want to use mermaid v10, so I change the mermaid.html from

    <script
  type="application/javascript"
  src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"
></script>
<script>
  var config = {
    startOnLoad: true,
    theme:'{{ if site.Params.mermaid.theme }}{{ site.Params.mermaid.theme }}{{ else }}dark{{ end }}',
    align:'{{ if site.Params.mermaid.align }}{{ site.Params.mermaid.align }}{{ else }}center{{ end }}',
  };
  mermaid.initialize(config);
</script>

    to

    <script
  type="module"
>
  var config = {
    startOnLoad: true,
    theme:'{{ if site.Params.mermaid.theme }}{{ site.Params.mermaid.theme }}{{ else }}default{{ end }}',
    align:'{{ if site.Params.mermaid.align }}{{ site.Params.mermaid.align }}{{ else }}center{{ end }}',
  };
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize(config);

</script>

  • Its offical documentation

  • Its live editor

  • And I choose the theme neutral

  • Example:

    sequenceDiagram Alice->>+John: Hello John, how are you? Alice->>+John: John, can you hear me? John-->>-Alice: Hi Alice, I can hear you! John-->>-Alice: I feel great!

    Its shortcode:

    {{< mermaid >}}
sequenceDiagram
  Alice->>+John: Hello John, how are you?
  Alice->>+John: John, can you hear me?
  John-->>-Alice: Hi Alice, I can hear you!
  John-->>-Alice: I feel great!
{{< /mermaid >}}

Image Color Inversion and Zoom-In Effect

I combine these codes below to improve presentation of images: