Designing with Markdown
Style your wiki using Markdown
EBT website wikis are written using Github Markdown.
NOTE: The Markdown processor used by EBT websites has less features than Gihub Markdown but supports HTML5 elements.
At the top of each Markdown file is a metadata block which describes the page.
| property | description |
|---|---|
| title | wiki page title |
| description | short description shown under title |
| detail | (optional, multiple) detailed description items |
| img | file name of image |
| alt | image accessible title |
| link | image source and/or attribution |
| category | category title for grouping in wiki table of contents |
| order | order within category (alphabetical otherwise) |
Each wiki page has its own image. You can also add your own images. Add new images to the following folder:
To preserve disk space and network performance, keep your images small. For example, each wiki page header image should be 250wx200h pixels, preferably in PNG format.
Images can also be embedded using the <img> tag.
Use the ebt-image class
for screenshots to avoid confusion between pictures of user interface
and the actual user interface. For example:
<img>
src="img/jan-kopriva-7BootnN3-0I-unsplash.jpg"
class="ebt-image"
/>
Markdown footnotes are written using the following syntax for inline footnotes[1]:
...the following syntax^[footnote-text].
Alternatively, you can use a different syntax with:
...reference[^a].[^a]: this is a normal footnoteFor more documentation, see this link
You can include many HTML5 elements such as <audio> on your
EBT site wiki pages.
For example, if you have an audio file at:
public/audio/simple-bell.oggThen you can add the following HTML to any of your Markdown files:
<audio controls src="audio/simple-bell.ogg">simple-bell</audio>Copy emojis from emojipedia. For example, here is a red heart:
❤️
this is an inline footnote
this is a normal footnote