Funnel Markdown
Content for this design system is written using Markdown, with a few extensions on top.
Markdown is an author-friendly text format that is easy to write and to read. We use Github’s markdown format with includes some handy extensions on top of basic Markdown like a format for tables.
If you’ve ever written a comment on Github you’ve already used Github markdown.
On top of this Gunnel also supports a number of Markdown extensions especially tailored for writing content for this design system, detailed below.
Custom paragraphs
Custom paragraphs all use a custom fence ::: around the paragraph with a paragraph type attached.
Lead
This is some lead text. It is usually used for the first paragraph of an article.
Info
Some important or useful information for you right here.
Warning
This custom paragraph is useful for warning users they might be about to make a mistake.
Danger
Oh no! Something terrible will definitely happen now.
Rules
Rule paragraphs are useful for letting the user know when there are very specific use cases that they must, or must not, follow.
Do follow rules in one of these boxes.
Don’t ignore rules in these boxes though!
Try not do do things in these boxes but you can sometimes under special circumstances.
Dark
For showcasing some elements using ‘dark’ theme we provide a ‘dark’ paragraph:
Code examples
Standard code highligting
Standard code highlighting works as normal, using the standard three-backticks format of Markdown.
To mark up code blocks themselves, live we’ve done above, surround them with four backticks!
Live code
Funnel markdown has a bonus: if the code is HTML or JSX it can be tagged as ‘live’ and the code will be executed and the results rendered.
To enable live code add the live=true tag to the block:
To initially hide the code, which can be useful for some examples, add the code=false tag:
