markdown

<tosi-md> renders markdown using marked.

<tosi-md> renders markdown anywhere, either using the src attribute to load the file asynchronously, or rendering the text inside it.

<tosi-md>
## hello
world

![favicon](/favicon.svg)

| this  | is   | a     | table |
|-------|------|-------|-------|
| one   | two  | three | four  |
| five  | six  | seven | eight |
</tosi-md>

tosi-md {
  display: block;
  padding: var(--spacing);
}

Note that, by default, <tosi-md> will use its textContent (not its innerHTML) as its source.

rendering markdown from a url

Again, like an <img> tag, you can simply set a <tosi-md>'s src attribute to a URL pointing to markdown source and it will load it asynchronously and render it.

<tosi-md src="/path/to/file.md">

setting its value

Or, just set the element's value and it will render it for you. You can try this in the console, e.g.

$('.preview tosi-md').value = 'testing\n\n## this is a test'

elements

<tosi-md> also (optionally) allows the embedding of inline HTML elements without blocking markdown rendering, so that you can embed specific elements while retaining markdown. You need to explicitly set the elements property, and for markdown rendering not to be blocked, the html elements need to start on a new line and not be indented. E.g.

<tosi-md elements>
<form>
### this is a form
<label>
fill in this field.
**It's important!**
<input>
</label>
</form>
</tosi-md>

In this case <tosi-md> uses its innerHTML and not its textContent.

context and template variables

<tosi-md> also supports template values. You need to provide data to the element in the form of context (an arbitrary object, or a JSON string), and then embed the template text using handlebars-style doubled curly braces, e.g. {{path.to.value}}.

If no value is found, the original text is passed through.

Finally, note that template substitution occurs before markdown transformation, which means you can pass context data through to HTML elements.

<tosi-md
  elements
  context='{"title": "template example", "foo": {"bar": 17}, "nested": "*work*: {{foo.bar}}"}'
>
## {{title}}

The magic number is <input type="number" value={{foo.bar}}>

Oh, and nested templates {{nested}}.
</tosi-md>