hackmd-to-html-cli

Title

h3

h4

h5

h6

Horizontal line

---

***

Blockquote

blockquoute

Hello

Using the syntax below to specifiy your name, time and color to vary the blockquotes.
personChengHan WuscheduleSun, Jun 28, 2015 9:59 PM

Even support the nest blockquotes!
personChengHan WuscheduleSun, Jun 28, 2015 10:00 PM

Render CSV as table

You can use write csv in the codeblock:

```csvpreview {header="true"}
firstName,lastName,email,phoneNumber
John,Doe,john@doe.com,0123456789
Jane,Doe,jane@doe.com,9876543210
James,Bond,james.bond@mi6.co.uk,0612345678
```

which rendered to:

Text

~~del~~ del

*italic* italic

_italic_ italic

**bold** bold

__bold__ bold

++inserted++ inserted

==marked== marked

H~2~O H₂O

1^st^ 1^st

{超電磁砲|Railgun} 超電磁砲Railgun

🉑 😄 👍 ♒ 🥵

See repository on github: https://github.com/ksw2000/hackmd-to-html-cli/

hackmd-to-html-cli

Typographic Replacements

Enable typographer option to see result.

© © ® ® ™ ™ (p) (P) ±

test… test… test… test?.. test!..

!!! ??? ,

Remarkable – awesome

“Smartypants, double quotes”

‘Smartypants, single quotes’

List

• Eigensystems
  • Eigenvalue
  • Eigenvector
• Inner-Product Vector Spaces

1. 高海千歌
2. 渡辺曜
3. 桜内梨子

Start numbering with offset

10. 諏訪ななか
11. 高槻かなこ
12. 小宮有紗

Check box

• checked
• unchecked

Table

Container

Externals

YouTube

Vimeo

Gist

Speakerdeck

PDF

Caution: this might be blocked by your browser if not using an https URL.

Figma

MathJax

A matrix is diagonalizable if there is a diagonal matrix and an invertible matrix s.t.

For example:

Code

#include<stdio.h>
int main(){
    printf("hello\n");
    return 0;
}

package main

import (
	"io"
	"log"
	"net/http"
)

func main() {
	http.HandleFunc("/", func(w http.ResponseWriter, req *http.Request) {
		io.WriteString(w, "Hello, TLS!\n")
	})

	// One can use generate_cert.go in crypto/tls to generate cert.pem and key.pem.
	log.Printf("About to listen on 8443. Go to https://127.0.0.1:8443/")
	err := http.ListenAndServeTLS(":8443", "cert.pem", "key.pem", nil)
	log.Fatal(err)
}

plaintext

Specify the start line number for code block

var s = "JavaScript syntax highlighting";
alert(s);
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ' class=""';
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}

Continue the previous code block’s line number

var s = "JavaScript syntax highlighting";
alert(s);

Super long text without breaks

When you’re a carpenter making a beautiful chest of drawers, you’re not going to use a piece of plywood on the back.

UML Diagrams

Sequence Diagrams

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!

Flow Charts

st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...
para=>parallel: parallel tasks

st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1

Graphviz

digraph hierarchy {
  nodesep=1.0 // increases the separation between nodes
  
  node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour
  edge [color=Blue, style=dashed] //All the lines look like this

  Headteacher->{Deputy1 Deputy2 BusinessManager}
  Deputy1->{Teacher1 Teacher2}
  BusinessManager->ITManager
  {rank=same;ITManager Teacher1 Teacher2}  // Put them on the same level
}

Mermaid

pie showData
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

Abc

X:1
T:Speed the Plough
M:4/4
C:Trad.
K:G
|:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA|
GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:|
|:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df|
g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:|

PlantUML

start
if (condition A) then (yes)
  :Text 1;
elseif (condition B) then (yes)
  :Text 2;
  stop
elseif (condition C) then (yes)
  :Text 3;
elseif (condition D) then (yes)
  :Text 4;
else (nothing)
  :Text else;
endif
stop

Vega-Lite

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "https://vega.github.io/editor/data/barley.json"},
  "mark": "bar",
  "encoding": {
    "x": {"aggregate": "sum", "field": "yield", "type": "quantitative"},
    "y": {"field": "variety", "type": "nominal"},
    "color": {"field": "site", "type": "nominal"}
  }
}

Fretboard

More information about sequence diagrams syntax here.
More information about flow charts syntax here.
More information about graphviz syntax here
More information about mermaid syntax here
More information about abc syntax here
More information about vega syntax here
More information about fretboard syntax here

YAML metadata

See: https://hackmd.io/yaml-metadata

Images

![Alt](URL)

![Alt](URL "with title")

![Alt](URL =widthxheight)

Definition Lists

Term 1

Definition 1
with lazy continuation.

Term 2 with inline markup

Definition 2

  { some code, part of Definition 2 }

Third paragraph of definition 2.

Compact style:

Term 1

Definition 1

Term 2

Definition 2a

Definition 2b

Abbreviations

The HTML specification is maintained by the W3C.

Footnote

Here is a footnote reference,^[1] and another.^[2]