Index āŗ 4. Markdown
Recreate the Kitten count example in Markdown.
Topics covered
- Overview of Kittenās Markdown support.
- Mixing Markdown into Kitten HTML.
- Kitten Markdown Pages (.page.md files)
HTML is so 1991 (introducing Markdown)
HTML is great but did you know you can also use Markdown? (Well, now you do.)
Hereās how the Kitten Count example looks in Markdown.
let count = 1
export default () => kitten.markdown`
# Kitten count
${'š±ļø'.repeat(count++)}
`
Pretty neat!
(Granted, itās not a great use of Markdown but you get the idea.)
Kittenās Markdown support comes from markdown-it.
Supported Markdown
Kitten supports a very rich set of Markdown features including automatic anchors for headings, syntax highlighting, figure (and figure caption) support, footnotes, typographical niceties (like converting typewriter quotes ("") into curly quotes (āā), insert, mark, subscript, superscript, etc.) and even table of contents creation for Markdown sections.
Mixing Markdown into HTML
While you can use the kitten.markdown tagged template string, as shown above, a more common scenario is to mix Markdown into your Kitten HTML by enclosing them within <markdown>ā¦</markdown> tags.
So hereās what the above example looks like embedded inside Kitten HTML:
let count = 1
export default () => kitten.html`
<markdown>
# Kitten count
${'š±ļø'.repeat(count++)}
</markdown>
`
While this is great for mixing Markdown with HTML, in this case we only have Markdown on our page so using a Kitten Markdown Page for it is likely the best solution.
Additionally, you can put dynamic Markdown fragments in their own .fragment.md files.
Kitten Markdown Pages
You can also create whole pages in Markdown using Kitten Markdown Pages (.page.md files).
You customise the behaviour of Kitten Markdown Pages by adding front-matter in YAML format.
Specifically, you can:
Add arbitrary JavaScript in a special
script: |block.Set a layout template using the special
layoutproperty.Set custom props that are passed to your layout template.
You can import components and fragments in your script block and use them in your Markdown pages just as you would in regular Kitten pages. You can also use JavaScript variable interpolation in your Markdown.
Hereās what the above example looks like as a Kitten Markdown Page:
---
script: |
let count = 1
---
# Kitten count
${'š±ļø'.repeat(count++)}
Unlike HTML, Markdown is whitespace-sensitive so make sure you indent your code properly or it will get parsed incorrectly.
Right, our little detour into Markdown is complete so letās get back to building on our Kitten Count example by persisting the count so that it survives server restarts.
Next tutorial: Persistence