MarkUP GitHub

MarkUP showcase

This document uses every construct of the language. Markdown works as usual — emphasis, strong, code, links, strikethrough and footnotes1 — and directives add components.

Callouts

Warning

A collapsible callout. The body is hidden until the reader opens it.

Layout

Parser

@markup-lang/core reads blocks, inlines, directives and data into a syntax tree with positions.

Renderers

@markup-lang/html and @markup-lang/text turn the tree into HTML or plain text.

Editors

The language service gives VS Code and MarkUP Desktop the same completion and diagnostics.

git clone https://github.com/arturjoaodaros-dev/MarkUP
cd MarkUP && npm install && npm run build

node packages/cli/dist/markup.js build examples --out site

Data

Built-in components by category
Built-in components by category012345CalloutsLayoutContentInlineDataNavigationCallouts — Built-in components by category: 5Layout — Built-in components by category: 5Content — Built-in components by category: 3Inline — Built-in components by category: 3Data — Built-in components by category: 1Navigation — Built-in components by category: 1
Built-in components by category
Callouts5
Layout5
Content3
Inline3
Data1
Navigation1
Sample data — requests per hour
Sample data — requests per hour010020030008:0009:0010:0011:0012:0013:0008:00 — Monday: 12009:00 — Monday: 18010:00 — Monday: 17011:00 — Monday: 24012:00 — Monday: 26013:00 — Monday: 21008:00 — Tuesday: 10009:00 — Tuesday: 16010:00 — Tuesday: 21011:00 — Tuesday: 23012:00 — Tuesday: 25013:00 — Tuesday: 240
  • Monday
  • Tuesday
MondayTuesday
08:00120100
09:00180160
10:00170210
11:00240230
12:00260250
13:00210240
Diagnostic codes
Diagnostic codesSyntax: 16 (42.1%)Data: 4 (10.5%)Validation: 17 (44.7%)Internal: 1 (2.6%)
  • Syntax
  • Data
  • Validation
  • Internal
Diagnostic codes
Syntax16
Data4
Validation17
Internal1
RangeCodesKind
MU1xxx16syntax
MU15xx4data
MU2xxx17validation
MU9xxx1internal
Chapter 3 of 560%

Text

A block quote. It can contain any block, including components.

  1. Write the document in any editor.
  2. Check it with markup check.
  3. Build it with markup build.
  • Windows installer
  • macOS and Linux packages
Why is there no raw HTML?

<div> is shown as text. Documents stay independent of the output format, and previews are safe. Use components, and CSS classes on them, instead.

render.ts
import { markupToHtml } from '@markup-lang/html';

const { html, diagnostics } = markupToHtml('# Hello');

  1. Footnotes are collected at the end of the document, with links back to each reference. ↩