Markdown

ic.Markdown renders Markdown text as formatted HTML using markdown-it. It supports syntax highlighting for code blocks (highlight.js), KaTeX math, Mermaid diagrams, task lists, footnotes, admonition containers, and many other extensions, each controlled by its own toggle property.

Basics

Value takes a Markdown string and renders it as HTML. LineWrapping wraps long lines (on by default). Sanitize strips raw HTML tags from the output for safety (on by default). CodeHighlight enables syntax highlighting in fenced code blocks via highlight.js, with support for MATLAB, Python, JavaScript, CSS, and others.

Controls

Welcome to Markdown

This is a bold and italic text with inline code.

Lists

  • First item
  • Second item
    • Nested item
  • Third item
  1. Ordered one
  2. Ordered two

Links and images

Visit MathWorks for more.

Code

x = linspace(0, 2*pi, 100);
y = sin(x);
plot(x, y);
title("Sine Wave");

Blockquote

The best way to predict the future is to invent it.

Table

Method Accuracy Speed
Baseline 0.85 1.0x
Improved 0.92 0.8x
Proposed 0.96 1.2x

Inline extensions

These are all on by default. TaskLists renders - [x] as checkboxes. Footnotes supports [^1] syntax. SubSuperscript handles H~2~O and x^2^. Emoji converts shortcodes like :tada:. Mark highlights ==text==. Insert underlines ++text++. DefinitionLists and Abbreviations add their respective syntax support.

Controls

Task Lists

  • [x] Implement renderer
  • [x] Add syntax highlighting
  • [ ] Write documentation

Footnotes

The IC framework[^1] renders markdown client-side.

[^1]: IC stands for Instrument Components.

Subscript and Superscript

Water is H~2~O. Einstein said E = mc^2^.

Emoji

That is great :tada: and looks good :+1:

Mark / Highlight

This is ==highlighted text== in the document.

Insert (underline)

This text is ++inserted/underlined++.

Definition Lists

Markdown : A lightweight markup language.

LaTeX : A document preparation system.

Abbreviations

The HTML specification is maintained by the W3C.

*[HTML]: Hyper Text Markup Language *[W3C]: World Wide Web Consortium

Containers (admonitions)

Containers enables :::type Title blocks. Four types are available: info, tip, warning, and danger. Each renders with its own color and icon.

:::info Information This is an informational note. :::

:::tip Tip Use containers for callouts. :::

:::warning Caution Be careful with this approach. :::

:::danger Error This operation is destructive. :::

Math (KaTeX)

Math enables LaTeX math rendering via KaTeX. Inline math uses $...$, display math uses $$...$$. Off by default.

Inline math

The Euler identity $e^{i\pi} + 1 = 0$ is elegant.

Display math

$$ \int_0^\infty \frac{x^3}{e^x - 1} , dx = \frac{\pi^4}{15} $$

$$ \nabla \times \mathbf{E} = -\frac{\partial \mathbf{B}}{\partial t} $$

Mermaid diagrams

Mermaid renders fenced mermaid code blocks as SVG diagrams via Mermaid.js. Supports flowcharts, sequence diagrams, class diagrams, and more. Off by default.

Flowchart

graph TD
    A[Start] --> B{Check}
    B -->|Yes| C[Process]
    B -->|No| D[Fix]
    D --> B
    C --> E[Done]

Sequence diagram

sequenceDiagram
    MATLAB->>Svelte: publish(props)
    Svelte->>Svelte: render()
    Svelte-->>MATLAB: event(data)

Table of contents

TableOfContents renders a TOC wherever [[toc]] appears in the source. Works together with HeadingAnchors (on by default), which generates anchor IDs on headings for in-page navigation.

[[toc]]

Introduction

Some introductory text.

Methods

Approach A

Details about approach A.

Approach B

Details about approach B.

Results

Summary of findings.

Height

Height accepts a pixel value or any CSS size string. Defaults to "100%".

Controls

Welcome to Markdown

This is a bold and italic text with inline code.

Lists

  • First item
  • Second item
    • Nested item
  • Third item
  1. Ordered one
  2. Ordered two

Links and images

Visit MathWorks for more.

Code

x = linspace(0, 2*pi, 100);
y = sin(x);
plot(x, y);
title("Sine Wave");

Blockquote

The best way to predict the future is to invent it.

Table

Method Accuracy Speed
Baseline 0.85 1.0x
Improved 0.92 0.8x
Proposed 0.96 1.2x

Images

Images referenced with ![alt](path) are resolved through MATLAB when the path is absolute or a URL. Local files are read and embedded as base64 data URIs.

md = ic.Markdown();
md.Value = "![My plot](results/plot.png)";

Custom styling

You can target .ic-md (the container), .ic-md__content (the content area with all rendered HTML), and standard HTML selectors within it like h1, h2, pre, blockquote, table, etc.

Welcome to Markdown

This is a bold and italic text with inline code.

Lists

  • First item
  • Second item
    • Nested item
  • Third item
  1. Ordered one
  2. Ordered two

Links and images

Visit MathWorks for more.

Code

x = linspace(0, 2*pi, 100);
y = sin(x);
plot(x, y);
title("Sine Wave");

Blockquote

The best way to predict the future is to invent it.

Table

Method Accuracy Speed
Baseline 0.85 1.0x
Improved 0.92 0.8x
Proposed 0.96 1.2x 
md = ic.Markdown();
md.Value = mySource;

% Rounded container
md.css.style(".ic-md", ...
    "border_radius", "8px", ...
    "border_color", "#86efac");

% Custom content padding and font
md.css.style(".ic-md__content", ...
    "padding", "24px 32px", ...
    "font_family", "Georgia, serif", ...
    "font_size", "15px");

% Tinted headings
md.css.style(".ic-md__content h1, .ic-md__content h2", ...
    "color", "#166534", ...
    "border_bottom_color", "#bbf7d0");

% Styled code blocks
md.css.style(".ic-md__content pre", ...
    "background_color", "#f0fdf4", ...
    "border_color", "#bbf7d0");
Compatibility note. Figures run in different browsers depending on Matlabs version and operating system. CSS features like linear-gradient, backdrop-filter, or newer color functions may not work everywhere. For reference, MATLAB R2024b uses Chromium 104. Always test your custom styles in the MATLAB version you are targeting, and use canIuse to check compatibility of specific CSS features if you know the browser version MATLAB is using. Use the Developer Tools component to inspect the DOM structure of each component and find the right selectors for styling.