Various techniques in al-folio

Created on June 28, 2025

2025   ·   Else

al-folio로 블로그를 바꾼 후 신기한 기능들이 많아서 정리를 해보고자 https://alshedivat.github.io/al-folio/blog/에 있는 기능들을 모아봤다.

detail box

Click here to know more

Additional details, where math \(2x - 1\) and code is rendered correctly.

custom blockquotes

TIP

A tip can be used when you want to give advice related to a certain content.

WARNING

This is a warning, and thus should be used when you want to warn the user

DANGER

This is a danger zone, and thus should be used carefully

tabs

  • var_dump('hello');

  • console.log("hello");

  • pputs 'hello'

pseudocode

pseudocode: true

% This quicksort algorithm is extracted from Chapter 7, Introduction to Algorithms (3rd edition)
\begin{algorithm}
\caption{Quicksort}
\begin{algorithmic}
\PROCEDURE{Quicksort}{$$A, p, r$$}
    \IF{$$p < r$$}
        \STATE $$q = $$ \CALL{Partition}{$$A, p, r$$}
        \STATE \CALL{Quicksort}{$$A, p, q - 1$$}
        \STATE \CALL{Quicksort}{$$A, q + 1, r$$}
    \ENDIF
\ENDPROCEDURE
\PROCEDURE{Partition}{$$A, p, r$$}
    \STATE $$x = A[r]$$
    \STATE $$i = p - 1$$
    \FOR{$$j = p$$ \TO $$r - 1$$}
        \IF{$$A[j] < x$$}
            \STATE $$i = i + 1$$
            \STATE exchange
            $$A[i]$$ with $$A[j]$$
        \ENDIF
        \STATE exchange $$A[i]$$ with $$A[r]$$
    \ENDFOR
\ENDPROCEDURE
\end{algorithmic}
\end{algorithm}

Image, Video, Audio

single image

multiple image

2~3개의 이미지를 같은 줄에 넣기

swiper-container

이미지 여러장 옆으로 넘기면서 보기

images:
  slider: true  # 이미지 여러장 옆으로 넘기면서 보기

img-comparison-slider

좌우로 슬라이더로 비교

images:
  compare: true  # 좌우로 슬라이드하면서 흑백 변경같은거

video

유튜브 링크를 그대로 가져올 경우 다음과 같은 embed 링크로 변환해줘야함

https://youtu.be/kCc8FmEb1nY → https://www.youtube.com/embed/kCc8FmEb1nY

audio

code_diff

code_diff: true
  • diff 사용 
    diff --git a/sample.js b/sample.js
index 0000001..0ddf2ba
--- a/sample.js
+++ b/sample.js
@@ -1 +1 @@
-console.log("Hello World!")
+console.log("Hello from Diff2Html!")
  • diff2html 사용 
    diff --git a/sample.js b/sample.js
index 0000001..0ddf2ba
--- a/sample.js
+++ b/sample.js
@@ -1 +1 @@
-console.log("Hello World!")
+console.log("Hello from Diff2Html!")

typograms

typograms: true

.------------------------.
|.----------------------.|
||"https://example.com" ||
|'----------------------'|
| ______________________ |
||                      ||
||   Welcome!           ||
||                      ||
||                      ||
||  .----------------.  ||
||  | username       |  ||
||  '----------------'  ||
||  .----------------.  ||
||  |"*******"       |  ||
||  '----------------'  ||
||                      ||
||  .----------------.  ||
||  |   "Sign-up"    |  ||
||  '----------------'  ||
||                      ||
|+----------------------+|
.------------------------.

Chart

chart:
  echarts: true
  chartjs: true
  plotly: true
  vega_lite: true

echarts

{
  "title": {
    "text": "ECharts Getting Started Example"
  },
  "responsive": true,
  "tooltip": {},
  "legend": {
    "top": "30px",
    "data": ["sales"]
  },
  "xAxis": {
    "data": ["Shirts", "Cardigans", "Chiffons", "Pants", "Heels", "Socks"]
  },
  "yAxis": {},
  "series": [
    {
      "name": "sales",
      "type": "bar",
      "data": [5, 20, 36, 10, 10, 20]
    }
  ]
}

chartjs

