Insight Posts Documentation

Documentation about insight post creation with markdown. Use markdown for post, below the complete documentation:

Meta Data

Meta data used in this post are title, date, description, author and tags. Title at this meta data used for title post.

your-post.md

---
title: "Your Post Title"
date: "2024-09-15"
description: "Your post description"
author: "author"
tags:
  - your tag
  - other tag
---

Paragraph

To create paragraph on post same like create paragraph as text.

your-post.md

<!-- first paragraph -->
Commodo eu in adipisicing id eu elit nisi exercitation ipsum mollit cupidatat consequat non. Aute elit nulla sit ipsum pariatur do do esse culpa laboris. Officia est non reprehenderit adipisicing officia deserunt consectetur aute exercitation magna laboris ipsum ut. Veniam reprehenderit Lorem commodo et adipisicing dolor Lorem commodo do incididunt. Id tempor culpa laborum eiusmod est veniam. Officia fugiat mollit dolor adipisicing tempor voluptate proident qui.

<!-- second paragraph -->
Laboris nulla et amet fugiat. Sit amet ad quis in consequat esse incididunt velit est nulla. Irure exercitation excepteur eiusmod mollit ea aute ut qui exercitation aliquip ipsum cupidatat. Sint anim cillum velit magna aliqua officia eu eu reprehenderit tempor aliqua veniam dolore duis. Qui sunt mollit qui exercitation nulla in ullamco fugiat esse cupidatat officia. Eu ipsum enim velit tempor magna ea dolor sint Lorem.

Image

To add image on post, you must put image on public directory, then access it on post with

your-post.md

![Alt text for the image](/yourpath_image.png)

Section

The section will show on the right of the post. The section that will show only ## and the ###.

your-post.md

## Section 1

Eiusmod sint laborum nostrud aliquip excepteur reprehenderit id in aliqua.

### Section 1.1

Nisi veniam et fugiat nostrud nulla incididunt ut eiusmod eiusmod ex velit sunt Lorem.

## Section 2

Pariatur magna sit pariatur in sit ex quis nulla nostrud ipsum proident cillum et et.

## Section 2.1
Excepteur dolor dolor pariatur dolore exercitation.

Bullet and Numbering

To create bullet and numbering you can use - or ^[0-9]+$ for numbering.

your-post.md

- bullet 1
- bullet 2
- bullet 3

1. number 1
2. number 2
3. number 3

bullet 1
bullet 2
bullet 3

number 1
number 2
number 3

Emphasis

To create emphasis on post like this is emphasis. We can use * between word or sentence.

your-post.md

*This is emphasis*

*Hello*

*Good Morning*

Strong

To create strong text on post like this is strong. We can use ** between word or sentence.

your-post.md

**This is strong**

**Hello**

**Good Morning**

Code

Inline Code

To create inline code on post like this is inline code. We can use ` between word or sentence.

your-post.md

`This is inline code`

`Hello`

`Good Morning`

Code Block

To create code block on post. Follow the example below:

your-post.md

'```js title="your-code-title.js"
funtion getData () => {
    console.log("Hello world!");
}
```'

<!-- remove ' -->

Code Block with Line Numbers

To show line numbers in a code block, add line-number=true to the meta:

your-post.md

'```js title="your-code-title.js" line-number=true
funtion getData () => {
    console.log("Hello world!");
}
```'

<!-- remove ' -->

You can also specify a starting line number with line-start=N:

your-post.md

'```js title="your-code-title.js" line-number=true line-start=10
funtion getData () => {
    console.log("Hello world!");
}
```'

<!-- remove ' -->

Highlight Lines

To highlight specific lines, add highlight={lines} to the meta. You can use individual line numbers and ranges:

your-post.md

'```js title="example.js" highlight={1,3-5}
const a = 1;
const b = 2;
const c = 3;
const d = 4;
const e = 5;
```'

<!-- remove ' -->

You can combine highlight with line numbers:

your-post.md

'```js title="example.js" line-number=true highlight={1,4}
const a = 1;
const b = 2;
const c = 3;
const d = 4;
```'

<!-- remove ' -->

Blockquote

Info

your-post.md

> [info]:
>
> this is info blockquote example

output:

Info

this is info blockquote example

Warning

your-post.md

> [warning]:
>
> this is warning blockquote example

output:

Warning

this is warning blockquote example

Tip

your-post.md

> [tip]:
>
> this is tip blockquote example

output:

Tip

this is tip blockquote example

Important

your-post.md

> [important]:
>
> this is important blockquote example

output:

Important

this is important blockquote example

caution

your-post.md

> [caution]:
>
> this is caution blockquote example

output:

Caution

this is caution blockquote example

Note

Note block is doesn't have title header.

your-post.md

> [note]:
>
> this is note blockquote example

output:

This is note blockquote example

Cillum adipisicing sint cupidatat mollit duis.

Tempor proident veniam est veniam minim minim consectetur cupidatat Lorem cupidatat adipisicing. Ea ipsum excepteur pariatur non cupidatat amet exercitation enim id fugiat officia nostrud. Velit laboris laboris qui labore dolore fugiat mollit in laborum labore Lorem.

your-code-title.js

funtion getData () => {
   console.log("Hello world!");
}

Formula (LaTeX)

Formulas are rendered using KaTeX. You can write both inline and block (display) math using standard LaTeX syntax.

Inline Formula

Wrap the expression with single $ to render it inline within a sentence.

your-post.md

The area of a circle is $A = \pi r^2$.

Euler's identity: $e^{i\pi} + 1 = 0$.

output:

The area of a circle is $A = \pi r^2$ .

Euler's identity: $e^{i\pi} + 1 = 0$ .

Block Formula

Wrap the expression with double $$ to render it as a centered display block.

your-post.md

$$
E = mc^2
$$

$$
\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}
$$

$$
\frac{d}{dx}\left(\int_{a}^{x} f(t)\, dt\right) = f(x)
$$

output:

E = mc^2

\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}

\frac{d}{dx}\left(\int_{a}^{x} f(t)\, dt\right) = f(x)

Common LaTeX Syntax

Description	LaTeX	Output
Fraction	$\frac{a}{b}$	$\frac{a}{b}$
Superscript	$x^{2}$	$x^{2}$
Subscript	$x_{i}$	$x_{i}$
Square root	$\sqrt{x}$	$\sqrt{x}$
Summation	$\sum_{i=1}^{n} x_i$	$\sum_{i=1}^{n} x_i$
Product	$\prod_{i=1}^{n} x_i$	$\prod_{i=1}^{n} x_i$
Integral	$\int_{a}^{b} f(x)\,dx$	$\int_{a}^{b} f(x)\,dx$
Greek letters	$\alpha, \beta, \gamma$	$\alpha, \beta, \gamma$
Matrix	$\begin{pmatrix} a & b \\ c & d \end{pmatrix}$	$\begin{pmatrix} a & b \\ c & d \end{pmatrix}$

Tip

$...$ and $$...$$ patterns inside fenced code blocks or inline code are never rendered as math — they are safely ignored during processing.

Diagram (Mermaid)

Diagrams are rendered using Mermaid. Use a fenced code block with the language set to mermaid.

your-post.md

```mermaid
<diagram definition here>
```

Flowchart

your-post.md

```mermaid
flowchart TD
    A([Start]) --> B[Read input]
    B --> C{Is valid?}
    C -->|Yes| D[Process data]
    C -->|No| E[Show error]
    D --> F([End])
    E --> F
