마리모(Marimo) Markdown 사용법 정리 – [mo.md, 아이콘, LaTeX, 툴팁, 이미지 삽입]

마리모(Marimo) Markdown 사용법 정리

오늘은 Marimo의 API 레퍼런스 중에서 마크다운과 관련된 내용을 간단하게 알아보자.

목차

• mo.md(text: str) -> Html
• mo.icon(...)
• LaTeX
• Tooltip
• Image

mo.md(text: str) -> Html

✔ Markdown 문자열을 마리모 앱에서 렌더링하는 기본 함수

mo.md(text: str)는 입력된 마크다운 문자열을 HTML 형태로 렌더링하여 마리모 앱 셀에서 시각적으로 표현해주는 기본 함수이다.
LaTeX 수식, 코드 블록, HTML 태그 등도 함께 사용할 수 있어 문서 작성, 수식 표현, 시각화된 결과 공유 등에 활용될 수 있다.
특히 f-string 문법을 활용하여 파이썬 변수나 mo.ui 컴포넌트의 값을 직접 마크다운 내에 삽입할 수 있으며, 시각화 결과(예: matplotlib plot)는 mo.as_html()로 변환해 삽입할 수 있다.

text_input = mo.ui.text()
mo.md(f"Text input: {text_input}")

plt.plot([1, 2])
mo.md(f"Plot: {mo.as_html(plt.gca())}")

mo.md

mo.as_html

mo.icon(...)

✔ 다양한 아이콘을 마크다운 또는 코드로 삽입하는 방법

마리모는 Iconify를 기반으로 다양한 아이콘 세트를 지원하며, 마크다운 내에서는 ::iconset:icon-name:: 형식으로 아이콘을 삽입할 수 있다. 예를 들어 ::lucide:rocket::은 로켓 아이콘을 삽입한다.

mo.md(f'::lucide:rocket:: / ::lucide:bot-message-square::')

icon

보다 정교한 조정이 필요한 경우 mo.icon(name: str, size: int = 16, color: str = None, rotate: int = 0) 함수를 사용하면 크기, 색상, 회전 등의 스타일을 지정할 수 있다.
아이콘은 UI 구성요소나 시각적 강조를 위해 유용하게 활용되며, 마크다운 내 텍스트와 결합해 직관적인 안내가 가능하다.
아이콘은 Lucide의 아이콘도 사용할 수 있다.

mo.icon("lucide:rocket", size=20, color="red")
mo.icon("lucide:bot-message-square", size=50, color="black", rotate=90)

mo.icon

LaTeX

✔ 수학 공식과 과학 수식을 정교하게 표현하는 LaTeX 지원

마리모는 mo.md() 내에서 LaTeX 수식 표현을 기본적으로 지원하며, 인라인 수식은 $...$, 블록 수식은 $$...$$ 또는 \[...\] 형식으로 작성할 수 있다.

mo.md(
    r'''
    Latex Example $f(x) = e^x$

    \[
        f(x) = 1 + x + \frac{x^2}{2!} + \frac{x^3}{3!} + \ldots.
    \]
    '''
)

또한, 복잡한 수식 정의나 사용자 정의 명령어가 필요한 경우, 외부 LaTeX 매크로 파일을 mo.latex(filename="...")로 불러와 사용할 수 있어 수학/과학 관련 문서 작성 시 높은 유연성을 제공한다.

Latex

Tooltip

✔ 마우스 오버 시 제공하는 툴팁 기능

마리모에서는 HTML 요소에 data-tooltip 속성을 활용해 툴팁을 쉽게 추가할 수 있다. 마우스를 올렸을 때 정보를 전달하는 데 유용하며, 특히 인터랙티브 UI나 가이드를 제공할 때 활용도가 높다.

mo.md(
    '''
    <div data-tooltip="Tooltip Example">
        마우스를 올리면 툴팁 제시
    </div>
    '''
)

tooltip

버튼, 입력창 등 mo.ui로 생성된 컴포넌트의 라벨에 직접 툴팁을 연결하는 방식으로도 사용할 수 있다. 사용자 경험을 개선하고 UI의 직관성을 높이는 데 효과적이다.

Image

✔ 이미지 삽입은 HTML 태그로 구현 가능

마리모에서는 public/ 폴더에 저장된 이미지 파일을 HTML의 <img> 태그를 활용하여 마크다운 내에 삽입할 수 있다.

mo.md(
    '''
    <img src="public/thumbnail.png" style="width:100%;" />
    '''
)

image

style 속성을 이용해 이미지 크기나 정렬 등의 스타일을 조정할 수 있다.

마리모에서 제공하는 많은 기능들 중 마크다운과 관련된 내용을 알아봤다.
HTML을 사용해서 유연한 UI랑 차트(chart.js를 사용)를 만들 수 있을 것 같은데, 시간내서 해봐야겠다.

Buy me a coffee

커피 한 잔으로
저를 응원해주세요!