Wisely's Store

Shortcodes

wiselyjing@gmail.com (wisely) — 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

`1`	`System.out.println('Hello World!');`

`1`	`console.log('Hello World!');`

Tabs for general purpose

Windows section

`1`	`console.log('Hello World!');`

⚠️Becareful that the content in the tab should be different from each other. The tab makes unique id hashes depending on the tab contents. So, If you just copy-paste the tabs with multiple times, since it has the same contents, the tab will not work.

Markdown Syntax Guide

wiselyjing@gmail.com (wisely) — 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

wiselyjing@gmail.com (wisely) — 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

wiselyjing@gmail.com (wisely) — 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

*** /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	''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

Makefile

CC=gcc
CFLAGS=-I.

hellomake: hellomake.o hellofunc.o
     $(CC) -o hellomake hellomake.o hellofunc.o -I.

CC=gcc
CFLAGS=-I.

hellomake: hellomake.o hellofunc.o
     $(CC) -o hellomake hellomake.o hellofunc.o -I.

JSON

1
2
3

{"employees":[
    {"firstName":"John", "lastName":"Doe"},
]}

Markdown

1
2
3

**bold** 
*italics* 
[link](www.example.com)

JavaScript

`1`	`document.write('Hello, world!');`

CSS

1
2
3

body {
    background-color: red;
}

Objective C

#import <stdio.h>

int main (void)
{
	printf ("Hello world!\n");
}

Python

`1`	`print "Hello, world!"`

XML

<employees>
    <employee>
        <firstName>John</firstName> <lastName>Doe</lastName>
    </employee>
</employees>

Perl

`1`	`print "Hello, World!\n";`

Bash

`1`	`echo "Hello World"`

PHP

`1`	`<?php echo '<p>Hello World</p>'; ?>`

CoffeeScript

`1`	`console.log(“Hello world!”);`

C#

using System;
class Program
{
    public static void Main(string[] args)
    {
        Console.WriteLine("Hello, world!");
    }
}

C++

#include <iostream.h>

main()
{
    cout << "Hello World!";
    return 0;
}

SQL

1
2

SELECT column_name,column_name
FROM table_name;

Go

package main
import "fmt"
func main() {
    fmt.Println("Hello, 世界")
}

Ruby

`1`	`puts "Hello, world!"`

Java

import javax.swing.JFrame;  //Importing class JFrame
import javax.swing.JLabel;  //Importing class JLabel
public class HelloWorld {
    public static void main(String[] args) {
        JFrame frame = new JFrame();           //Creating frame
        frame.setTitle("Hi!");                 //Setting title frame
        frame.add(new JLabel("Hello, world!"));//Adding text to frame
        frame.pack();                          //Setting size to smallest
        frame.setLocationRelativeTo(null);     //Centering frame
        frame.setVisible(true);                //Showing frame
    }
}

Latex Equation

`1`	`\frac{d}{dx}\left( \int_{0}^{x} f(u)\,du\right)=f(x).`

import {x, y} as p from 'point';
const ANSWER = 42;

class Car extends Vehicle {
  constructor(speed, cost) {
    super(speed);

    var c = Symbol('cost');
    this[c] = cost;

    this.intro = `This is a car runs at
      ${speed}.`;
  }
}

for (let num of [1, 2, 3]) {
  console.log(num + 0b111110111);
}

function $initHighlight(block, flags) {
  try {
    if (block.className.search(/\bno\-highlight\b/) != -1)
      return processBlock(block.function, true, 0x0F) + ' class=""';
  } catch (e) {
    /* handle exception */
    var e4x =
        <div>Example
            <p>1234</p></div>;
  }
  for (var i = 0 / 2; i < classes.length; i++) {
  // "0 / 2" should not be parsed as regexp
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
  console.log(Array.every(classes, Boolean));
}

export  $initHighlight;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hello world</title>
  <link href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="index.css" />
</head>
<body>
  <div id="app"></div>
  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
  <script src="vendor/prism.js"></script>
  <script src="examples.bundle.js"></script>
</body>
</html>

/*********************************************************
* General
*/
pre[class*="language-"],
code {
  color: #5c6e74;
  font-size: 13px;
  text-shadow: none;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  line-height: 1.5;
  tab-size: 4;
  hyphens: none;
}
pre[class*="language-"]::selection,
code::selection {
  text-shadow: none;
  background: #b3d4fc;
}
@media print {
  pre[class*="language-"],
  code {
    text-shadow: none;
  }
}
pre[class*="language-"] {
  padding: 1em;
  margin: .5em 0;
  overflow: auto;
  background: #f8f5ec;
}
:not(pre) > code {
  padding: .1em .3em;
  border-radius: .3em;
  color: #db4c69;
  background: #f9f2f4;
}

Math Typesetting

wiselyjing@gmail.com (wisely) — 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

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

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

Viz support

wiselyjing@gmail.com (wisely) — 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

wiselyjing@gmail.com (wisely) — 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

wiselyjing@gmail.com (wisely) — 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

wiselyjing@gmail.com (wisely) — 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

wiselyjing@gmail.com (wisely) — 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?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}

stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]

pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15

MathJax support

wiselyjing@gmail.com (wisely) — 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

wiselyjing@gmail.com (wisely) — 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.6180339887… $

Inline math: $ \varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887… $

Flowchart support

wiselyjing@gmail.com (wisely) — 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