djl-lipsum

Below is a djl-lipsum element. Without a value, it outputs lorem ipsum

The random-start property starts the text at a random word.

You can limit the length of the text with the length property.

You can provide arbitrary text to display (instead of lipsum) by giving it inside the element

You can combine the length and wrap attributes to get placeholder text that wraps around until text is length long.

You can also combine all three attributes.

djl-script

Below are some examples of the djl-code element. It executes the JavaScript given as it's text, and allows editing and re-execution by clicking on it

5,000 * 57 = 5000 * 57

`Happy ${['Sun', 'Mon', 'Tues', 'Wednes', 'Thurs', 'Fri', 'Satur'][new Date().getDay()]}day`

Setting the `disabled` attribute prevents viewing and editing the source
`Happy ${['Sun', 'Mon', 'Tues', 'Wednes', 'Thurs', 'Fri', 'Satur'][new Date().getDay()]}day`

You can also use await for async operations
await fetch('./why').then(r => r.text())

Errors will set the `error` attribute on the element and display the error message.
'oops
Fixing the error will clear the attribute.

djl-spinner

Loading spinners!

Customize size, background and foreground colours

djl-json

Below are some examples of the djl-json element. It retrieves a JSON document from src, and displays the property prop

According to example.json, my friends are:

...and my name is: loading...

Stick a spinner inside to let people know you're getting your date of birth:
(you may need to throttle your network to see this if you're running this locally)

djl-codeblock

Below are some examples of the djl-codeblock element. By default it behaves like <pre><code>...</code></pre>

for (int i = 0; i < 20; i = rand()) { if (i % 2) { printf("%d\n", i); } else { break; } }

If you pass a space-seperated list of keywords you can highlight them using the djl-codeblock > .keyword CSS selector

for (int i = 0; i < 20; i = rand()) { if (i % 2) { printf("%d\n", i); } else { break; } }

If you provide the language attribute you can reuse the keywords in later blocks

if (x) printf("if keyword still highlights :)\n");

The following languages have some default highlights which may or may not be useful

Console (language="console")
C (language="c")
Javascript (langauge="javascript")
Python (language="python")

Here's an example of the default console highlighting

$ for i in $(seq 1 5); do > echo "$i" > done

djl-tex

Below are some examples of the djl-tex element, which renders KaTeX math equations

c = \pm\sqrt {a^2 + b^2}

x = \begin{cases} a &\text{if } b \\ c &\text{if } d \\ e &\text{if } f \end{cases}

You can use the displayMode attribute to set the KaTex displayMode option

\begin{split} x &= 27 + 42.0 \\ x &= 69 \end{split}

FiddlyWiki

Multivariable Calculus