li.js converts Markdown (or any plain text file) into a formatted web page. You can use it to create documents, presentations, or simple websites. There's no code, no installs, no download, just paste this link at the top of your file and save it as .html
<script src='https://li.js.org/li.js'></script>
li.js does not collect any data of any kind from its users, and never will. We believe that no one would use li.js if that were the case. However, users should make sure never to import li.js from any domain other than li.js.org, as there is no way of being certain that the version being imported is secure.
li.js is free and open soure. It is released under the BSD 3-Clause "New" or "Revised" License. See the full licence here.
Use Markdown syntax to add formatting. li.js also adds some new syntax.
| Syntax | Result |
|---|---|
| /// | Creates a blank space equal to 1/10th of the page height |
| ////// | Creates a blank space equal to 1/2 of the page height. Also separates out slides when used with li.present |
| ( #ffff88: text ) | Colours the text with the colour from the hex code |
| ( rgb(255, 180, 30): text ) | Colours the text with the colour from the rgb code |
| § | Creates a non-breaking space. Useful for spacing out. (use \§ to type a §) |
| Syntax | Result |
|---|---|
| @li.table | Converts a CSV or TSV starting on the line below to a table. Does not work if there are rogue commas or tabs unless they are escaped with \ |
| @li.present | Enables presentation mode. Use the mouse click or arrow keys to navigate through slides |
| @li.tooltip( text : hover_text ) | Displays the hover text when the mouse hovers over the textlike this! |
| @li.font( font name [, import_url ]) | Changes the font for the whole document. If only one parameter is passed li.js will try to find a font on Google Fonts with that name |
| @li.centre | Positions text on the same line in the centre of the page |
| @li.big | Makes text on the same line as large as possible |
| @li.youtube( video_id [, size ]) | Embeds the YouTube video with the video id specified. The second parameter controls the width of the video in pixels. It can also be set to 'full' to make the video fill the screen |
| Syntax | Result |
|---|---|
| @li.d3.tree root branch leaf branch leaf |
Converts data on the lines below to a tree diagram. The expected data format is shown on the left, where the spaces before each node indicate it's depth in the hierarchy (one space per level). The implementation is identical to Mike Bostock's Tree-o-Matic |
| @li.d3.cluster root branch leaf branch leaf |
Creates a tree diagram using the d3.cluster algorithm. @li.d3.cluster-no-separation can also be used |
| @li.d3.force-bubble label name, measure name A, 143 B, 302 C, 240 D, 134 |
Converts data on the lines below to a force layout bubble chart. Example of data format is shown on the left, where the first value for each line is the label, and the second is the area of the bubble. If there is a third value it will be used to colour the bubbles |