Hugo Zzo Theme

Shortcodes

zzossig@gmail.com (zzossig) — Sat, 25 Jan 2020 06:40:51 +0900

Markdownify box This is boxmd shortcode Simple box This is **box** shortcode Code tabs Make it easy to switch between different code java javascript 1 System.out.println('Hello World!'); 1 console.log('Hello World!'); 'use strict'; var containerId = JSON.parse("\"d96f892eb0443615\""); var containerElem = document.getElementById(containerId); var codetabLinks = null; var codetabContents = null; var ids = []; if (containerElem) { codetabLinks = containerElem.

Markdown Syntax Guide

zzossig@gmail.com (zzossig) — Fri, 20 Dec 2019 12:00:06 +0900

This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.

Rich Content

zzossig@gmail.com (zzossig) — Thu, 19 Dec 2019 12:00:06 +0900

Hugo ships with several Built-in Shortcodes for rich content, along with a Privacy Config and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.

Syntax highlighting

zzossig@gmail.com (zzossig) — Wed, 18 Dec 2019 10:33:41 +0900

Code Syntax Highlighting Verify the following code blocks render as code blocks and highlight properly. More about tuning syntax highlighting is the Hugo documentation. Diff 1 2 3 4 5 6 7 8 9 10 *** /path/to/original ''timestamp'' --- /path/to/new ''timestamp'' *************** *** 1 **** ! This is a line. --- 1 --- ! This is a replacement line. It is important to spell -removed line +new line *** /path/to/original

Math Typesetting

zzossig@gmail.com (zzossig) — Tue, 17 Dec 2019 12:00:06 +0900

We need goldmark katex entension which is not yet we have: [https://github.com/gohugoio/hugo/issues/6544](https://github.com/gohugoio/hugo/issues/6544)

Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.

Emoji Support

zzossig@gmail.com (zzossig) — Mon, 16 Dec 2019 12:00:06 +0900

Emoji can be enabled in a Hugo project in a number of ways.

Viz support

zzossig@gmail.com (zzossig) — Mon, 18 Nov 2019 21:00:06 +0900

digraph G { subgraph cluster_0 { style=filled; color=lightgrey; node [style=filled,color=white]; a0 -> a1 -> a2 -> a3; label = "process #1"; } subgraph cluster_1 { node [style=filled]; b0 -> b1 -> b2 -> b3; label = "process #2"; color=blue } start -> a0; start -> b0; a1 -> b3; b2 -> a3; a3 -> a0; a3 -> end; b3 -> end; start [shape=Mdiamond]; end [shape=Msquare]; }

Wavedrom support

zzossig@gmail.com (zzossig) — Mon, 18 Nov 2019 18:00:06 +0900

{ "signal": [ {"name": "CLK", "wave": "p.....|..."}, {"name":"DAT", "wave":"x.345x|=.x", "data":["A","B","C","D"]}, {"name": "REQ", "wave": "0.1..0|1.0"}, {}, {"name": "ACK", "wave": "1.....|01."} ]}

Chart support

zzossig@gmail.com (zzossig) — Mon, 18 Nov 2019 12:00:06 +0900

{ "type": "bar", "data": { "labels": ["One", "Two", "Three", "Four", "Five", "Six"], "datasets": [{ "label": "# of Votes", "data": [12, 19, 3, 5, 3, 8] }] } } { "type": "line", "data": { "labels": ["One", "Two", "Three", "Four", "Five", "Six"], "datasets": [ { "label": "# of Votes", "data": [12, 19, 3, 5, 2, 3], "backgroundColor":"transparent", "borderColor":"orange" }, { "label": "Some other set", "data": [15, 8, 13, 5, 5, 9], "backgroundColor":"transparent", "borderColor":"#44ccff" } ] } }

JS Sequence Diagram support

zzossig@gmail.com (zzossig) — Mon, 18 Nov 2019 12:00:06 +0900

Alice->Bob: Hello Bob, how are you? Note right of Bob: Bob thinks Bob-->Alice: I am good thanks! Title: Here is a title A->B: Normal line B-->C: Dashed line C->>D: Open arrow D-->>A: Dashed open arrow

Mermaid support

zzossig@gmail.com (zzossig) — Sun, 17 Nov 2019 12:00:06 +0900

graph TD; A-->B; A-->C; B-->D; C-->D; 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 <br/>prevail... John-->Alice: Great! John->Bob: How about you? Bob-->John: Jolly good! graph TD A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] C -->|Two| E[Result 2] gantt section Section Completed :done, des1, 2014-01-06,2014-01-08 Active :active, des2, 2014-01-07, 3d Parallel 1 : des3, after des1, 1d Parallel 2 : des4, after des1, 1d Parallel 3 : des5, after des3, 1d Parallel 4 : des6, after des4, 1d classDiagram Class01 <|-- AveryLongClass : Cool <<interface>> Class01 Class09 --> C2 : Where am i?

MathJax support

zzossig@gmail.com (zzossig) — Sat, 16 Nov 2019 12:00:06 +0900

When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

Katex support

zzossig@gmail.com (zzossig) — Fri, 15 Nov 2019 12:00:06 +0900

The following $$ \int_{a}^{b} x^2 dx $$ Is an integral $$ \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } $$ Enable Katex in the config file by setting the katex param to true. This will import the necessary Katex CSS/JS. See the online reference of supported TeX functions. Note: For inline math to render correctly, your content file extension must be .mmark. See the official mmark site. Inline math: $ \varphi = \dfrac{1+\sqrt5}{2}= 1.

Flowchart support

zzossig@gmail.com (zzossig) — Thu, 14 Nov 2019 12:00:06 +0900

st=>start: Start|past:>http://www.google.com[blank] e=>end: End|future:>http://www.google.com op1=>operation: My Operation|past op2=>operation: Stuff|current sub1=>subroutine: My Subroutine|invalid cond=>condition: Yes or No?|approved:>http://www.google.com c2=>condition: Good idea|rejected io=>inputoutput: catch something...|future st->op1(right)->cond cond(yes, right)->c2 cond(no)->sub1(left)->op1 c2(yes)->io->e c2(no)->op2->e