{
  "type": "line",
  "data": {
    "labels": [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July"
    ],
    "datasets": [
      {
        "label": "# of bugs",
        "fill": false,
        "lineTension": 0.1,
        "backgroundColor": "rgba(75,192,192,0.4)",
        "borderColor": "rgba(75,192,192,1)",
        "borderCapStyle": "butt",
        "borderDash": [],
        "borderDashOffset": 0,
        "borderJoinStyle": "miter",
        "pointBorderColor": "rgba(75,192,192,1)",
        "pointBackgroundColor": "#fff",
        "pointBorderWidth": 1,
        "pointHoverRadius": 5,
        "pointHoverBackgroundColor": "rgba(75,192,192,1)",
        "pointHoverBorderColor": "rgba(220,220,220,1)",
        "pointHoverBorderWidth": 2,
        "pointRadius": 1,
        "pointHitRadius": 10,
        "data": [
          65,
          59,
          80,
          81,
          56,
          55,
          40
        ],
        "spanGaps": false
      }
    ]
  },
  "options": {}
}

plotly

{
  "data": [
    {
      "x": [1, 2, 3, 4],
      "y": [10, 15, 13, 17],
      "mode": "markers"
    },
    {
      "x": [2, 3, 4, 5],
      "y": [16, 5, 11, 9],
      "mode": "lines"
    },
    {
      "x": [1, 2, 3, 4],
      "y": [12, 9, 15, 12],
      "mode": "lines+markers"
    }
  ],
  "layout": {
    "title": {
      "text": "Line and Scatter Plot"
    }
  }
}

vega_lite

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A dot plot showing each movie in the database, and the difference from the average movie rating. The display is sorted by year to visualize everything in sequential order. The graph is for all Movies before 2019.",
  "data": {
    "url": "https://raw.githubusercontent.com/vega/vega/main/docs/data/movies.json"
  },
  "transform": [
    {"filter": "datum['IMDB Rating'] != null"},
    {"filter": {"timeUnit": "year", "field": "Release Date", "range": [null, 2019]}},
    {
      "joinaggregate": [{
        "op": "mean",
        "field": "IMDB Rating",
        "as": "AverageRating"
      }]
    },
    {
      "calculate": "datum['IMDB Rating'] - datum.AverageRating",
      "as": "RatingDelta"
    }
  ],
  "mark": "point",
  "encoding": {
    "x": {
      "field": "Release Date",
      "type": "temporal"
    },
    "y": {
      "field": "RatingDelta",
      "type": "quantitative",
      "title": "Rating Delta"
    },
    "color": {
      "field": "RatingDelta",
      "type": "quantitative",
      "scale": {"domainMid": 0},
      "title": "Rating Delta"
    }
  }
}

mermaid (diagrams)

mermaid:
  enabled: true
  zoomable: true

sequenceDiagram
    participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

gantt
    dateFormat  YYYY-MM-DD
    title A Gantt Diagram

    section Section
    Task A           :a1, 2025-01-01, 30d
    Task B           :after a1, 20d
    Task C           :2025-01-10, 12d

detail codeblock

lineos를 통해 줄번호 입력 가능하지만, pretty_table: true 해주면 선이 보여서 별로임



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

 
int main(int argc, char const \*argv[])
{
string myString;

    cout << "input a string: ";
    getline(cin, myString);
    int length = myString.length();

    char charArray = new char * [length];

    charArray = myString;
    for(int i = 0; i < length; ++i){
        cout << charArray[i] << " ";
    }

    return 0;

}

toc

목차를 어떻게 쓸건지임

toc:
  beginning: true  # 맨 앞에 목차
  sidebar: left  # 목차가 사이드바 왼쪽에 붙어있음

jupyter notebook

pretty_table

이걸 해야 표에 선이 생김

pretty_table: true
Left aligned Center aligned Right aligned
Left 1 center 1 right 1
Left 2 center 2 right 2
Left 3 center 3 right 3
ID Item Name Item Price

Redirect

이런 식으로 쓰면 글 눌렀을 때 바로 그 경로로 가짐

redirect: /assets/pdf/example_pdf.pdf

Citation

citation: true

이 아래 내용은 내가 안쓴건데 “이 사이트가 유용했다면 다음과 같은 방법으로 인용해주세요~” 라고 해줌
👇👇👇



If you found this useful, please cite this as:

Park, Jeonghoon (Jun 2025). Various techniques in al-folio. hoonably. https://hoonably.github.io.

or as a BibTeX entry:

@article{park2025various-techniques-in-al-folio,
  title   = {Various techniques in al-folio},
  author  = {Park, Jeonghoon},journal = {hoonably},
  year    = {2025},
  month   = {Jun},
  url     = {https://hoonably.github.io/blog/al-folio-tech/}
}