This is a document that renders to elm-ui's Element msg.
Though remember, one of the great powers of this library is in writing custom blocks to suite your specific domain or style needs! You can parse a document to any data structure.
Think of this module as a starting point for writing something like a blog article.
Check out the source to get an idea of how things fit together.
Then feel free to borrow or copy anything you see.
These are some common blocks that you might need.
Feel free to define your own document and pick and choose what blocks make sense for you.
The title of your document. Renders as an h1.
| Title
The title of my document.A header.
| Header
My headerRenders as an h2.
A monospaced code block without syntax highlighting.
| Monospace
Everything in this block will be rendered monospaced.
Including this line.
And this one.Create an image.
| Image
src = https://placekitten.com/200/300
description = A cute kitty cat.List icon options.
For Number, we have
reset, which is the desired index reset if there is one.decorations, which are the strings to append after each number.So, a list item like:
#.5)
Would result in the following ListIcon:
Number
{ reset = [ Nothing, Just 5 ]
, decorations = [ ".", ")" ]
}A nested list with an expected indentation of 4 spaces per level. As far as icons:
- or -- indicates a bullet.-> or --> will render as an ➙#. will be auto-numbered as and rendered 1., or 2. or whatever number you're at.#) will format as 1) and #. will format as 1.#.#) would render as 1.2)9. means start counting up from 9 from here on out.#.9, which will reset the inner number.For configuring this block.
icon takes in a List Int, which is the current index of where that element is in the nested list. So, [1,2] means you're at postion 1.2.style isRender text into Element msg.
Includes Mark.Default.link and Mark.Default.code inline blocks, which can be styled as you'd like.
Note this is not a complicated function. If it doesn't meet your needs, don't be afraid to write your own using Mark.text!
Some default styling for code and link inline blocks.
Also replaces certain characters with some typographical niceties.
... is converted to the ellipses unicode character." Straight double quotes are replaced with curly quotes' Single Quotes are replaced with apostrophes. In the future we might differentiate between curly single quotes and apostrophes.-- is replaced with an en-dash.--- is replaced with an em-dash.<> - will create a non-breaking space ( ). This is not for manually increasing space (sequential <> tokens will only render as one ), but to signify that the space between two words shouldn't break when wrapping. Think of this like glueing two words together.// will change to /. Normally / starts italic formatting. To escape this, we'd normally do \/, though that looks pretty funky. // just feels better!These transformations also don't apply inside inline code or inside the monospace block.
Note Escaping the start of any of these characters will skip the replacement.
Also Note If you're not familiar with en-dash or em-dash, I definitely recommend reading a small bit about it—they're incredibly useful.
A custom inline block for code. This is analagous to backticks in markdown.
Though, style it however you'd like.
{Code| Here is my styled inline code block }
A custom inline block for links.
{Link|My link text|url=http://google.com}
Render a text fragment.
This document results in a
viewfunction,model -> Element msg.It includes all the blocks and inline blocks referenced in this module.
Note this document requires a
titleas the first block of each document by usingMark.startWith. If that isn't what you want, create your own document with your own constraints.