Litemark

Overview

Litemark is a lightweight markup language based on Markdown.

It is useful for writing content, documentation, blog articles, forum posts, etc.

Litemark's advantages over Markdown:

• Simpler, more consistent syntax (by comparison, the CommonMark spec has over 600 examples).
• Is extensible via Square Tags ([...])
• Features can be toggled on or off, to fit the type of content (e.g. user comments have fewer permissions)

Using Litemark

You can use Litemark in 3 ways:

• Litemark (Lm) Templates
• Litemark module
• Inside JCON

Example of Litemark (Lm) template:

tm welcomLm {

    # My Web App

    Welcome to my **web app**.

    See all [/features | Product Features]
}

Inline Markup

This is __italics__
This is **bold**
This is **bold with __italic text__ inside**
This is a `code tag`
This is a long dash -- and "smart quotes".

Paragraphs

One or more blank lines will separate the text into paragraph blocks.

Here is a paragraph.

Here is another.
It has two sentences that go together.

Links

Litemark will automatically convert common URL patterns to hyperlinks.

Please see http://abc.com/page

Link Tags

Links use a Square Tag [...] with the URL as the 1st argument.

The 2nd argument is the link label.

We use [https://duckduckgo.com | DuckDuckGo] for search.

Images

Images use the image Square Tag.

The second argument is the image alt text, for accessibility.

Images are automatically lazy-loaded for performance.

An image:

[image /images/tht_logo.png | THT Logo]

Lists

- Item 1
- Item 2
- Item 3

+ Item 1
+ Item 2
+ Item 3

Headings

# Heading 1
## Heading 2
### Heading 3

Block Quotes

Note: Line breaks are preserved.

> This is a famous quote.
>
> -- Someone Famous

Code Blocks

Start and end a line with three backticks (a "code fence") to create a <pre> block.

```
    $a = 123
    if $a > 200 {
        doSomething()
    }
```

$a = 123
if $a > 200 {
    doSomething()
}

Custom Code Classes

Add a custom class by appending text immediately after the opening fence.

```css
    a { color: #00C; }
```

// same as...

<pre class="css">
    a { color: #00C; }
</pre>

Tables

Table columns are separated by 2 or more spaces. You can create a blank cell with a single dash -.

The first row is always used as a table header (<th>).

Columns that contain numeric values (e.g. prices, percents) will be automatically aligned to the right.

Hello there

[table]
Thing                   Number      Etc.
Pi                      3.14        [/home | a link]
Chance of Rain          78%         -
Glasses                 $12.99      -
Population              45,000      -

You can add an optional second argument to set a class on the <table> tag.

[table forecasts]

Embedded HTML

HTML is only intended for content authors, not for visitors posting comments, etc.

There are two places where HTML tags are allowed:

1. Inside of a Litemark template function.
2. Calling Litemark.parse with the feature xDangerHtml.

Example:

<div style="text-align: center">
    **<span style="color:green">Green</span> bold center**
</div>

Using HTML Template Variables

In template functions, the Litemark parser processes the body after the placeholders are substituted in.

This means you will often need to wrap the variable in an extra set of HTML tags.

# Heading

<div>{{ someHtml() }}</div>

Square Tags

Square tags [...] are similar to BBCode tags.

They provide extra formatting via a uniform syntax and are customizable.

HTML Shortcuts

Many inline HTML tags have one-to-one equivalents.

- [dfn DNA] is the code of life.
- Press [kbd Ctrl-C] to copy the code.
- Mutations are [del mistakes] happy accidents.
- Never put Uranium[sup 238] in your H[sub 2]O.
- Add a line break.[br]That is, if you need one.
- Add an extra space: [sp]For clarity.
- This isn't split by a line break: [nobr 1 2 3]

Callouts / Alerts

You can create callouts that match Bootstrap's "alert" components.

[info | Just a regular callout.]
[info Tip | Don't forget to tip your server.]
[success Great | You pressed the button!]
[warning Warning | Don't do the wrong thing.]

Icons

You can embed any of THT's built-in SVG Icons.

[icon menu] Menu

[icon check] Important Feature

[icon arrowRight] Look at this

Table of Contents

The square tag [toc] will insert an auto-generated table of contents, with links to each of your h2 headings.

# Top Recipes

[toc]

## Turkey Tetrazzini
...
## Terrific Tacos
...
## Toffee Tiramisu
...

Feature Sets

Different types of content requires different levels of access to Litemark features.

For example, an outside commenter should not be able to use heading tags, but should still be able to format with bold, italic, etc.

When calling the Litemark parser, feature flags can be added one-by-one, or enabled with a feature set.

Feature Sets:

• :comment - basic text formatting
• :forum - inline images and labelled link tags
• :blog - most tags & markup, except HTML
• :xDangerAll - everything, including inline HTML (default for templates)

For more info, see Litemark.parse.

Custom Square Tags

It's possible to register your own custom square tags.

Custom tags start with the command name, then optional arguments, and end with the text.

[command text]
[command argument1 | text]
[command argument2 | argument1 | text]

For more info see Litemark.parse.

See Also

• Litemark Module
• Lm Templates
• JCON Configuration Format