This document is valid Markdown-in-Svelte or Svelte-in-Markdown, depending on the way you look at it, since Svelte is basically HTML, and Markdown can hold arbitrary HTML which it does not transform. It follows that “Markdown-to-Svelte” is actually a no-op. Why, then, is there a need for a library?
Svelte’s {'{'} and {'}'} are special, so, for the writer’s convenience, they are escaped by md2sv.
Since the beginning of static website generators (Jekyll, Webgen, etc.), the blog post files were
actually in YAML format. The first YAML document (delimited by ---) by convention is called the
‘frontmatter’. md2sv parses this data and adds it to Svelte’s (maybe pre-existing)
module-context script. This way, the defined key/value pairs become properties of the Svelte
component itself.
md2sv offers a Markdown Directive
named “raw”, i.e. :raw[text] (inline-level), ::raw[text] (paragraph-level) and :::raw
(block-level) where you can put text that is guaranteed not to be touched by md2sv or by any
Unified.js pipeline plugin like smart typography, syntax highlighting, or anything else.
Typically, you would use this feature for, but not limited to, Svelte code.
Following are a few examples.
:::raw):raw)The display variable is set to {display ? 'TRUE' : 'FALSE'}.
Note that in the code for the last sentence, the Svelte code is not broken by ‘smart typography’ even though we used the same single quotation mark everywhere.
The current browser window scroll position stored in scrollY is {scrollY}.
::raw)The following Markdown text is output only if display == true:
Maybe, just maybe.
{/if}md2sv’s default pipeline is freely extensible. Below are just a few ideas of what is possible:
In case you extend md2sv’s default pipeline, you can also use ‘smart’ “typography”… or even
GFM (GitHub-flavored Markdown), like strikethrough or http://autolinks or footnotes1.
const x == "42";
Math is typeset by surrounding it by $ characters.
Like this:
Indeed. ↩