```

output:

flowchart TD A([Start]) --> B[Read input] B --> C{Is valid?} C -->|Yes| D[Process data] C -->|No| E[Show error] D --> F([End]) E --> F

Sequence Diagram

your-post.md

```mermaid
sequenceDiagram
    participant Client
    participant Server
    participant DB

    Client->>Server: POST /login
    Server->>DB: Query user
    DB-->>Server: User record
    Server-->>Client: 200 OK + JWT
```

output:

sequenceDiagram participant Client participant Server participant DB Client->>Server: POST /login Server->>DB: Query user DB-->>Server: User record Server-->>Client: 200 OK + JWT

Class Diagram

your-post.md

```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +speak() String
    }
    class Dog {
        +fetch() void
    }
    class Cat {
        +purr() void
    }
    Animal <|-- Dog
    Animal <|-- Cat
```

output:

classDiagram class Animal { +String name +int age +speak() String } class Dog { +fetch() void } class Cat { +purr() void } Animal <|-- Dog Animal <|-- Cat

Entity Relationship Diagram

your-post.md

```mermaid
erDiagram
    USER {
        int id PK
        string name
        string email
    }
    POST {
        int id PK
        string title
        int user_id FK
    }
    COMMENT {
        int id PK
        string body
        int post_id FK
    }
    USER ||--o{ POST : writes
    POST ||--o{ COMMENT : has
```

output:

erDiagram USER { int id PK string name string email } POST { int id PK string title int user_id FK } COMMENT { int id PK string body int post_id FK } USER ||--o{ POST : writes POST ||--o{ COMMENT : has

Tip

Mermaid diagram source inside fenced code blocks with any other language label (e.g. ```md) is never rendered as a diagram — only ```mermaid triggers rendering.

Reference Citations

References allow you to cite sources with numbered inline citations that scroll-link to a reference list at the end of the post.

Inline Citations

In the body of your post, write [N] for a single reference or [N, M] for multiple citations in one bracket. The numbers are automatically converted to clickable anchor links.

your-post.md

This approach is widely used in adaptive testing [1].

Multiple sources can be cited together [1, 2] or separately [3].

You can cite as many as needed in one bracket [1, 2, 3].

Reference List

Add a ## References section at the end of your post. Each entry must start with [N] at the beginning of a line:

your-post.md

## References

[1] Author, A. (2024). *Book Title*. Publisher.

[2] Author, B., & Author, C. (2023). Article title. *Journal Name, 10*(2), 1–20. https://doi.org/...

[3] Author, D. (2022). Conference paper title. *Proceedings of Conference*, 45–60.

When the post is rendered:

[1] in the body becomes [[1]](#ref-1) — a clickable link
[1] Author... in the reference list gets an anchor <a id="ref-1"> so the browser can scroll to it
The scroll position is offset-aware and accounts for the fixed navbar height

Tip

[N] patterns inside fenced code blocks or inline code are never converted — they are safely ignored during processing.

Important

The ## References heading must be at the end of the post and spelled exactly as ## References. Any [N] citations in the body are only processed when this heading is present.